Table标签

1 <table>标签简介

一个简单的 HTML 表格，包含两行两列：

<table border="1">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

效果图：

1.1 定义和用法

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

1.2 可选的属性

align
1. 值：left、center、right
2. 描述：不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor
1. 值：rgb(x,x,x)、#xxxxxx、colorname
2. 描述：不赞成使用。请使用样式代替。规定表格的背景颜色。
border
1. 值：pixels
2. 描述：规定表格边框的宽度。
cellpadding
1. 值：pixels、%
2. 描述：规定单元边沿与其内容之间的空白。
cellspacing
1. 值：pixels、%
2. 描述：规定单元格之间的空白。
frame
1. 值：void、above、below、hsides、lhs、rhs、vsides、box、border
2. 描述：规定外侧边框的哪个部分是可见的。
rules
1. 值：none、groups、rows、cols、all
2. 描述：规定内侧边框的哪个部分是可见的。
summary
1. 值：text
2. 描述：规定表格的摘要。
width
1. 值：pixels、%
2. 描述：规定表格的宽度。

2 <table> 标签的 align 属性

<html>
<body>

<table border="1" align="left">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

<p>align 属性可以使文本围绕在表格周围。</p>

<p>在 HTML 4.01 中，不赞成使用 body 元素的 align 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 align 属性。</p>

</body>
</html>

效果图：

2.1 定义和用法

align 属性规定表格相对于周围元素的对齐方式。
通常来说，HTML 表格的前后都会出现折行。通过运用 align 属性，可实现其他 HTML 元素围绕表格的效果。

2.2 兼容性注释

在 HTML 4.01 中，不赞成使用 body 元素的 align 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 align 属性。
请使用 CSS 代替。
CSS 语法：<table style=”float:left”>

2.3 语法和属性值

<table align="value">

left：左对齐表格。
right：右对齐表格。
center：居中对齐表格。

3 <table> 标签的 bgcolor 属性

<html>
<body>

<table border="1" bgcolor="#ccc">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

<p>在 HTML 4.01 中，不赞成使用 body 元素的 bgcolor 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 bgcolor 属性。</p>

</body>
</html>

效果图：

3.1 定义和用法

bgcolor 属性规定规定表格的背景颜色。

3.2 兼容性注释

在 HTML 4.01 中，不赞成使用 body 元素的 bgcolor 属性；在 XHTML 1.0 Strict DTD 中，不支持 body 元素的 bgcolor 属
请使用 CSS 代替。
CSS 语法：<table style=”background-color:red”>

3.3 语法和属性值

<body bgcolor="value">

color_name：规定颜色值为颜色名称的背景颜色（比如 “red”）。
hex_number：规定颜色值为十六进制值的背景颜色（比如 “#ff0000”）。
rgb_number：规定颜色值为 rgb 代码的背景颜色（比如 “rgb(255,0,0)”）。

4 <table> 标签的 border 属性

<html>
<body>

<table border="5">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

效果图：

4.1 定义和用法

border 属性规定规定围绕表格的边框的宽度。
border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。
提示：设置 border=”0”，可以显示没有边框的表格。
从实用角度出发，最好不要规定边框，而是使用 CSS 来添加边框样式和颜色。

4.2 语法和属性值

<body border="value">

pixels：规定表格边框宽度。

5 <table> 标签的 cellpadding 属性

<html>

<body>

<h4>没有 cellpadding：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellpadding：</h4>
<table border="1" 
cellpadding="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

效果图：

5.1 定义和用法

cellpadding 属性规定单元边沿与其内容之间的空白。
注释：请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。
从实用角度出发，最好不要规定 cellpadding，而是使用 CSS 来添加内边距。

5.2 语法和属性值

<body cellpadding="value">

pixels：规定单元边沿与其内容之间的空白。

6 <table> 标签的 cellspacing 属性

<html>

<body>

<h4>没有 cellspacing：</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>带有 cellspacing：</h4>
<table border="1" 
cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

</body>
</html>

效果图：

6.1 定义和用法

cellspacing 属性规定单元格之间的空间。
注释：请勿将该属性与 cellpadding 属性相混淆，cellpadding 属性规定的是单元边沿与单元内容之间的空间。

6.2 语法和属性值

<body cellspacing="value">

pixels：规定单元之间的空间。

7 <table> 标签的 frame 属性

<html>
<body>

<p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>

<p>Table with frame="void":</p>
<table border="1" frame="void">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="above":</p>
<table border="1" frame="above">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="below":</p>
<table border="1" frame="below">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="hsides":</p>
<table border="1" frame="hsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="vsides":</p>
<table border="1" frame="vsides">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="lhs":</p>
<table border="1" frame="lhs">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="rhs":</p>
<table border="1" frame="rhs">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="box":</p>
<table border="1" frame="box">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with frame="border":</p>
<table border="1" frame="border">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

效果图：

7.1 定义和用法

frame 属性规定外侧边框的哪个部分是可见的。
从实用角度出发，最好不要规定 frame，而是使用 CSS 来添加边框样式。

7.2 浏览器支持

除了 Internet Explorer，其他浏览器都支持 frame 属性。
注释：Internet Explorer 以不正确的方式来显示该属性。IE 同时会显示表格内单元格的边框（而不仅仅是外侧边框）。
注释：Safari 2.0 或更早的版本不支持该属性。

7.3 语法和属性值

<body frame="value">

void：不显示外侧边框。
above：显示上部的外侧边框。
below：显示下部的外侧边框。
hsides：显示上部和下部的外侧边框。
vsides：显示左边和右边的外侧边框。
lhs：显示左边的外侧边框。
rhs：显示右边的外侧边框。
box：在所有四个边上显示外侧边框。
border：在所有四个边上显示外侧边框。

8 <table> 标签的 rules 属性

<html>
<body>

<p><b>注释：</b>rules 属性无法在 Internet Explorer、Chrome 或者 Safari 中正确地显示。</p>

<p>Table with rules="none":</p>
<table border="1" rules="none">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with rules="groups":</p>
<table border="1" rules="groups">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with rules="rows":</p>
<table border="1" rules="rows">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with rules="cols":</p>
<table border="1" rules="cols">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with rules="all":</p>
<table border="1" rules="all">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>

效果图：

8.1 定义和用法

rules 属性规定内侧边框的哪个部分是可见的。
从实用角度出发，最好不要规定 rules，而是使用 CSS 来添加边框样式。

8.2 浏览器支持

rules 属性在 Firefox 和 Opera 中可以正确地显示。
Internet Explorer、Chrome 以及 Safari 3 对该属性的显示并不正确。
1. IE: 除了内侧边框，还会添加 4 边的外侧边框。
2. Chrome 和 Safari：除了内侧边框，还会添加 affected 外侧边框。
注释：Safari 2.0 和更早的版本不支持该属性。

8.3 语法和属性值

<body rules="value">

none：没有线条。
groups：位于行组和列组之间的线条。
rows：位于行之间的线条。
cols：位于列之间的线条。
all：位于行和列之间的线条。

9 <table> 标签的 summary 属性

<html>
<body>

<table border="1" summary="Monthly savings for the Flintstones family">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

效果图：

9.1 定义和用法

summary 属性规定表格内容的摘要。
summary 属性不会对普通浏览器中产生任何视觉变化。
屏幕阅读器可以利用该属性。

9.2 浏览器支持

由于不会在普通浏览器中产生任何视觉效果，很难判断浏览器是否支持 summary 属性。

9.3 语法和属性值

<body summary="value">

text：表格内容的摘要。

10 <table> 标签的 width 属性

<html>
<body>

<table border="1" width="400">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

</body>
</html>

效果图：

10.1 定义和用法

width 属性规定表格的宽度。
如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。
从实用角度出发，最好不要规定宽度，而是使用 CSS 来应用宽度。

10.2 语法和属性值

<body width="value">

pixels：设置以像素计的宽度（例子：width=”50”）。
%：设置以包含元素的百分比计的宽度（例子：width=”50%”）。