CSS(8)表格

一、border

  border属性用于设置表格(<table></table>)以及单元格(<th></th>/<td></td>)设置边框。注意:border也是一种简写属性,它一次性设置了table、th和td的四条边框的属性,这些属性都可以单独设置的,在这里就不一一演示了。在这个简写属性中, 各个属性的书写顺序是无关的。例如,下面的例子为table、th和td设置了1px宽的蓝色实线边框。

  table, th, td
   {
       border:  solid blue 1px;
   }

说明:上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。如果需要把表格显示为单线条边框,请使用 border-collapse 属性。

二、border-collapse

  border-collapse 属性设置是否将表格边框折叠为单一边框(单线表格)。border-collapse属性的取值有:separate(table、th 以及 td 元素都有独立的边框);collapse(table、th和td元素的边框合并为一条单一的边框)。需要注意的是:如果没有规定文档定义类型 !DOCTYPE,border-collapse 属性可能会使网页报错,所以在为表格设置border-collapse属性的时候要先给HTML文档加上DTD。

复制代码
table
  {
  /*为表格设置单线边框*/
  border-collapse:collapse;
  }

table,th, td
  {
  border: 1px solid black;
  }
复制代码

三、width和height
  width和height属性分别用于设置表格的宽度和高度。例如,下面的例子将表格宽度设置为 100%,同时将 th 元素的高度设置为 50px:

复制代码
table
  {
  width:100%;
  }

th
  {
  height:50px;
  }
复制代码

四、text-align 和 vertical-align

  text-align 和 vertical-align 属性用于设置表格中文本的对齐方式。

  text-align 属性设置水平对齐方式,比如左对齐(left)、右对齐(right)或者居中(center):

/*单元格文本右对齐*/
td
  {
  text-align:right;
  }

  vertical-align 属性设置垂直对齐方式,比如顶部对齐(top)、底部对齐(bottom)或居中对齐(middle):

/*指定单元格的高度,并且设置单元格的垂直文本对齐方式为底部*/
td
  {
  height:50px;
  vertical-align:bottom;
  }

五、padding

  表格的padding属性用于设置表格内边距。如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性:

/*设置单元格内边矩为15px*/
td
  {
  padding:15px;
  }

六、表格颜色

  我们可以通过给表格设置背景色(background-color)、前景色(color )和边框(border),从而制作出颜色比较丰富的漂亮表格。下面的例子设置边框的颜色,以及 th 元素的文本和背景颜色:

复制代码
/*先设置表格的边框颜色*/
table, td, th
  {
  border:1px solid green;
  }

/*然后设置单元格的背景色和文本的颜色*/
th
  {
  background-color:green;
  color:white;
  }
复制代码

参考:http://www.w3school.com.cn/css/css_table.asp

posted @   YunshiSun  阅读(1427)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示