标签：
表格的作用是显示二维数据，在HTML5中不再允许用表格控制页面内容的布局，而是采用新增的CSS表格特性（这里不涉及CSS，将在后面介绍）。下面主要介绍用于制作表格的HTML元素。
<table> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>上面定义了一个两行、三列的表格，使用表格的好处是：浏览器会保证列的宽度满足最宽的内容，让行的高度满足最高的单元格。
<table border="1"> <tr> <td>Apples</td> <td>Green</td> <td>Medium</td> </tr> <tr> <td>Oranges</td> <td>Orange</td> <td>Large</td> </tr> </table>浏览器的默认边框不太美观，通常还需要用CSS来为为各种元素重设边框样式。
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>下面是一个单元格跨多行的一个例子：<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
</table><table> <tr> <th>Rank</th><th>Name</th> <th>Color</th><th>Size</th> </tr> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </table>可以在一行中混合使用th和td。
<table border="1" width="100%">
<tr>
<th id="name">Name</th>
<th id="Email">Email</th>
<th id="Phone">Phone</th>
<th id="Address">Address</th>
</tr>
<tr>
<td headers="name">George Bush</td>
<td headers="Email">someone@example.com</td>
<td headers="Phone">+789451236</td>
<td headers="Address">Fifth Avenue New York,USA</td>
</tr>
</table><table border="1">
<tr>
<th colspan="2">Company in USA</th>
</tr>
<tr>
<th>Name</th><th>Addr</th>
</tr>
<tr>
<td>Apple, Inc.</td>
<td>1 Infinite Loop Cupertino, CA 95014</td>
</tr>
<tr>
<td>Google, Inc.</td>
<td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
</tr>
</table><table> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody> </table>
<table> <caption>Results of the 2011 Fruit Survey</caption> <thead> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </thead> <tfoot> <tr> <th>Rank</th><th>Name</th><th>Color</th><th>Size</th> </tr> </tfoot> <tbody> <tr> <th>Favorite:</th> <td>Apples</td><td>Green</td><td>Medium</td> </tr> <tr> <th>2nd Favorite:</th> <td>Oranges</td><td>Orange</td><td>Large</td> </tr> <tr> <th>3rd Favorite:</th> <td>Pomegranate</td><td>A kind of greeny-red</td> <td>Varies from medium to large</td> </tr> </tbody> </table>一个表格只能包含一个caption元素，无需是表格的第一个元素，但始终显示在表格上方。
<html>
<head>
<style>
#colgroup1{background-color: red}
#colgroup2{background-color: green; font-size=small}
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup id="colgroup1" span="2" ></colgroup>
<colgroup id="colgroup2"></colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>上面的例子中指定了两个列的组，第一个包含前2列，第二个包含剩下的1列，并为不同的分组指定了不同的样式。colgroup的span属性指定扩展几列，如果不指定span属性，也可以指定一个或多个col元素，下面的例子达到了和上面例子一样的效果。<html>
<head>
<style>
#colgroup1{background-color: red}
#col3{background-color: green; font-size=small}
</style>
</head>
<body>
<table width="100%" border="1">
<colgroup id="colgroup1">
<col id="col1And2" span="2"/>
<col id="col3"/>
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>2489604</td>
<td>My first CSS</td>
<td>$47</td>
</tr>
</table>
</body>
</html>标签：
原文地址：http://blog.csdn.net/tomato__/article/details/50600795
