最新的Web开发教程

HTML表格

❮上一页 下一页章❯

HTML表范例

数 名字 姓 点
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

定义HTML表格

例

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
试一试»

为例进行了说明：

表与所定义的<table>标记。

表分为与表中的行 <tr>标记。

表中的行被划分为与所述表中的数据 <td>标记。

表的行也可以分成表标题与<th>标记。

表中的数据<td>是表中的数据容器。
它们可以包含各种HTML元素，如文字，图片，列表，其他表等。

一个HTML表格与边框属性

如果不为表指定的边框，将无边框显示。

边框可以使用添加border属性：

例

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
试一试»

该border属性是其出路HTML标准的！ 这是更好地使用CSS。

要添加边框，使用CSS border属性：

例

table, th, td {
    border: 1px solid black;
}
试一试»

记住要定义边框的表格和表格单元格两者。

一个HTML表格与边框倒塌

如果你想在边界折叠成一个边框，添加CSS border-collapse ：

例

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
试一试»

一个HTML表格与单元格填充

单元格填充指定单元含量和其边界之间的空间。

如果没有指定填充，表格单元格将不填充显示。

要设置填充，使用CSS padding属性：

例

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
试一试»

HTML表格标题

表标题与所定义的<th>标记。

默认情况下，所有的主流浏览器显示的表格标题为粗体并居中：

例

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
试一试»

左对齐表格标题中，使用CSS text-align属性：

例

th {
    text-align: left;
}
试一试»

一个HTML表格与边框间距

边界间隔指定单元之间的空间中。

要设置边框间距为一个表，使用CSS border-spacing属性：

例

table {
    border-spacing: 5px;
}
试一试»

如果表已经倒塌边框，边框间距有没有效果。

表格单元格跨越多列

为了使细胞跨越多个列，使用colspan属性：

例

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
试一试»

表格单元格跨越多行

为了使细胞跨度多行，使用rowspan属性：

例

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</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>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

现在，您可以定义此表独特的风格：

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}
试一试»

并添加更多的样式：

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#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属性来唯一确定一个表

测试自己与练习！

练习1» 练习2» 练习3» 练习4» 练习5» 练习6»

HTML表格标签

标签 描述
<table> 定义表格
<th> 限定了头单元格表中的
<tr> 定义行的表
<td> 定义单元格在一个表
<caption> 定义表格标题
<colgroup> 指定表中的一组一个或多个列的格式化
<col> 指定一个内的每个列的列属性<colgroup>元件
<thead> 组在一个表中的标题内容
<tbody> 组在表中的主体内容
<tfoot> 组表中的页脚内容

❮上一页 下一页章❯