【HTML教程】HTML的table標簽|html入門知識
時間: 2025-03-28 22:33:24 瀏覽次數：9
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網絡科技-小吳在建站實操中筆記記錄，一路走來，一步步學習、總結、整理的一些資料，不用死記硬背，保存使用非常方便，實操過程中遇到了就查詢搜索一下，實踐出真章，做多了自然就熟悉了：【定義和用法】table標簽定義了 HTML 表格。一個 HTML 表格由一
常用的html標簽匯總、以及操作過程中的一些bug問題解決方法，以下龍騰飛網絡科技-小吳在建站實操中筆記記錄，一路走來，一步步學習、總結、整理的一些資料，不用死記硬背，保存使用非常方便，實操過程中遇到了就查詢搜索一下，實踐出真章，做多了自然就熟悉了：
【定義和用法】
table標簽定義了 HTML 表格。
一個 HTML 表格由一個 table元素和一個或多個 tr、th和 td元素組成：
tr元素 定義表格行 th元素 定義表格標題 td元素 定義表格單元格
HTML 表格還可以包含以下元素：
caption、colgroup、thead、tfoot、tbody
【實例】
例子 1
一個簡單的 HTML 表格，包含兩列和兩行：
<table> <tr> <th>月份</th> <th>儲蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr></table>
例子 2
如何向表格添加折疊邊框(使用 CSS)：
<html><head><style>table, th, td {
border: 1px solid black;
border-collapse: collapse;}</style></head><body><table>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>￥3400</td>
</tr>
<tr>
<td>二月</td>
<td>￥4500</td>
</tr></table></body></html>例子 3
如何右對齊表格(使用 CSS)：
<table style="float:right"> <tr> <th>月份</th> <th>儲蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr></table>
例子 4
如何居中對齊表格(使用 CSS)：
<html><head><style>table, th, td {
border: 1px solid black;}table.center {
margin-left: auto;
margin-right: auto;}</style></head><body><table class="center">
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>￥3400</td>
</tr>
<tr>
<td>二月</td>
<td>￥4500</td>
</tr></table>例子 5
如何為表格添加背景顏色(使用 CSS)：
<table style="background-color:#00FF00"> <tr> <th>月份</th> <th>儲蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr></table>
例子 6
如何向表格添加內邊距(使用 CSS)：
<html><head><style>table, th, td {
border: 1px solid black;}th, td {
padding: 10px;}</style></head><body><table>
<tr>
<th>月份</th>
<th>儲蓄</th>
</tr>
<tr>
<td>一月</td>
<td>￥3400</td>
</tr>
<tr>
<td>二月</td>
<td>￥4500</td>
</tr></table></body></html>例子 7
如何設置表格寬度(使用 CSS)：
<table style="width:400px"> <tr> <th>月份</th> <th>儲蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr></table>
例子 8
如何創建表頭：
<table> <tr> <th>姓名</th> <th>電郵</th> <th>電話</th> </tr> <tr> <td>Bill Gates</td> <td>bill.gates@example.com</td> <td>138-1234-5678</td> </tr></table>
例子 9
如何創建帶標題的表格：
<table> <caption>每月儲蓄</caption> <tr> <th>月份</th> <th>儲蓄</th> </tr> <tr> <td>一月</td> <td>￥3400</td> </tr> <tr> <td>二月</td> <td>￥4500</td> </tr></table>
例子 10
如何定義跨越多行或多列的表格單元格：
<table> <tr> <th>姓名</th> <th>電郵</th> <th colspan="2">電話</th> </tr> <tr> <td>longtengfei</td> <td>longtengfei@m.alhakaek.com</td> <td>138-1234-5678</td> <td>186-2345-6789</td> </tr></table>
【默認的 CSS 設置】
大多數瀏覽器將使用以下默認值顯示 table元素：
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;}