h5标签基础 table表格标签

一、表格的定义：用于有规范的显示数据。

　　

二、基本组成:

　　　　　行<tr>/列<td>/表头<caption>/表标题<th>

　　

　　　　eg:

　　　　　　<table>

　　　　　　　　　　<caption><h1>学生信息表</h1></caption> <!---表头--->

　　　　　　　　　　<tr> <!----行-->

　　　　　　　　　　　　<th>姓名</th>

　　　　　　　　　　　　<th>年龄</th>　　<!----标题-->

　　　　　　　　　　</tr>

　　　　　　　　　　<tr> <!----行-->

　　　　　　　　　　　　<td>张大勇</td>　　<!----列-->

　　　　　　　　　　　　
　　　　　　　　　　　　<td>22岁</td>　　<!----列-->

　　　　　　　　　　</tr>

　　　　　　</table>

三、table包含的属性

　　　　宽:width  高:hight 背景色:bgcorlor

　　　　单元格与单元格之间的距离:cellspacing=数值，默认是2可设置

指单元格里的内容占据的地方 cellpadding=数值   可设置

　　　　边框线:border=数值

　　　　　　eg:

　　　　　　　　细线表格的制作

　　　　　　　　　　　　

　　　　　　　　分析:table标签有背景色（bgcolor）属性,tr也有,而细线可以通过单元格与单元格之间的距离设置后，给用户体现为细线，从而不使用border这个属性

　　　　　　　　代码:

　　<table cellspacing="3" bgcolor="green" width="500" height="200">

<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr><tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>

四、横向合并、纵向合并单元格

　　横向：colspan="数值"

　 　纵向合并:rowspan="数值"

　　eg:制作一个课程表

　　　　

　　代码:

　　　　　　

　　　　　　<table bgcolor="green" cellspacing="2" width="600" height="300" >
　　　　　　　　　　<caption><h1>课程表</h1></caption> <!---表头-------->

　　　　　　　　　　<tr bgcolor="white"><!----行-->

　　　　<th colspan="2"></th>
　　　　<th>星期一</th>
　　　　<th>星期二</th>
　　　　<th>星期三</th>
　　　　<th>星期四</th>
　　　　<th>星期五</th>

　</tr>
　<tr bgcolor="white"><!----行-->
　　　　<td >上午</td>
　　　　<td>1</td>
　　　　<td>数学</td>
　　　　<td>语文</td>
　　　　<td>英语</td>
　　　　<td>物理</td>
　　　　<td>历史</td>
　</tr>
　<tr bgcolor="white"><!----行-->
　　　　<td >下午</td>
　　　　<td>2</td>
　　　　<td>数学</td>
　　　　<td>语文</td>
　　　　<td>英语</td>
　　　　<td>物理</td>
　　　　<td>历史</td>
</tr>

</table>