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>
上述代码的效果图如下
表格标签：<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>
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>
三、<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> </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>
