首页
/
每日頭條
/
圖文
/
table表格标簽的屬性有哪些
table表格标簽的屬性有哪些
更新时间:2024-12-27 21:07:35

我們繼續往下講述,關于a标簽的跳轉,我們用到的是href屬性,href裡面對應的就是我們需要跳轉的地址,可以是本地文件的跳轉,也可以是網絡地址的跳轉,這個很簡單了,就不過多做贅述了。

大家有沒有發現,在上述的例子中,我們點擊a标簽後,跳轉的頁面都是在當前窗口打開的,在實際的開發中,如果說在新的窗口打開呢?那麼我就需要a标簽的另一個屬性“target”,target這個屬性,可以使得我們選擇在當前頁面或者新窗口進行打開,默認不寫或者target=“_self”,是當前窗口,target=“_blank”,是在新的窗口打開。

我們舉個例子:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)1

目錄結構

目前,零基礎這個文件夾裡,有兩個文件,“a标簽.html”這個文件裡的代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)2

代碼展示

跳轉地址為同目錄的“遠程圖片加載.html”文件,target屬性為_blank,在新的窗口打開,我們看下效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)3

點擊

點擊後,打開新的窗口進行展示:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)4

新窗口打開

上邊的例子,大家可以實際操作一下。

之前說過,a标簽,不僅僅可以是文字,也可以是圖片,比如我們給上邊的“遠程圖片加載.html”這個文件裡的圖片,加上超鍊接,讓它跳轉到百度,代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)5

代碼

效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)6

效果

點擊圖片後,跳轉到了百度

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)7

跳轉到百度

簡單吧,所以啊,老鐵們,網頁制作啊,沒什麼好難的,輕輕松松都能學會。

3、表格标簽,table,tr,td

表格,對于我們來說,司空見慣,課程表啊,人員信息表啊,這些Excel我們經常用,那麼如何在網頁上來表示表格呢?這就不得不提到table系列标簽。

table表示一個表格,每一行由tr來表示,每一列由td來表示,舉個很簡單的例子,1行1列,代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)8

代碼

大家可以看到,代碼這裡,為了大家能夠直觀,很清晰地看到,我自己做了格式化,這裡大家作為了一個了解就可以了,因為從第三天開始,我們就要鳥槍換炮,采用IDE進行開發,那簡直就是如虎添翼,開發起來,嗖嗖的,我們拭目以待。

好,我們看下代碼實現的效果,右鍵點擊打開方式為浏覽器:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)9

what?什麼鬼?這就是表格,開玩笑的吧,沒開玩笑老鐵,這确确實實,就是上述代碼運行的效果,為什麼和我們平常的表格不一樣,那是因為沒有添加屬性啊,來,上才藝,加上邊框,border,我們再來看下效果:

更改代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)10

上面的代碼,我們加上了表格的邊框,寬度為1,單位默認是像素,可帶可不帶,運行效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)11

有的朋友看到上面的效果,可能就有疑問了,為什麼會有兩個邊框呢?這是由于table标簽自帶的内外邊距所導緻呢,如何去掉呢,很簡單,使用

cellpaddingcellspacing屬性就可以搞定,代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)12

效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)13

這裡對兩個屬性,做一個解釋,cellpadding,指的是單元格内容與其邊框之間的空白,我們來看個對比:

不設置cellpadding

代碼:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)14

效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)15

設置cellpadding為10:

代碼:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)16

效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)17

是不是很清晰地看到了,表格中的内容距離邊框明顯遠了,這就是cellpadding的作用。

我們再來看cellspacing,它指的是單元格之間的距離,我們看下對比:

不設置cellspacing:

代碼:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)18

效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)19

設置cellspacing為10:

代碼:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)20

效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)21

cellpaddingcellspacing屬性,大家不要搞混淆了,一個是内容到邊框的距離,一個單元格之間的距離。

來吧,實戰練習一下,下面這個表格呢,是我用畫圖工具畫的,對得不是很齊,将就着看哈,對于下面的表格,我們該如何實現呢?

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)22

首先呢,先分析,這個是很有必要的,即便以後,我們學有所成,做任何東西之前,也盡量要先分析,後寫代碼,通過上圖,我們可以看到,有有5行3列,那麼對應的tr,也就是行,就會有5個,每個tr裡,有4列,也就是有4個td,ok,我們直接上代碼:

代碼有點多,其實都是重複的,莫害怕,不截圖了,直接代碼塊,大家盡量自己寫,千萬别複制啊:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格練習</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td>姓名</td> <td>年齡</td> <td>性别</td> <td>籍貫</td> </tr> <tr> <td>小趙</td> <td>12</td> <td>男</td> <td>北京</td> </tr> <tr> <td>小王</td> <td>23</td> <td>女</td> <td>上海</td> </tr> <tr> <td>老李</td> <td>36</td> <td>男</td> <td>鄭州</td> </tr> <tr> <td>老王</td> <td>68</td> <td>男</td> <td>廣州</td> </tr> </table> </body> </html>

效果如下圖:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)23

雖然效果出來了,但是,是不是感覺很小啊,怎麼解決?老鐵們,前邊我們是不是講過圖片是如何控制大小的,通過寬width和高height這兩個屬性是吧,同樣的,這兩個屬性,也可以用于表格,我們不妨給當前表格設置,寬為500,高為300。

代碼如下:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格練習</title> </head> <body> <table border="1" cellpadding="0" cellspacing="0" width="500" height="300"> <tr> <td>姓名</td> <td>年齡</td> <td>性别</td> <td>籍貫</td> </tr> <tr> <td>小趙</td> <td>12</td> <td>男</td> <td>北京</td> </tr> <tr> <td>小王</td> <td>23</td> <td>女</td> <td>上海</td> </tr> <tr> <td>老李</td> <td>36</td> <td>男</td> <td>鄭州</td> </tr> <tr> <td>老王</td> <td>68</td> <td>男</td> <td>廣州</td> </tr> </table> </body> </html>

效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)24

效果明顯好轉了是吧,但是,問題來了,文字沒有居中,怎麼搞?如果我們以後學了css樣式後,其實特别簡單,這裡就先不擴展css的東西,還是先研究html,一點一點來,按部就班。文字居中,就需要用到align屬性,它有三個值,left,center,right,很明顯就是,左,中,右;來,我們設置居中:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)25

這裡呢,我們需要給每一個td,去添加這個屬性,這裡我就不添加太多了,隻給第一行添加了,大家練習的時候,可以都加上,我們看下效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)26

因為,我隻給第一行添加了居中,所以呈現出的效果就如上圖。

對于表格的練習,大家多練習練習,沒什麼難的,分析好幾行幾列後,就用tr和td寫出來;上邊的表格,還差一個标題,标題如何去寫呢,之前已經學過了h系列标簽,還有p标簽,這兩個都可以使用,這裡我們再學一個局限于表格的标題标簽,caption,我們直接上代碼:

還是上邊的例子啊,代碼就不全粘貼了,這裡隻貼了部分代碼:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)27

效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)28

基本上常規的表格,我們已經講述完了,我們再來看看,不常規的。

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)29

看到上圖,是一種什麼感覺,是不是很直觀地發現,有單元格的合并效果,這個在表格裡面很常見,但在代碼裡該如何體現呢?首先我們先來了解下table的另兩個屬性,rowspan和colspan。

rowspan

跨行,也就是行與行之間合并,用法,rowspan=“2”,值為幾,就是合并幾行。

colspan

跨列,也就是列與列之間合并,用法,colspan=“2”,值為幾,就是合并幾列。

舉個例子:

先看代碼:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)30

效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)31

其實就是一個兩行兩列的代碼,現在呢,我想要把1和2合并,也就是列與列之間合并,怎麼合并,使用colspan屬性呗,來,看代碼:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)32

效果展示:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)33

有一點需要注意,你合并之後,一定要把多餘的給去掉,大家可以看到,在代碼中,第一行中,隻有一個td标簽,因為你要合并兩個表格成為1個表格,所以,多餘的要删除,合并3個,4個及多個,都是這樣處理。

好,我們把代碼還原,進行合并1和3,1和3是行之間的合并,進而要使用rowspan,代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)34

效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)35

注意:同樣的,你合并時,也要記得,把多餘的給删除,可以直接看代碼,我的實現。

經過簡單的練習後,那麼我們直接實現剛開始的截圖效果吧,就是如下圖:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)36

代碼實現

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)37

效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)38

這裡為了表格展示好看,我用了width屬性,具體大家可以看代碼,好了,table表格相關的,基本上就結束了,也給大家舉了很多例子,大家可以多寫寫,一定要掌握住哦。

4、文本格式化的使用

文本格式化,這個大家作為一個了解即可,所謂的文本格式,就是文本的樣式,比如,加粗,斜體,大号字,小号字,插入字,删除字等。

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)39

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)40

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)41

我們找其中幾個簡單地展示一下,代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)42

效果如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)43

文本格式,大家作為一個了解,因為這些内容後期,大部分都被css所代替,不過大家能夠掌握的話,也是一件好事,說個比較有意思的标簽,就是pre,這個是預格式文本,也就說,它會保留你書寫的格式。

比如代碼如下:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)44

效果:

table表格标簽的屬性有哪些(零基礎10天學會網頁制作第二天)45

5、總結及回顧

第二天的内容比較多,總共分為了三篇文章進行講述,大家可以發現,基本上都是特别的詳細,我可以這樣說,這是目前網上關于網頁制作教程中是最詳細的,哈哈,有點飄了啊,之所以詳細呢,就是為了照顧到零基礎的朋友。

今天的總結回顧呢,兩個掌握的知識點:

1、a标簽的使用,本地和遠程地址的跳轉,新窗口的設置。

2、table标簽的使用,掌握住tr,td,設置内外邊距及單元格之間的合并。

今天的作業,就是把第二天當中所講的内容,自己好好地敲上一遍,好了,就到這裡吧,拜拜,我們第三天見。

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
五行屬木最吉利的字
五行屬木最吉利的字
五行屬木最吉利的字?壬、子、巽、巳、辛、戍六山屬土,乙、辰、庚、酉四山屬金,甲、卯、坤、申四山屬水,艮、寅、丁、未四山屬木,癸、醜、丙、午、乾、亥六山屬火《魏鑒》曰:此十幹化氣所生也其法用五子元遁視化氣天幹所加之支即為同氣,而同宮之幹維随之...
2024-12-27
上汽大衆威然耐用嗎
上汽大衆威然耐用嗎
把老款與新款都算上,這已是TC君第五次試駕威然了,說實話它是最讓TC君矛盾的一款MPV。威然正式發布的2019年,MPV市場并沒有像現在這樣“卷”,那時候威然就是大衆汽車發現了中國細分市場中的一塊空白而誕生的,而且誕生之初,威然就是國内MP...
2024-12-27
寶媽斷奶都需要注意什麼
寶媽斷奶都需要注意什麼
每個寶寶都要面對口糧被克扣的一天,每一個母乳喂養的媽媽都要面對斷奶這道難關!但并不是每個家庭斷奶過程都是一帆風順的。那麼斷奶都有哪些注意事項呢?咱們今天來說一說。1、提前做好斷奶準備家庭準備:寶寶斷奶後,一般是先吃奶粉,這就要寶媽寶爸讓寶寶...
2024-12-27
Ps怎麼制作公章
Ps怎麼制作公章
首先我們先來看一下最終的效果圖:第一步:打開PS,新建一個600乘600像素的文件,如下圖:第二步:用橢圓工具,工具模式選擇路徑,畫一個圓的路徑,并用路徑選擇工具,調整好路徑的位置,如下圖所示:第三步:用文字工具,光标放到路徑的上面再單擊,...
2024-12-27
當前解決一切問題的根本途徑
當前解決一切問題的根本途徑
這幾天網上看到老家甘肅省會城市蘭州公交集團因發不出工資,進行讓員工自己貸款發工資測試的事情,感覺心裡五味雜陳,之所以讓員工進行貸款測試,是因為受疫情等諸多因素影響,截至8月底蘭州公交集團總負債達39億,拖欠職工工資及社保約5億,已經無法以集...
2024-12-27
Copyright 2023-2024 - www.tftnews.com All Rights Reserved