表格
- 早期 表格使用来实现页面布局
- 现在 用来显示表格数据
- 表格——将数据有效地组织在一起，并以网格的形式进行显示
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>
总结
- 表格优点：方便排列一些有规律的、结构均匀的内容或数据
- 表格缺点：产生垃圾代码，影响页面下载速度、时间，灵活性不大，难于修改