在HTML中插入表格主要使用<table>, <tr>, <td>和<th>等标签，下面将详细介绍如何在HTML文档中创建和格式化表格。
基础表格结构
一个基本的HTML表格由<table>元素定义，其中包含了若干的<tr>（table row，表行）元素，每个<tr>元素代表表格中的一行，而每行中可以包含多个<td>（table data，表单元格）或<th>（table header，表头单元格）元素，这些元素用来存放表格的数据和标题。
<table>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
添加表头
表头使用<th>标签表示，通常用于定义列标题，并且默认加粗显示居中对齐。
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
表格属性
可以通过给<table>标签添加一些属性来设置表格的外观。
border：设置表格边框的宽度，单位是像素（px）。
cellspacing：设置表格中相邻单元格之间的空间大小，单位是像素（px）。
cellpadding：设置表格中单元格内容与其边界之间的内边距，单位是像素（px）。
width：设置表格的宽度，可以使用像素或者百分比来定义。
height：设置表格的高度，可以使用像素或者百分比来定义。
align：设置表格的水平对齐方式，可选值有left、right和center。
bgcolor：设置表格的背景颜色，使用十六进制颜色代码。
<table border="1" cellspacing="0" cellpadding="5" width="50%" align="center" bgcolor="FFFFCC"> ... </table>
跨行与跨列
有时我们需要让某个单元格跨越多行或多列，这时可以使用rowspan和colspan属性。
rowspan：定义单元格应该横跨多少行。
colspan：定义单元格应该横跨多少列。
<table>
<tr>
<th rowspan="2">Header 1</th> <!-Header spans 2 rows -->
<th>Header 2</th>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
<tr>
<td colspan="2">Cell spans 2 columns</td> <!-Cell spans 2 columns -->
</tr>
</table>
表格样式
除了使用属性直接控制表格的样式外，还可以通过CSS来更灵活地定义表格的外观，你可以将CSS规则嵌入到HTML文档的<style>标签中，或者链接到一个外部的CSS文件。
<style>
table {
border-collapse: collapse; /* 合并边框 */
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: f2f2f2;
}
</style>
相关问题与解答
Q1: HTML表格中如何去掉单元格之间的间隙？
A1: 可以通过设置border-collapse属性为collapse来合并单元格之间的边框，从而去除间隙，这通常应用在<table>元素上。
Q2: 怎样使HTML表格的内容居中？
A2: 可以使用CSS的text-align: center;属性来使表格内容居中对齐，如果需要垂直居中，则可能需要额外的CSS技巧，如设置line-height或者使用Flexbox布局。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/288061.html
微信扫一扫 