表格、表格样式

表格(table)
在html中表格的创建是需要table标签的
tr:表示表格中的一行,有几行就有几对tr
td:需要td来创建一个单元格,有几个单元格就有几个td

用table来创建一个单元格,设置单元格的外边框1,宽度占页面的40%,位置居中,代码如下:

1 rowspan用来设置纵向的合并单元格
内容 2表示合并两个纵向的单元格 1 colspan用来合并横向单元格 内容 1 添加表格样式 1、设置单元格的宽度:width:值; 2、设置居中:margin:0 auto; 3、设置边框:border:1px solid black; 4、设置边框距离:border-spacing:值;

table和td边框之间默认有一个距离,通过border-spacing属性可以设置这个距离
5、设置表格合并:border-collapse:collapse;

border-collapse可以用来设置表格的边框合并如果设置了边框合并,则border-spacing自动失效
6、设置背景样式:background-color:red;
7、设置隔行变色:tr:nth-child(even){background-color: #bfa;}
8、表头:可以用th表示,它的用法和td一样,不同的是它会有一些默认效果

长表格
有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部
在HTML中为我们提供了三个标签:

thead 表头-- thead中的内容,永远会显示在表格的头部
tbody–tbody中的内容,永远都会显示表格的中间
tfoot – 表格主体–tfoot中的内容,永远都会显示表格的底部
如果表格中没有写tbody,浏览器会自动在表格中添加tbody并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值