HTML 表格的簡單使用
阿新 • • 發佈:2022-04-19
簡單使用:
<!-- 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。