这一节要学习的是表格:
一、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者区别如下:
暂时学到此处!