CSS 表格

css 可以让 html 表格更美观

比如这个表格

表格边框

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;}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/course/4_194