HTML——table表格標籤
阿新 • • 發佈：2021-09-30
一、table表格的完整寫法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <!-- 一個table表格 --> <table> <!-- 表頭部分thead --> <thead> <!-- 表頭行tr --> <tr> <!-- 表頭的列th --> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <!-- 表格內容部分tbody --> <tbody> <!-- 表格內容的第一行tr --> <tr> <!-- 列td --> <td></td> <td></td> <td></td> <td></td> </tr> <!-- 表格內容的第二行tr --> <tr> <!-- 列td --> <td></td> <td></td> <td></td> <td></td> </tr> <!-- 表格內容的第三行tr --> <tr> <!-- 列td --> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </body> </html>
二、表格標籤的簡寫方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> </head> <body> <!-- 一個table表格 --> <table> <!-- 表頭部分tr th --> <tr> <th></th> <th></th> <th></th> </tr> <!-- 內容部分tr td --> <tr> <td></td> <td></td> <td></td> </tr> <!-- 內容部分tr td --> <tr> <td></td> <td></td> <td></td> </tr> <!-- 內容部分tr td --> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
三、table的屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| width | px、% | 規定表格的寬度。 |
| height | px、% | 規定表格的高度。 |
| align | left、center、right | 規定表格相對周圍元素的對齊方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 規定表格的背景顏色。 |
| background | url | 規定表格的背景圖片。 |
| border | px | 規定表格邊框的寬度。 |
| cellpadding | px、% | 規定單元格邊框與其內容之間的空白。 |
| cellspacing | px、% | 規定單元格之間的空隙。 |
四、td的屬性
表格中除了行元素以外，還有單元格，單元格的屬性和行的屬性類似。td和th都是單元格。
| 屬性 | 值 | 描述 |
|---|---|---|
| height | px、% | 規定單元格的高度。 |
| width | px、% | 規定單元格的寬度。 |
| align | left、center、right | 規定單元格內容的對齊方式。 |
| valign | top、middle、bottom | 規定單元格內容的垂直對齊方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 規定單元格的背景顏色。 |
| background | url | 規定單元格的背景圖片。 |
| rowspan | number | 規定單元格合併的行數 |
| colspan | number | 規定單元格合併的列數 |
—— rowspan：表示跨行合併。在 HTML 程式碼中，允許我們使用 rowspan 特性來表明單元格所要跨越的行數。
—— colspan：表示跨列合併。同樣的，在 HTML 中，允許我們使用 colspan 特性來表明單元格所要跨越的列數。
具體格式如下：
<td rowspan="n">單元格內容</td> <td colspan="n">單元格內容</td>
n 是一個整數，表示要合併的行數或者列數。
注意：不論是 rowspan 還是 colspan 都是 <td> 標籤的屬性。
例子：將表格第 1 列的第 3、4 行單元格合併（跨行合併），將第 4 行的第 2、3 列合併（跨列合併）
<table border="1" style="border-collapse: collapse;">
<tr>
<th>名稱</th>
<th>官網</th>
<th>性質</th>
</tr>
<tr>
<td>C語言中文網</td>
<td>http://c.biancheng.net/</td>
<td>教育</td>
</tr>
<tr>
<td rowspan="2">百度</td>
<td>http://www.baidu.com/</td>
<td>搜尋</td>
</tr>
<tr>
<td colspan="2">http://www.dangdang.com/</td>
</tr>
</table>
合併後的效果：