6、HTML 表格

标签	描述
<table>	定义表格
<th>	定义表格的表头
<tr>	定义表格的行
<td>	定义表格单元
<caption>	定义表格标题 ( 在表格上方建立标题文本，必须建立在<table>标签后面 )
<colgroup>	定义表格列的组 ( 用于对表格中的列进行组合，以便对其进行格式化 。 只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 <colgroup> 标签。)
<col>	定义用于表格列的属性 ( <col> 标签规定了 <colgroup> 元素内部的每一列的列属性。 通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。 )
<thead>	定义表格的页眉
<tbody>	定义表格的主体
<tfoot>	定义表格的页脚

 

HTML 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）

td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

一个简单表格的实例：

<table border="1">
　　<tr>
　　　　<td>row 1, cell 1</td>
　　　　<td>row 1, cell 2</td>
　　</tr>
　　<tr>
　　　　<td>row 2, cell 1</td>
　  　　<td>row 2, cell 2</td>
　　</tr>
</table>

运行结果如下：

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

HTML 表格表头使用 <th> 标签进行定义

大多数浏览器会把表头显示为粗体居中的文本

 

HTML 表格的页眉、主体、页脚：

<table border="1">
　　<thead>
　　　　<tr>
　　　　　　<th>Month</th>
　　　　　　<th>Savings</th>
　　　　</tr>
　　</thead>
　　<tfoot>
　　　　<tr>
　　　　　　<td>Sum</td>
　　　　　　<td>$180</td>
　　　　</tr>
　　</tfoot>
　　<tbody>
　　　　<tr>
　　　　　　<td>January</td>
　　　　　　<td>$100</td>
　　　　</tr>
　　　　<tr>
　　　　　　<td>February</td>
　　　　<td>$80</td>
　　　　</tr>
　　</tbody>
</table>

运行结果如下：

 

 

Month	Savings
Sum	$180
January	$100
February	$80

提示: thead, tbody, 和 tfoot 元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

 

 

 

表格标签属性：

 

表格标签：　　<table></table>

1、border（边框）

2、align（水平位置：left、center、right）

3、cellpadding（与单元格边框的最短距离）

4、bgcolor（背景颜色）

5、background（背景图片，背景图片比颜色更优先）

6、cellspacing（边框厚度）

7、valign（垂直位置：top  上、middle  中、bottom  下）

 

行 “<tr>” 和 单元格 “<td>” 的合并方法：

1、rowspan（向下合并单元格），选择起始单元格，选择向下合并的单元格数量

2、colspan（向右合并单元格），选择起始单元格，选择向右合并的单元格数量

3、colspan 与 rowspan 组合合并：　　< td colspan = "2"; rowspan = "3"; >　　　　（合并的单元格 2 * 3）