簡單使用:
<!-- table 標籤是表格標籤 -->
<table>
<!-- 表名 -->
<caption>表 1</caption>
<tbody>
<!-- tr 是行標籤 -->
<tr>
<th>1.1</th><!-- th 是表頭標籤 -->
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td><!-- td 是單元格標籤 -->
<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。