前端HTML<table>标签的属性和使用方法

游客 2018-4-3 663

1.什么是表格&表格的作用什么是表格:由一些 被称之为 单元格的矩形框 按照从左到右从上到下的顺序排列到一起组成的
表格的作用:以一定的结构来显示信息的。

2.如何使用表格定义表格:<table></table>
创建表行:<tr></tr>
创建列(单元格):<td></td>


注意:默认情况下,每行中的列数是统一的
table : display:table;
特点:
1、独占一行
2、宽度自适应(由内容来决定)


3、表格属性 1、<table> 属性
1、width
设置表格宽度
2、height
设置表格高度
3、align
设置 表格 在其 父元素中的水平对齐方式,取值:left,center,right
4、border
边框,边框宽度,以px为单位的数值,px可以省略
5、cellpadding
单元格内边距
单元格边框与内容之间的距离
6、cellspacing
单元格外边距
单元格与单元格之间或者单元格与表格之间的 距离
7、bgcolor
背景颜色
2、<tr> 属性
1、align
该行的内容 水平对齐方式
2、valign
该行的内容 垂直对齐方式
取值:top,middle,bottom
3、bgcolor
3、<td> 属性
1、width
2、height
3、align
4、valign
5、bgcolor
6、colspan
设置单元格跨列
7、rowspan
设置单元格跨行
3、表格中的其他标记
1、<caption></caption>
作用:为表格定义标题
位置:表格正上方居中显示
<table>
<caption>标题</caption>
<tr>
<td></td>
<td></td>
</tr>
</table>
2、行标题或列标题
列标题:第一行中的每一列,加粗,水平居中的效果显示
行标题:每行里面的第一列, 加粗,水平居中的效果显示
行(列)标题:<th></th>
<th></th>作用 与 <td></td>一模一样
3、表格的复杂应用
1、行分组
表格可以被划分成3个部分
1、表头 <thead></thead>
2、表主体 <tbody></tbody>
3、表尾 <tfoot></tfoot>

<table>
<tbody>
<tr></tr>
<tr></tr>
</tbody>
</table>

注意:如果不对表格行进行分组的话,那么默认都属于 tbody 中
2、不规则表格
每行中的列数,不是统一化的。
1、跨列
合并列,让指定的单元格,横向向右,合并几个单元格(包含自己)
语法:
td 的 colspan 属性
2、跨行
合并行,让指定的单元格,纵向向下,合并几个单元格(包含自己)
语法:
td 的 rowspan 属性

注意:无论是跨行还是跨列,被合并的单元格一定从代码中删除出去
3、表格的嵌套
在一个表格中,又嵌入了另外一个表格
被嵌套的表格必须出现在<td>中
<table>
<tr>
<td>
<table>
<tr>
<td>

</td>
</tr>
</table>
</td>
</tr>
</table>


4.表格特有的样式属性1、边框合并
属性:border-collapse
取值:
1、separate
默认值,分离边框模式
2、collapse
边框合并模式
2、边框边距
1、作用
设置相邻单元格边框之间的距离(类似于cellspacing)
2、属性
border-spacing
取值:
1、取1个值
表示水平和垂直间距相等
2、取2个值
第一个值表示的 水平间距
第二个值表示的 垂直间距
两个值之间用 空格 隔开
3、要求
border-collapse必须为separate
必须为分离边框模式时有效
3、标题位置
<caption></caption>
作用:将标题位置由默认的位置改到表格之下
属性:caption-side
取值:
1、top
默认
2、bottom
标题位于表格之下
4、显示规则
1、作用
指定浏览器以什么样的方式来布局一个表格。实际是指定了单元格的算法规则

默认算法:单元格的宽由内容来决定,不受设置的width值来限定。
2、属性
table-layout
取值:
1、auto
默认值,自动,列宽由内容来决定
2、fixed
固定表格布局,列宽由设定的值决定。
3、自动表格布局&固定表格布局
1、自动表格布局(auto)
单元格的大小会适应内容大小
在表格复杂时,加载会比较慢
适用于不确定每列大小时使用
传统表格表现方式
2、固定表格布局(fixed)
单元格的大小由设定的值来决定,与内容无关
会加速显示表格,浏览器在加载完第一行的时候就不用再计算了。

4、隐藏的显示效果
属性: visibility:collapse
用在表格元素上,删除一行或一列,不影响表格整个布局



最新回复 (0)
返回
发新帖