css样式——表格篇

CSS 表格属性可以帮助您极大地改善表格的外观。

表格边框

如需在 CSS 中设置表格边框,请使用border属性。

下面的例子为tableth以及td设置了蓝色边框:

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

折叠边框

border-collapse属性设置是否将表格边框折叠为单一边框:

table {
    border-collapse:collapse;
}

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

表格宽度和高度

通过widthheight 属性定义表格的宽度和高度。

下面的例子将表格宽度设置为 100%,同时将 th 元素的高度设置为 50px:

table {
    width:100%;
}

th {
    height:50px;
}

表格文本对齐

text-alignvertical-align 属性设置表格中文本的对齐方式。

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

td {
    text-align:right;
}

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

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

表格内边距

如需控制表格中内容与边框的距离,请为 tdth 元素设置 padding 属性:

td {
    padding:15px;
}

表格颜色

下面的例子设置边框的颜色,以及 th 元素的文本和背景颜色:

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

th {
    background-color:green;
    color:white;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!)(注2:更多内容请查看我的目录。) ...
    love丁酥酥阅读 4,289评论 2 5
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 4,092评论 0 0
  • CSS要点记录 CSS 指层叠样式表 (Cascading Style Sheets) 多种样式时的优先级问题 数...
    Tony__Hu阅读 1,194评论 0 0
  • 用手指轻轻按压这9个穴位 刺激雄性激素、女性荷尔蒙分泌 增加胸部弹性!
    URoom一室一品阅读 570评论 0 2