HTML 表格的简单使用

简单使用：

<!-- table 标签是表格标签 -->
<table>
	<!-- 表名 -->
	<caption>表 1</caption>
	<tbody>
		<!-- tr 是行标签（table row） -->
		<tr>
			<th>1.1</th><!-- th 是表头标签（table header cell） -->
			<th>1.2</th>
			<th>1.3</th>
		</tr>
		<tr>
			<td>2.1</td><!-- td 是单元格标签（table data cell） -->
			<td>2.2</td>
			<td>2.3</td>
		</tr>
		<tr>
			<td>3.1</td>
			<td>3.2</td>
			<td>3.3</td>
		</tr>
	</tbody>
</table>

table {
	/* 表格居中 */
	margin: auto;
	/* 表格边框 */
	border: 1px solid black;
	/* 宽 */
	width: 300px;
	/* 高 */
	height: 300px;
	/* 去除单元格间隔 */
	border-collapse: collapse;
}
 
th{
	/* 表头边框 */
	border: 1px solid black;
}
 
td{
	/* 单元格边框 */
	border: 1px solid black;
	/* 文字水平居中 */
	text-align: center;
	/* 文字垂直居中 */
	vertical-align: middle;
}
 
caption {
	/* 表名方向 */
	caption-side: bottom;
}

在单元格上使用 rowspan 设置跨几行：Demo1。

在单元格上使用 colspan 设置跨几列：Demo2。

ref：1、2。