CSS 简明教程 - 表格样式属性

yufei       2 年, 4 月 前       291

一般情况下,在 HTML 中,我们主要使用 <table> 元素来显示数据,同时我们也可以使用一些 <table> 相关的 CSS 属性来改善它的外观

表格边框

如果希望表格显示边框,可以使用 border 属性,以下示例为 <table><th><td> 设置蓝色边框

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

请注意,上例中的表格具有双线边框,这是由于 table,th 和 td 的元素各有一个单独的边框

如果要将表的边框设置为单线边框,则可以使用 border-collapse 属性

合并表格边框

我们可以使用 border-collapse 属性将表边框设置为单线边框或双边框

例如,上例中,可以使用 border-collapsecollapse 将表的双边框更改为单个边框

table {
    border-collapse:collapse;
}

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

宽度和高度

我们可以使用 widthheight 属性定义表的宽度和高度

下面的示例中,我们将表的宽度设置为 100%,将 <th> 元素的高度设置为 50px

table {
    border-collapse:collapse;
    width:100%;
}

th {
    height:50px;
}

文本对齐

我们还可以使用 text-alignvertical-align 属性来设置表的文本对齐方式

text-align 属性用于设置水平对齐,例如左对齐 left,右对齐 right 或中心对齐 ceter

td {
    text-align:right;
}

注意: <th> 元素的内容在表格中默认为居中对齐,而 <td> 则默认为左对齐

vertical-align 属性用于设置垂直对齐,例如顶部对齐 top,底部对齐 bottom 或中心对齐 middle

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

注意: 表格中的内容都会默认为垂直居中对齐,也就是 vertical-align:middle

填充 padding

如果想要控制表格内容与边框之间的距离,可以设置 <td> 元素和 <th> 元素的填充属性 padding

th, td {
    padding: 15px;
    text-align: left;
}

颜色

我们可以设置表格边框的颜色,或设置 <th> 元素和 <td> 元素的背景颜色

例如

table {
    border-collapse:collapse;
}

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

th {
    background-color:green;
    color:white;
}

隔行变色

我们可以使用 nth-child() 选择器来为奇偶行设置不同的背景色以达到隔行变色的目的

table {
    border-collapse:collapse;
}

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

tr:nth-child(even) {
    background-color: #f2f2f2;
}
目前尚无回复
简单教程 = 简单教程,简单编程
简单教程 是一个关于技术和学习的地方
现在注册
已注册用户请 登入
关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.