表格
- 早期 表格使用来实现页面布局
- 现在 用来显示表格数据
- 表格——将数据有效地组织在一起,并以网格的形式进行显示
1、创建表格
包含table标签、tr标签、单元格;单元格中可以放置任意内容(文本、标签)
<table border="1"><!--表格容器,用来定义表格-->
<tr>
<th>表格单元头</th><!--默认文字加粗,水平、垂直居中显示-->
</tr>
<tr>
<td>普通单元格</td>
<td></td><!--默认水平居左,垂直居中显示-->
</tr>
</table>
- 复杂表格的语法
<table border="1">
<caption>表格标题</caption><!--在表格中水平居中显示,只在表格中有意义-->
<thead><!--表格的头,放置标题之类的内容,内容必须要有tr标签-->
<tr>
<th>表头单元格</th>
<th>单元格</th>
</tr>
</thead>
<tbody><!--表格的正文,放置表格数据-->
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
<tfoot><!--表格的脚注,放置脚注之类的内容-->
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</tfoot>
</table>
注意:在一个table标签中只能有一个thead和一个tfoot,但是可以有多个tbody标签,这些数据只能放在table标签中
2、表格特性
- 有内容,没有设置宽度的单元格,由内容撑开
- 没有内容,没有设置宽度的单元格,默认平分整个表格
- 同一个单元格,高度只会识别一个,取最大值
- 同一个单元格,宽度只会识别一个,取最大值
3、表格属性
- border属性:表格边框
- border="0"默认,没有边框
- border=“1”
- width属性:宽度
- height属性:高度
- cellpadding属性:单元格和边框之间的距离
- cellspacing属性:单元格之间的距离,默认值2px
<table border="1" cellpadding="30" cellsapcing="0">
</table>
- 合并单元格
- 跨列合并单元格 colspan=“合并单元格的数量”
- 跨行合并单元格 rowspan=“合并单元格的数量”
- 实现步骤
- 1)确定跨行、跨列合并单元格
- 2)找到目标单元格,添加合并单元格属性设置合并属性
- 3)删除多余的单元格
- 表格的css属性
- border-collapse属性
- collpase;边框合并
- separate;单元格边框独立,默认值
- border-spacing属性 当边框独立时,行和单元格在水平方向和垂直方向的间距
- 如果有两个值,第一个值表示水平方向,第二个值表示垂直方向
- 如果只有一个值,表示水平和垂直方向的间距
例:
- border-collapse属性
<table border="1">
<caption>求职简历</caption>
<tr>
<th>学院</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>专业</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th>姓名</th>
<td>XXX</td>
<th>性别</th>
<td>男</td>
<th>民族</th>
<td>汉</td>
<td></td>
</tr>
<tr>
<th>生日</th>
<td>yyyy-mm-dd</td>
<th>籍贯</th>
<td>中国</td>
<th>身高</th>
<td>00</td>
<td></td>
</tr>
<tr>
<th>学历</th>
<td>大专</td>
<th>政治面貌</th>
<td>党员</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<table border="1" width="1000">
<tr>
<td height="100" width="100"></td>
<td height="50"></td>
</tr>
<tr>
<td width="200"></td>
<td></td>
</tr>
</table>
<hr>
<table border="10" width="1000">
<tr>
<td height="100" width="100"></td>
<td height="50"></td>
</tr>
<tr>
<td width="200"></td>
<td></td>
</tr>
</table>
<hr>
<table border="1" cellpadding="30" cellspacing="0">
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
总结
- 表格优点:方便排列一些有规律的、结构均匀的内容或数据
- 表格缺点:产生垃圾代码,影响页面下载速度、时间,灵活性不大,难于修改