HTML 表格
HTML 表格允许 web 开发人员将数据排列成行和列。
实例
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
HTML 表格
表格由 <table> 标签来定义。
每个表格均有若干行，由 <tr> 标签定义
每个表头由 <th> 标签定义。
每行被分割为若干单元格，由 <td> 标签定义。
实例
一个简单的 HTML 表格:
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
亲自试一试 »
注释: <td> 元素是表的数据容器。
它可以包含各种 HTML 元素；文本、图像、列表、其他表等。
HTML 表格 - 边框
要向表中添加边框，请使用 CSS border 属性:
记住为表格和表格单元格定义边框。
HTML 表格 - 边框折叠
设置表格边框是折叠为单一边框还是分开的，使用 CSS border-collapse 属性:
HTML 表格 - 填充
填充指定单元格内容与其边框之间的间距。
如果不指定填充，则将显示不带填充的表格单元格。
要设置填充，请使用 CSS padding 属性:
HTML 表格 - 左对齐标题
默认情况下，表格标题为粗体且居中。
要左对齐表格标题，请使用 CSS text-align 属性:
HTML 表格 - 边框间距
边框间距指定单元格之间的间距。
要设置表格的边框间距，请使用 CSS border-spacing 属性:
注释: 如果表格具有折叠边框，则 border-spacing 无效。
HTML 表格 - 跨多列的单元格
要使单元格跨越多个列，请使用 colspan 属性:
实例
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
亲自试一试 »
HTML 表格 - 跨多行的单元格
要使单元格跨多行，请使用 rowspan 属性:
实例
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
亲自试一试 »
HTML 表格 - 标题
要向表中添加标题，请使用 <caption> 标签:
实例
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
亲自试一试 »
注释: <caption> 标签必须紧跟在 <table> 之后插入。
表格的特殊样式
要为一个特定表定义特殊样式，请向表中添加 id 属性:
实例
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
并添加更多样式:
#t01 tr:nth-child(even) {
background-color: #eee;
}
#t01 tr:nth-child(odd) {
background-color: #fff;
}
#t01 th {
color: white;
background-color: black;
}
亲自试一试 »
本章小结
- 使用 HTML
<table>元素定义表 - 使用 HTML
<tr>元素定义表行 - 使用 HTML
<td>元素定义表数据 - 使用 HTML
<th>元素定义表格标题 - 使用 HTML
<caption>元素定义表格标题 - 使用 CSS
border属性定义边框 - 使用 CSS
border-collapse属性折叠单元格边框 - 使用 CSS
padding属性向单元格添加填充 - 使用 CSS
text-align属性对齐单元格文本 - 使用 CSS
border-spacing属性设置单元格之间的间距 - 使用
colspan属性使单元格跨多个列 - 使用
rowspan属性使单元格跨多行 - 使用
id属性唯一地定义一个表
HTML 实验
HTML Table 标签
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <th> | 定义表格的表头 |
| <tr> | 定义表格的行 |
| <td> | 定义表格单元 |
| <caption> | 定义表格标题 |
| <colgroup> | 定义表格列的组 |
| <col> | 定义用于表格列的属性 |
| <thead> | 定义表格的页眉 |
| <tbody> | 定义表格的主体 |
| <tfoot> | 定义表格的页脚 |
如需所有可用的 HTML 标签的完整列表，请访问 HTML 标签参考手册。
