<table>, <tr>, 和 <td> 是HTML中用于创建表格的标签。
-
<table>元素：<table>元素用于定义HTML表格。- 表格是由行和列组成的二维数据结构。
<table> <!-- 表格内容将在这里添加 --> </table> -
<tr>元素：<tr>元素用于定义表格中的行（table row）。- 行包含一个或多个单元格元素
<td>或<th>。
<table> <tr> <!-- 单元格将在这里添加 --> </tr> </table> -
<td>元素：<td>元素用于定义表格中的数据单元格（table data）。- 在每一行中，可以包含一个或多个
<td>元素，它们表示该行中的不同数据项。
<table> <tr> <td>单元格1</td> <td>单元格2</td> <!-- 可以有更多的单元格 --> </tr> </table>
完整的例子可能如下所示：
<table>
<tr> <!--第1行-->
<td>科比</td> <!--第1个-->
<td>25</td> <!--第2个-->
<td>男</td> <!--第3个-->
</tr>
<tr> <!--第2行-->
<td>乔丹</td> <!--第1个-->
<td>30</td> <!--第2个-->
<td>男</td> <!--第3个-->
</tr>
</table>
在实际使用中，你可以使用 <th> 元素表头单元格（table header cell），它类似于 <td> 用法，提供更强调的样式。
<th>这个元素通常用于定义表格的标题行或列，表示表格中的标题性信息。浏览器通常会对<th> 中的文本进行加粗和居中等样式，以使表头在视觉上与数据单元格区分开。
表头单元格的使用有助于提高表格的可读性（accessibility），并为屏幕阅读器等辅助技术提供更好的信息。表头单元格的语义是表格中重要的一部分，因为它描述了下面数据单元格中的内容。
例如：
<table>
<tr> <!--第1行-->
<td>姓名</td> <!--第1个-->
<td>年龄</td> <!--第2个-->
<td>性别</td> <!--第3个-->
</tr>
<tr> <!--第2行-->
<td>科比</td> <!--第1个-->
<td>25</td> <!--第2个-->
<td>男</td> <!--第3个-->
</tr>
<tr> <!--第3行-->
<td>乔丹</td> <!--第1个-->
<td>30</td> <!--第2个-->
<td>男</td> <!--第3个-->
</tr>
</table>这样的表格将有一个表头行，以及包含姓名和年龄信息的数据行。表头单元格默认加粗并居中，以区分其它数据单元格。
想给表格加边框，可以使用<table border="1">
<table border="1">
</table>
或者使用最新的css架构写法<table style="border: 1px solid blue">
<table style="border: 1px solid blue">
</table>
这种CSS写法支持全局各种自定义,比如自定义th、td 等
<body>
<style>
table {
border-collapse: collapse; /*相邻的边框会合并在一起，形成一个更加紧凑的外观。这也意味着单元格之间没有额外的间隙，而是共享同一边框*/
}
th, td {
border: 1px solid #dddddd; /*<th>和<td>元素都设置了1像素宽的实线边框，颜色是 #dddddd（浅灰色）*/
text-align: left; /*文本左对齐*/
padding: 8px; /*单元格内容与边框之间的内边距，使内容与边框之间有8像素的空白*/
}
th {
background-color: #f2f2f2;
color: red; /* 设置表头文字颜色为蓝色 */
}
td {
color: blue; /* 设置数据单元格文字颜色为红色 */
}
</style>
<table>
<tr> <!--第1行-->
<td>姓名</td> <!--第1个-->
<td>年龄</td> <!--第2个-->
<td>性别</td> <!--第3个-->
</tr>
<tr> <!--第2行-->
<td>科比</td> <!--第1个-->
<td>25</td> <!--第2个-->
<td>男</td> <!--第3个-->
</tr>
<tr> <!--第3行-->
<td>乔丹</td> <!--第1个-->
<td>30</td> <!--第2个-->
<td>男</td> <!--第3个-->
</tr>
</table>
</body>