Python——Html（表格）-526互联

<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>