6.1 table 和 tr 元素
HTML 中的表格 是用來以表格格式組織數據的。創建表格時使用的主要標籤包括 <table>、<tr> 和 <td>。我們來詳細看看每一個。
<table>
標籤 <table> 是整個表格的容器。在它裡面放置表格行，每行用 <tr> 標籤來定義。
使用範例：
HTML
<table>
<!-- 表格的行和單元格將在這裡添加 -->
</table>
標籤 <tr> (table row)
標籤 <tr> 表示表格中的一行。在 <tr> 標籤內放置表格的單元格，每個單元格用 <td> 或 <th> 標籤來定義。
使用範例：
HTML
<table>
<tr>
<!-- 行中的單元格將在這裡添加 -->
</tr>
</table>
6.2 td 和 th 元素
標籤 <td> (table data)
標籤 <td> 用於定義表格行中的數據單元格。這些單元格包含表格數據，並位於用 標籤標記的行內。
使用範例：
HTML
<table>
<tr>
<td>單元格 1</td>
<td>單元格 2</td>
<td>單元格 3</td>
</tr>
</table>
標籤 <th> (table head)
標籤 <th> 用於標記表格的標題單元格。<th> 中的文本通常以粗體顯示並置中對齊。
使用範例：
HTML
<table>
<tr>
<th>標題 1</th>
<th>標題 2</th>
<th>標題 3</th>
</tr>
</table>
表格範例：
HTML
<table>
<tr>
<th>名字</th> <th>年齡</th> <th>城市</th>
</tr>
<tr>
<td>伊萬</td> <td>30</td> <td>多倫多</td>
</tr>
<tr>
<td>瑪麗亞</td> <td>25</td> <td>法蘭克福</td>
</tr>
<tr>
<td>妮娜</td> <td>35</td> <td>巴黎</td>
</tr>
</table>
6.3 表格樣式
表格必須使用 CSS 進行樣式化——這大大提高了數據的視覺效果和可讀性。
例如，你想為每個單元格添加邊框：這是值得贊揚的，但由於每個單元格都有邊框，現在每兩個單元格之間都有雙重邊框——每個單元格都有一個。🤦♂️
如果你想讓邊框看起來像你所希望的那樣，需要用 CSS 合併相鄰的邊框。為此，有一個特殊的屬性——border-collapse。
這是我們表格的良好樣式化範例：
CSS
table {
width: 50%; /* 設置表格的寬度 */
border-collapse: collapse; /* 消除單元格之間的雙重邊框 */
}
th, td {
border: 1px solid black; /* 設置單元格的邊框 */
padding: 8px; /* 在單元格內添加內邊距 */
text-align: left; /* 將文本對齊到左邊 */
}
th {
background-color: #f2f2f2; /* 設置標題的背景顏色 */
}
在這裡我們看到：
- 每個單元格都有一個1像素厚的黑色邊框
- 消除了單元格之間的雙重邊框
- 每個單元格有內邊距，以免文本緊貼邊框
- 標題單元格有獨特的背景顏色
漂亮吧！
GO TO FULL VERSION