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 width 和 height 属性可以用来定义表格的宽度和高度

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

table 
{
    width:100%;
}

th
{
    height:50px;
}

CSS text-align 和 vertical-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;}