HTML超文本标记语言（三）——表格标签及其属性

一、表格及其组成元素的标签

 1 <html>
 2 <body>
 3 <h4>这是一个简单的表格：</h4>
 4 <table border="1">
 5    <caption>这是表格标题</caption>
 6    <tr>
 7        <th>表头1</th>
 8        <th>表头2</th>
 9        <th>表头3</th>
10    </tr>
11    <tr>
12        <td>row1,cell1</td>
13        <td>row1,cell2</td>
14        <td>row1,cell3</td>
15    </tr> 
16    <tr>
17        <td>row2,cell1</td>
18        <td>row2,cell2</td>
19        <td>row2,cell3</td>
20    </tr>
21    <tr>
22        <td>row3,cell1</td>
23        <td>row3,cell2</td>
24        <td>row3,cell3</td>
25    </tr>
26 </table>
27 </body>
28 </html>

a sample of table

上述代码的效果图如下

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

表格标题：<caption></caption>

表格的表头：<th></th>

表格行： <tr></tr>

行内单元格：<td></td>

二、表格及其属性

1、border边框属性

如果不定义边框属性，表格将不显示边框。使用边框属性来显示一个有边框的表格

1 <table border="1">
2 <tr>
3 <td>Row 1, cell 1</td>
4 <td>Row 1, cell 2</td>
5 </tr>
6 </table>

border边框属性

2、thead、tbody和tfoot属性

thead定义表格页眉；tbody定义表格主体；tfoot定义表格页脚。配合style属性，可以为表格增加样式。

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 thead {color:green}
 5 tbody {color:blue;height:50px}
 6 tfoot {color:red}
 7 </style>
 8 </head>
 9 <body>
10 
11 <table border="1">
12   <thead>
13     <tr>
14       <th>Month</th>
15       <th>Savings</th>
16     </tr>
17   </thead>
18   <tbody>
19     <tr>
20       <td>January</td>
21       <td>$100</td>
22     </tr>
23     <tr>
24       <td>February</td>
25       <td>$80</td>
26     </tr>
27   </tbody>
28   <tfoot>
29     <tr>
30       <td align="center">Sum</td>
31       <td>$180</td>
32     </tr>
33   </tfoot>
34 </table>
35 </body>
36 </html>

thead,tbody,tfoot属性

三、<caption>标题及其属性

caption 标题标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

align属性规定标题的对齐方式，值包括left、right、center、top、bottom。如果值是bottom，标题在表格之下。不推荐使用align属性，请用样式取代。

四、<th>表头及其属性

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

1、平行表头

 1 <html>
 2   <body>
 3    <h4>平行表头：</h4>
 4      <table border="1">
 5        <tr>
 6          <th>姓名</th>
 7          <th>电话</th>
 8          <th>电话</th>
 9        </tr>
10        <tr>
11          <td>Bill Gates</td>
12          <td>1234567</td>
13          <td>7654321</td>
14        </tr>  
15      </table>
16   </body>
17 </html>

平行表头

2、垂直表头

 1 <html>
 2   <body>
 3     <h4>垂直表头：<h4>
 4     <table border="1">
 5       <tr>
 6         <th>姓名</th>
 7         <td>Bill Gates</td>
 8       </tr>
 9       <tr>
10         <th>电话</th>
11         <td>1234567</td>
12       </tr>
13       <tr>
14         <th>电话</th>
15         <td>7654321</td>
16       </tr>
17     </table>
18   </body>
19 </html>

垂直表头

五、<td>单元格及其属性

空格：  <td>&nbsp</td>

1、跨列单元格

colspan属性，表示横跨列的单元格（水平打通）。<th colsapn="2">

 1 <html>
 2  <body>
 3    <h4>横跨两列的单元格</h4>
 4    <table border="1">
 5       <tr>
 6          <th>姓名</th>
 7          <th colspan="2">电话</th>
 8       </tr>
 9       <tr>
10          <td>Bill Gates</td>
11          <td>1234567</td>
12          <td>7654321</td>
13       </tr>
14    </table>
15  </body>
16 </html>

横跨两列的单元格

2、跨行单元格

rowspan属性，表示竖跨行的单元格（垂直打通）。<td rowspan="2">

 1 <html>
 2  <body>
 3    <h4>竖跨两列的单元格</h4>
 4    <table border="1">
 5       <tr>
 6          <th>姓名</th>
 7          <td>Bill Gates</td>
 8       </tr>
 9       <tr>
10          <th rowspan="2">电话</th>
11          <td>1234567</td>
12       </tr>
13       <tr>
14           <td>7654321</td>
15       </tr>
16    </table>
17  </body>
18 </html>

竖跨两列的单元格