table表格标簽的屬性有哪些-tft每日頭條

我們繼續往下講述，關于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标簽自帶的内外邊距所導緻呢，如何去掉呢，很簡單，使用

cellpadding和cellspacing屬性就可以搞定，代碼如下：

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

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

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

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，設置内外邊距及單元格之間的合并。

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