从头再学html 6

这一节要学习的是表格：

一、HTML 表格

表格: 表格是用<table>标签定义的。表格被划分为行（使用<tr>标签），每行又被划分为数据单元格（使用<td>标签）。td表示“表格数据”（Table Data），即数据单元格的内容。数据单元格可以包含文本，图像，列表，段落，表单，水平线，表格等等。

<p> 没有边框的表格<br> <table> <tr> <td>yinzai</td> <td>冠军</td> </tr> <tr> <td>abama</td> <td>亚军</td> <tr> </table> </p>

显示如下：

表格和border属性：

<p> 有边框的表格<br> <table border="1"> <tr> <td>yinzai</td> <td>100000000$</td> </tr> <tr> <td>abama</td> <td>10000000￥</td> <tr> </table> </p>

显示如下：

表格头：
表格头使用<th>标签指定。

<p> 有表头的表格<br> <table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>电话</th> <tr> <td bgcolor="yellow">yinzai</td> <td>22</td> <td>12345678909</td> </tr> <tr> <td>niuzai</td> <td>20</td> <td>19875678909</td> </tr> <tr> <td>yinhui</td> <td>18</td> <td>12398278909</td> </tr> </table> </p>

表格中的空单元格 在多数浏览器中，没有内容的单元格显示得不太好。

注意一下空单元格的边框没有显示出来。为了避免这个，可以在空单元格里加入不可分空格来占位，这样边框能正常显示。

我们也可以设置表格的背景属性：

<table border="1" bgcolor="blue"> <tr> <td>姓名</td> <td>排名</td> </tr> <tr> <td>yinzai</td> <td>冠军</td> </tr> <tr> <td>abama</td> <td></td><!--空格来占位--> <tr> </table> </p>

下士如下：

还可以给指定的单元格设置背景色：

<table border="1"> <tr> <th>姓名</th> <th>年龄</th> <th>电话</th> <tr> <td bgcolor="yellow">yinzai</td> <td>22</td> <td>12345678909</td> </tr> <tr> <td>niuzai</td> <td>20</td> <td>19875678909</td> </tr> <tr> <td>yinhui</td> <td>18</td> <td>12398278909</td> </tr> </table> </p>

拆分单元格：

<p> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table>
还有另外一种拆法：

<h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table>
2者区别如下：

暂时学到此处!