【HTML教程】HTML的table标签|html入门知识
时间: 2025-03-28 22:33:24 浏览次数：22
常用的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@gzlongtengfei.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;}