表单元素
什么是表格:有行有列,网格形式表示数据,通过二维(行+列)数据表表示的信息
网格通过在两条轴线引用信息来展示复杂的数据
表格是一个单元格,单元格可以包含文本、图片、列表、表格、表单
只有行,列=单元格
border:单元格和表格都会有,可以用CSS解决
单元格默认宽度由内容决定,表格的宽度=所有单元格之和
<tr><td></td></tr>
表头
居中 字体加粗
方法1:第一个<tr>标签--可以加个ID
方法2:<th>代替<td>
标题
<h1>不行,<h>都不行
<caption>, <table>里
长表格
<thead> 页眉,表格的顶部
<tbody> 在<tr><body>之间,表格的主体
<tfoot> 页脚
跨行 跨列(合并单元格)
合并单元格的第一个 <td rowspan="2"> 对应的行单元格需要删除
<td colspan="2"> 对应的行单元格需要删除
1.布局2.标题3.处理空单元格4.边框5.伪类
表格样式布局 table-layout,加载表格时的方式
auto自动 /fixed固定
auto:由单元格内容定,慢,多用这个
fixed:依据表格、列、单元格决定,快,只加载首行即可,需要不停添加的用这个
标题
caption-side:top(默认)/bottom
边框
border:1px solid black; 宽度 实线 颜色 width style color
table/td 的CSS仍然一起,解决办法:
border-collapse:separate;(默认分离)/collapse;(合并)
border-spacing:10px; 边框之间的距离(collapse 分离时)
空单元格
table,td,th{
border: 1px solid black;
empty-cells:hide/show; /*collapse是分离时,空单元格有设置背景颜色时,也隐藏边框和背景,是collapse就不会隐藏*/
}
8
9