文章目录
HTML 表格
HTML 表格允许 Web 开发人员将数据排列成行和列。
示例
| 公司 | 联系人 | 国家/地区 |
|---|---|---|
| Alfreds | Futterkiste | Maria Anders 德国 |
| Centro comercial Moctezuma | Francisco Chang | 墨西哥 |
| Ernst Handel | Roland Mendel | 奥地利 |
| Island Trading | Helen Bennett | 英国 |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | 加拿大 |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | 意大利 |
定义 HTML 表格
HTML 中的表格由行和列内的表格单元格组成。
示例
一个简单的 HTML 表格：
<table>
<tr>
<th>公司</th>
<th>联系人</th>
<th>国家/地区</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>德国</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>墨西哥</td>
</tr>
</table>
表格单元格
每个表格单元格由 <td> 和 </td> 标签定义。
td 代表表格数据。
<td> 和 </td> 之间的所有内容都是表格单元格的内容。
示例
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
注意：表格单元格可以包含各种 HTML 元素：文本、图像、列表、链接、其他表格等。
表格行
每个表格行都以 <tr> 开头，以 </tr> 标签结尾。
tr 代表表格行。
示例
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
表格中可以包含任意多的行；只需确保每行的单元格数量相同即可。
注意：有时一行中的单元格可能比另一行中的单元格少或多。
表格标题
标题单元格请使用 <th> 标签而不是 <td> 标签：
th 代表表格标题。
示例
让第一行成为表头单元格：
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
默认情况下，<th>元素中的文本为粗体且居中，但可以用 CSS 进行更改。
HTML 表格边框
HTML 表格可以具有不同样式和形状的边框。
要添加边框，请在 table、th 和 td 元素上使用 CSS border 属性：
示例
table, th, td {
border: 1px solid black;
}
折叠表格边框
要避免出现如上例中的双边框，请将 CSS border-collapse 属性设置为 collapse。
这将使边框折叠为单个边框：
示例
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
样式化表格边框
如果您设置每个单元格的背景颜色，并将边框设为白色（与文档背景相同），则会给人一种不可见边框的印象：
示例
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
圆形表格边框
使用 border-radius 属性，边框将变成圆角：
示例
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
通过在 css 选择器中省略 table 来跳过表格周围的边框：
示例
th, td {
border: 1px solid black;
border-radius: 10px;
}
虚线表格边框
使用 border-style 属性，您可以设置边框的外观。
允许使用以下值：
dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden
示例
th, td {
border-style: dotted;
}
边框颜色
使用 border-color 属性，您可以设置边框的颜色。
示例
th, td {
border-color: #96D4D4;
}
HTML 表格大小
HTML 表格的每列、每行或整个表格可以有不同的大小。
使用带有宽度或高度属性的样式属性来指定表格、行或列的大小。
表格的宽度
要设置表格的宽度，请将 style 属性添加到 <table> 元素：
示例
将表格的宽度设置为 100%：
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
注意：使用百分比作为宽度的尺寸单位意味着此元素与其父元素（在本例中为 <body> 元素）相比有多宽。
HTML 表格列宽
要设置特定列的大小，请在 <th> 或 <td> 元素上添加样式属性：
示例
将第一列的宽度设置为 70%：
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML 表格行高
要设置特定行的高度，请在表格行元素上添加样式属性：
示例
将第二行的高度设置为 200像素：
<table style="width:100%">
<tr>
<th>名字</th>
<th>姓氏</th>
<th>年龄</th>
</tr>
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
总结
本文介绍了的html表格的使用，如有问题欢迎私信和评论