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

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


一、表格边框样式


在CSS中，我们可以通过border属性来设置表格的边框样式。例如：
1
2
3
4
5
6
7
table{
    border-collapse: collapse;
}
 
th, td{
    border: 1px solid black;
}

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

二、表格背景颜色


在CSS中，我们可以通过background-color属性来设置表格的背景颜色。例如：
1
2
3
4
5
6
7
8
th{
    background-color: #333;
    color: white;
}
 
td{
    background-color: #eee;
}

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

三、表格布局


在CSS中，我们可以通过width属性来设置表格的宽度，通过text-align属性来设置表格内容的对齐方式。例如：
1
2
3
4
5
6
7
table{
    width: 100%;
}
 
th, td{
    text-align: center;
}

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

四、代码案例


下面是一个完整的表格样式代码案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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

猿教程
请先登录后发表评论
  • 最新评论
  • 总共0条评论