##### 4 表格標簽 表格標簽也是一種複合標簽。由：table,tr,td,th,thead,tbody組合，由行和列組合成，行和列交叉的地方就是單元格。在HTML中使用table來定義表格。網頁的表格和辦公軟體裡面的xls一樣，都是有行有列的。HTML使用tr標簽定義行，使用td標簽定義列。 ...
4 表格標簽
表格標簽也是一種複合標簽。由：table,tr,td,th,thead,tbody組合，由行和列組合成，行和列交叉的地方就是單元格。在HTML中使用table來定義表格。網頁的表格和辦公軟體裡面的xls一樣，都是有行有列的。HTML使用tr標簽定義行，使用td標簽定義列。
1、`<table>`和`</table>`表示一個表格的開始和結束。一組`<table>...</table>`表示一個表格。
2、border用於設置整個表格的邊框寬度，預設為0，表示不顯示邊框。
3、`<tr>`和`</tr>`表示表格中的一行的開始和結束。一組`<tr>...</tr>`，一個表格可以有多行。通過計算table標簽中包含多少對tr子標簽即可知道一個表格有多少行。
4、`<td>`和`</td>`表示表格中的一個單元格的開始和結束。通過計算一個tr裡面包含了多少對td自標簽即可知道一個表格有多少列，多少的單元格了。
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相關屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| width | px、% | 規定單元格的寬度。 |
| height | px、% | 規定單元格的高度。 |
| align | left、center、right | 規定單元格內容的對齊方式。 |
| valign | top、middle、bottom | 規定單元格內容的垂直對齊方式。 |
| bgcolor | rgb(x,x,x)、#xxxxxx、colorname | 規定單元格的背景顏色。 |
| background | url | 規定單元格的背景圖片。 |
| rowspan | number | 規定單元格合併的行數 |
| colspan | number | 規定單元格合併的列數 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標簽</title>
</head>
<body>
<table width="400px" border="1" align="center" cellpadding="10px" cellspacing="1px">
<tr bgcolor="#7fff00" align="center">
<th>姓名</th>
<th>年齡</th>
<th>部門</th>
<th>業績</th>
</tr>
<tr align="center">
<td>張三</td>
<td>18</td>
<td>外交部</td>
<td>87</td>
</tr>
<tr align="center">
<td>李四</td>
<td>20</td>
<td rowspan="2">銷售部</td>
<td>93</td>
</tr>
<tr align="center">
<td>王五</td>
<td>19</td>
<td>89</td>
</tr>
</table>
<table width="400px" border="1" align="center" cellpadding="10px" cellspacing="1px">
<thead bgcolor="#7fff00" align="center">
<th>姓名</th>
<th>年齡</th>
<th>部門</th>
<th>業績</th>
</thead>
<tbody>
<tr align="center">
<td>張三</td>
<td>18</td>
<td>外交部</td>
<td>87</td>
</tr>
<tr align="center">
<td>李四</td>
<td>20</td>
<td rowspan="2">銷售部</td>
<td>93</td>
</tr>
<tr align="center">
<td>王五</td>
<td>19</td>
<td>89</td>
</tr>
</tbody>
</table>
</body>
</html>
代碼效果圖如下：
本文來自博客園，作者：生而自由愛而無畏，轉載請註明原文鏈接：https://www.cnblogs.com/zczhaod/p/17638153.html
