在web开发中,表格是经常使用到的元素之一。在前端开发中,CSS可以很好地控制表格的样式。本文将介绍如何使用CSS来制作一个两行四列的表格。<table> <
在web开发中,表格是经常使用到的元素之一。在前端开发中,CSS可以很好地控制表格的样式。本文将介绍如何使用CSS来制作一个两行四列的表格。
<table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> <td>第一行第四列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> <td>第二行第三列</td> <td>第二行第四列</td> </tr> </table>
以上是表格的HTML代码,接下来我们使用CSS来美化表格。首先我们需要为表格添加一些基本样式:
table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid #ccc; padding: 8px; text-align: left; }
以上样式中,我们设置了表格的边框合并,使表格的边框看起来更加美观。我们还为单元格设置了边框和内边距,并将文字左对齐。
tr:nth-child(odd) { background-color: #f9f9f9; }
通过以上代码,我们为表格的奇数行设置了背景颜色,使得表格的行之间有了明显的区分。
th { background-color: #4CAF50; color: white; }
最后,我们为表头单元格设置了背景颜色和字体颜色,使得表头单元格与普通单元格区别开来。
通过以上设置,我们就完成了一个两行四列的美观的表格。
粉丝
0
关注
0
收藏
0