HTML table标签的用法

table是一个比较古老的标签,它有很多自己的特性

  • table不会独占一行。需要主动设置其宽度,一般设置为100%,单元格会自动平均排列.
  • talbe可以设置 有三种边框,一种是最外层的table元素上的,一种是tr元素上的,一种是td元素上的。可以通过设置style来实现,table元素也可以通过设置border属性设置。一般我们仅仅设置td的边框,设置table的边框为0;
  • 边框的合并。默认talbe边框是叠一起的,视觉效果很差,通过设置border-collapse:collapse把边框合并.
  • 单元格的内边距。通过table标签的cellpadding属性设置,也可以设置td的padding样式
  • 单元格的间距:table标签的cellspacing属性和样式属性border-spacing控制边框的距离。
  • 单元格内容为空时,通过设置table标签样式属性:empty-cells:hide或show,是否显示边框
  • 单元格的合并:合并列:colspan="2"(合并2个),合并行rowspan="2"(合并两行),对应位置的td缺省即可。

table的使用场景

  • 最适合做表格的标签,没有之一.自动适应,流式布局,强大。
  • 也可用于做自适应布局,模仿栅格布局,
  • 单元格会自动撑起排列,每行的单元格保持同样的高度,table-cell天然居中处理
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值