CSS 表格

CSS 可以让 HTML 表格更美观

比如这个表格

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
North/South Simon Crowther UK
Paris spécialités Marie Bertrand France
The Big Cheese Liz Nixon USA
Vaffeljernet Palle Ibsen Denmark

表格边框

CSS border 属性可以给表格绘制边框

下面的 CSS 样式表给表格 <table> 、 <th> 和 <td> 元素加上了黑色边框

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

运行范例 »

注意: 范例中的表格有双边框,因为 <table> 和 <th> /<td> 元素有独立的边界

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

折叠边框

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

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

运行范例 »

表格宽度和高度

CSS widthheight 属性可以用来定义表格的宽度和高度

下面的 CSS 样式设置了 100% 的宽度,50像素的 <th> 元素的高度的表格

table 
{
    width:100%;
}

th
{
    height:50px;
}

运行范例 »

表格文字对齐方式

CSS text-alignvertical-align 属性可以设置 <th> 和 <th> 元素中的水平文本对齐方式和垂直对齐方式

CSS text-align 属性设置水平对齐方式,可以设置为左,右,或中心对齐

td { text-align:right; }

运行范例 »

CSS vertical-align 属性设置垂直对齐方式,可以设置为顶部,底部或中间对齐

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

运行范例 »

单元格内边距

CSS padding 属性可以设置单元格 <th> 和 <td> 元素的内边距

td { padding:15px; }

运行范例 »

表格颜色

CSS border 属性可以给表格边框加上颜色

CSS color 属性可以给表格中的文本设置前景色(文本颜色)

CSS background 属性可以给表格或单元格设置背景色

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

运行范例 »

更多范例

  1. 制作一个个性表格

    演示了如何创建一个个性的表格

  2. 设置表格标题的位置

    演示了如何定位表格标题

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

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

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