目标:
1,什么是table
2,简单的表格结构
3,复杂的表格结构
1,什么是table?
table(表格),修饰行列规则的数据。类似于咱们使用的excel表格。
2,简单的表格结构
语法:
<table>
<caption>表格名字</caption>
<tr>
<td></td>
....
</tr>
...
</table>
【注:】
1,caption:表格的名字
2,tr:一个tr表示一行
3,td:一个td表示一列
例如:
<table>
<caption>信息采集表</caption>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>籍贯</td>
</tr>
<tr>
<td>1</td>
<td>Jerry</td>
<td>女</td>
<td>河北衡水</td>
</tr>
<tr>
<td>2</td>
<td>Tom</td>
<td>男</td>
<td>运城稷山</td>
</tr>
<tr>
<td>3</td>
<td>Alex</td>
<td>男</td>
<td>天津宝坻区</td>
</tr>
</table>
代码效果如下图所示:
我们下一步利用属性给表格添加样式,让他变好看一些,例如:
代码如下:
<table border="1" width="80%" align="center" cellpadding="10" cellspacing="0">
<caption>信息采集表</caption>
<tr align="center">
<td>序号</td>
<td>姓名</td>
<td>性别</td>
<td>籍贯</td>
</tr>
<tr align="center">
<td>1</td>
<td>Jerry</td>
<td>女</td>
<td>河北衡水</td>
</tr>
<tr align="center">
<td>2</td>
<td>Tom</td>
<td>男</td>
<td>运城稷山</td>
</tr>
<tr align="center">
<td>3</td>
<td>Alex</td>
<td>男</td>
<td>天津宝坻区</td>
</tr>
</table>
上述代码我们所用到的属性:
table属性:
1,border=“1” 设置边框
2,width=“80%” 设置table的宽度为浏览器的80%
3,align=“center” 设置整个表格居中
4,cellspacing=“0” 设置外间距为0 ,边框与边框之间的距离
5,cellpadding=“10” 设置内间距为10 边框与内容之间的 距离
tr属性
1,align=“center” 设置文本内容居中
3,复杂的表格结构
语法:
<table>
<caption></caption>
<thead>
<tr>
<th>标题,默认加粗居中</th>
....
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
</tbody>
<tfoot>
<tr>
<td>...</td>
....
</tr>
</tfoot>
</table>
【注:】
1,thead:表格的头部
2,tbody:表格的主题部分
3,tfoot:表格的底部
4,th:标题列,默认加粗居中
上述简单表格效果,我们用复杂表格实现,代码如下:
<table border="1" width="80%" align="center" cellpadding="10" cellspacing="0">
<caption>信息采集表</caption>
<thead>
<tr align="center">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>籍贯</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>1</td>
<td>Jerry</td>
<td>女</td>
<td>河北衡水</td>
</tr>
<tr align="center">
<td>2</td>
<td>Tom</td>
<td>男</td>
<td>运城稷山</td>
</tr>
<tr align="center">
<td>3</td>
<td>Alex</td>
<td>男</td>
<td>天津宝坻区</td>
</tr>
</tbody>
</table>
1,上述代码中,我们只用到了thead和tbody,复杂的表格结构3部分,我们可以随意组合,thead和tbody,tbody和tfoot,或者3部分都使用,注意不能只有thead和tfoot;
2, 简单的表格结构,我们不区分thead,tbody和tfoot的话,我们所写的内容默认都在tbody中!
ok,我们今天的内容暂时到这里了,本章主要讲的是表格结构。表格的属性详情,请看下一篇文章–html之table属性。