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。