从头再学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者区别如下：

暂时学到此处!