HTML 表格的簡單使用

簡單使用

<!-- 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

ref:12

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章