CSS表格样式：边框样式、背景颜色、表格布局

CSS表格样式：边框样式、背景颜色、表格布局

一、表格边框样式

在CSS中，我们可以通过border属性来设置表格的边框样式。例如：

table{
    border-collapse: collapse;
}

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

上述代码中，我们设置了表格的边框样式为实线，颜色为黑色，宽度为1像素。同时，我们将表格边框合并为一个整体，以避免表格边框之间的间隔。

二、表格背景颜色

在CSS中，我们可以通过background-color属性来设置表格的背景颜色。例如：

th{
    background-color: #333;
    color: white;
}

td{
    background-color: #eee;
}

上述代码中，我们设置了表头的背景颜色为深灰色，字体颜色为白色；表格单元格的背景颜色为浅灰色。通过设置不同的颜色，可以让表格更加美观。

三、表格布局

在CSS中，我们可以通过width属性来设置表格的宽度，通过text-align属性来设置表格内容的对齐方式。例如：

table{
    width: 100%;
}

th, td{
    text-align: center;
}

上述代码中，我们设置了表格的宽度为100%，以适应不同的屏幕尺寸；同时，我们将表格内容的对齐方式设置为居中，以提高表格的可读性。

四、代码案例

下面是一个完整的表格样式代码案例：

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

th{
    background-color: #333;
    color: white;
    text-align: center;
}

td{
    background-color: #eee;
    text-align: center;
    border: 1px solid black;
}

在这个案例中，我们设置了表格的边框样式、背景颜色、表格布局等，可以作为日常开发中的参考代码。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： CSS链接样式：链接颜色、链接状态、链接装饰
• 下一篇： CSS列表样式：无序列表、有序列表、自定义列表