在HTML中，表格是由<table>标签定义的，一个基本的HTML表格由行（由<tr>标签定义）和单元格（由<td>标签定义）组成。
1. 创建表格
我们需要使用<table>标签来创建一个表格，这个标签通常放在HTML文档的body部分。
<table> </table>
2. 添加行
接下来，我们可以使用<tr>标签来添加表格的行，每个<tr>标签表示表格的一行。
<table> <tr> </tr> </table>
3. 添加单元格
我们可以在每一行中使用<td>标签来添加单元格，每个<td>标签表示表格的一个单元格。
<table>
<tr>
<td>
</td>
</tr>
</table>
4. 合并单元格
有时，我们可能需要合并多个单元格以形成一个大的单元格，这可以通过在第一个和最后一个单元格中添加colspan属性来实现，该属性指定要合并的列数，同样，可以使用rowspan属性来合并行。
<table>
<tr>
<td colspan="2">这是一个跨越两列的单元格</td>
</tr>
<tr>
<td rowspan="2">这是一个跨越两行的单元格</td>
<td>这是第二行的第一个单元格</td>
</tr>
<tr>
<td>这是第三行的第一个单元格</td>
</tr>
</table>
5. 添加表头和表尾
我们可以使用<thead>和<tbody>标签来分别定义表格的表头和表体，这两个标签必须嵌套在<table>标签内，同样，我们可以使用<tfoot>标签来定义表格的表尾。
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
<tr>
<td>数据3</td>
<td>数据4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">这是表尾</td>
</tr>
</tfoot>
</table>
6. 添加样式和内容到单元格和行/列/表头/表尾中：你可以使用CSS来改变表格的外观，例如颜色、字体、边框等，你也可以在单元格中添加任何类型的内容，包括文本、图片、链接等。
<style>
table {border-collapse: collapse; width: 100%;} /* 设置表格宽度为100%，并去掉默认的边框 */
th, td {text-align: left; padding: 8px;} /* 设置单元格内容居左对齐，并添加内边距 */
th {background-color: 4CAF50; color: white;} /* 设置表头背景色为绿色，文字颜色为白色 */
</style>
<table border="1"> /* 添加边框 */
<thead style="background-color: f2f2f2;"> /* 设置表头背景色为浅灰色 */
<tr><th style="width:50%;">姓名</th><th style="width:50%;">年龄</th></tr> /* 设置表头宽度为50% */
</thead>
<tbody style="font-family: Arial, Helvetica, sans-serif;"> /* 设置表体字体 */
<tr><td style="text-align:center;">张三</td><td style="text-align:center;">25</td></tr> /* 设置单元格内容居中对齐 */
<tr><td style="text-align:center;">李四</td><td style="text-align:center;">30</td></tr> /* 设置单元格内容居中对齐 */
</tbody>
</table>
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/343752.html
微信扫一扫 