生活随笔
收集整理的這篇文章主要介紹了
Web前端开发笔记——第二章 HTML语言 第七节 表格标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 一、表格標簽的定義
- 二、表格標簽的屬性
- 三、表格標簽的表頭
- 四、表格標簽的標題
- 五、表格標簽的嵌套
- 結語
一、表格標簽的定義
在html中，表格標簽表示為<table></table>，其中的每行用<tr></tr>標簽表示，在表格中的每一行都由若干個單元格組成，表示為<td><td>，它代表該單元格的數據，可以為文本、圖片、列表等等，且可以在其中嵌套表格。
例如，在HBuilder X中，下列html代碼，設定一個三行四列的表格：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table><tr><td>1
</td><td>2
</td><td>3
</td><td>4
</td></tr><tr><td>5
</td><td>6
</td><td>7
</td><td>8
</td></tr><tr><td>9
</td><td>10
</td><td>11
</td><td>12
</td></tr></table></body>
</html>
運行結果如下：
二、表格標簽的屬性
（一）邊框屬性
上圖創建的表格是沒有屬性的，它表示的是無邊框的表格，其table標簽屬性border="0"或默認為無邊框，即若不定義表格邊框屬性，表格不會顯示邊框。
例如，在HBuilder X中，下列html代碼，設定一個三行四列的表格，設置其邊框大小，其屬性為border=“1”：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><td>1
</td><td>2
</td><td>3
</td><td>4
</td></tr><tr><td>5
</td><td>6
</td><td>7
</td><td>8
</td></tr><tr><td>9
</td><td>10
</td><td>11
</td><td>12
</td></tr></table></body>
</html>
運行結果如下，我們其實可以發現有兩層邊框，最外層的是表格的邊框，而內層的是單元格的邊框：
（二）單元格屬性
通過設置table標簽的cellspacing屬性和cellpadding屬性，可以設置表格中各單元格之間的距離和表格中各單元格的內容與其邊框之間的距離，如下：
<table border="" cellspacing="" cellpadding=""><tr><th>Header
</th></tr><tr><td>Data
</td></tr>
</table>
例如，在HBuilder X中，下列html代碼，設定一個兩行三列的表格，其各單元格之間的距離為0，即cellspacing=“0”，且單元格的內容與其邊框之間的距離為25，即cellpadding=“25”：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" cellspacing="0" cellpadding="25"><tr><th>1
</th><td>星期一
</td><td>星期二
</td></tr><tr><th>2
</th><td>語文
</td><td>數學
</td></tr></table></body>
</html>
運行結果如下：
三、表格標簽的表頭
可以將表格標簽的第一行或第一列設置為表頭，通過<th></th>標簽設置。
例如，在HBuilder X中，下列html代碼，制作一個簡單的課程表，第一行tr標簽內有三個th表頭標簽，表示課程表的“星期”：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th></th><th>星期一
</th><th>星期二
</th><th>星期三
</th></tr><tr><td>1
</td><td>語文
</td><td>數學
</td><td>物理
</td></tr><tr><td>2
</td><td>英語
</td><td>化學
</td><td>數學
</td></tr><tr><td>3
</td><td>生物
</td><td>英語
</td><td>語文
</td></tr></table></body>
</html>
運行結果如下:
表頭屬性
可以對表頭添加colspan屬性和rowspan屬性，對th表頭的下面的單元格進行分列和分行。
例如，在HBuilder X中，下列html代碼，對列分為兩列，colspan=“2”：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th></th><th colspan="2">星期一
</th></tr><tr><td>上午
</td><td>1班
</td><td>2班
</td></tr><tr><td>下午
</td><td>3班
</td><td>2班
</td></tr></table></body>
</html>
運行結果如下：
例如，在HBuilder X中，下列html代碼，對行進行分為兩行，rowspan=“2”：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th rowspan="2">上午
</th><td>1班
</td></tr><tr><td>2班
</td></tr><tr><th rowspan="2">下午
</th><td>2班
</td></tr><tr><td>3班
</td></tr></table></body>
</html>
運行結果如下：
四、表格標簽的標題
可以通過在table標簽中定義<caption></caption>標簽，對表格添上標題，即在表格的上方添加上一個標題。
例如，在HBuilder X中，下列html代碼，在表格上添加一個名稱為“課程表”的表格標題：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><caption>課程表
</caption><tr><th></th><th>星期一
</th><th>星期二
</th><th>星期三
</th></tr><tr><td>1
</td><td>語文
</td><td>數學
</td><td>物理
</td></tr><tr><td>2
</td><td>英語
</td><td>化學
</td><td>數學
</td></tr><tr><td>3
</td><td>生物
</td><td>英語
</td><td>語文
</td></tr></table></body>
</html>
運行結果如下：
五、表格標簽的嵌套
可以在表格內添加圖片、文字、段落等等，也可以嵌套表格。
例如，在HBuilder X中，下列html代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1"><tr><th rowspan="2">1
</th><td><p>這是一個段落！
</p></td></tr><tr><td><p>這是一個圖片：
</p><img src="../image/酒柜.png" alt="酒柜" width="100" height="80"></td></tr><tr><th rowspan="2">2
</th><td><ol><li>星期一
</li><li>星期二
</li><li>星期三
</li></ol></td></tr><tr><td><table><tr><table border="1"><td>1
</td><td>2
</td><td>3
</td><td>4
</td></table></tr></td></tr></table></body>
</html>
運行結果如下，可以看到我們在表格中嵌套的表格，其中有段落、圖片、列表、表格：
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第二章 HTML语言 第七节 表格标签的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
