JavaWeb中关于table标签

前端 同时被 2 个专栏收录
18 篇文章 0 订阅
36 篇文章 0 订阅

table标签介绍

HTML表格由table标签以及一个或多个tr、th或td标签组成:

table标签用来定义表格,整个表格包含在<table>和</table>标签中;

tr标签用来定义表格中一个行,它是单元格的容器,每行可以包含有多个单元格,由<tr>和</tr>标签表示;

td标签和th标签用来定义单元格,所有单元格都在tr标签内,每个单元格由一对<td>和</td>标签或一对<th>和</th>标签表示,具体的表格内容放置在这一对td标签或th标签之中,其中th标签中的内容默认以粗体、居中的方式显示。

 

caption:设置表格的标题

 

border属性:

设定围绕表格的边框的宽度。实际上border标签属性不仅设置围绕表格边框的宽度,还为每个单元格添加宽度为1px的边框,实际开发中不建议使用border标签属性实现边框效果,建议通过为table、th和td设定border样式属性实现。

1.没有border时

2.<table border="10%"> 时

3.<table border="100%">时

width属性:设定表格的宽度

1.width="50%"时

2.width="100%"时

align属性:指定表格相对于周围标签的对齐方式

1.align="right"

2.align="center"

cellspacing 标签属性:设定单元格之间的间距(单位:px)

不建议通过cellspacing标签属性设置单元格之间的间距,建议向table标签添加border-spacing样式属性进行设置

 

1.未设置时

 

2.cellspacing="0"时

3.cellspacing="20"时

cellpadding标签属性:设定单元边沿与单元内容之间的间距(单位:px)

不建议通过cellpadding标签属性设置单元边沿与单元内容之间的间距,建议向td或th标签添加padding样式属性来实现

 

1.cellpadding="20"时

 

bgcolor标签属性

不建议通过bgcolor标签属性设置表格背景颜色,建议向table标签添加background-color样式属性实现这一效果

 

1.bgcolor="red"时

border-collapse样式属性:设置表格的边框是否被合并为一个单一的边框

1.style="border-collapse:collapse;" 时

设置前

设置后

关于th和td的属性

1.设置文字颜色(用style)

2.colspan(所占的列数)

colspan="3"时

 

3.rowspan(所占的行数)

rowspan="3"时

 

 

 

  • 1
    点赞
  • 1
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值