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