博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 表格
阅读量:6238 次
发布时间:2019-06-22

本文共 812 字,大约阅读时间需要 2 分钟。

hot3.png

使用CSS可以大大提高HTML表格的外观。

125412_4aws_1253793.png

表格边框

指定CSS表格边框,使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框:

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

请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框,使用 border-collapse属性。

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:

table{border-collapse:collapse;}table,th, td{border: 1px solid black;}

表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100%的宽度,50像素的th元素的高度的表格:

table {width:100%;}th{height:50px;}

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式,像左,右,或中心:

td{text-align:right;}

垂直对齐属性设置垂直对齐,比如顶部,底部或中间:

td{height:50px;vertical-align:bottom;}

表格填充

如果在表的内容中控制空格之间的边框,应使用td和th元素的填充属性:

td{padding:15px;}

表格颜色

下面的例子指定边框的颜色,和th元素的文本和背景颜色:

table, td, th{border:1px solid green;}th{background-color:green;color:white;}

更多实例

这个例子演示了如何创建一个个性的表格。

这个例子演示了如何定位表格标题。

转载于:https://my.oschina.net/wybo521/blog/602274

你可能感兴趣的文章
Serving websites from svn checkout considered harmful
查看>>
Java中Split函数的用法技巧
查看>>
iOS
查看>>
xenserver introduce “Local Storage”
查看>>
25万个虚拟机的实验环境 -VMworld 2011 动手实验室内幕曝光
查看>>
Supporting Python 3——不使用2to3转换支持Python 2和Python 3
查看>>
分布式存储系统MogileFS(一)之基本概念
查看>>
Zabbix宏使用及用户自定义监控
查看>>
网络社交如何保护个人隐私?做好这4步
查看>>
mysqlbinlog 命令筛选时间段某表操作记录
查看>>
python 简单擦错误记录
查看>>
css float
查看>>
SQL*Plus中的Echo
查看>>
云计算技术的产生、概念、原理和前景
查看>>
test
查看>>
将自己的项目部署在github上
查看>>
oracle 启动关闭周期
查看>>
【经典数据结构】B树与B+树
查看>>
c++学习 定位new表达式
查看>>
svn问题
查看>>