CSS表格带横线且输入文字可以实现更美观的数据展示和更清晰的信息传达。下面是一个简单的代码示例:
table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #f2f2f2; border-bottom: 2px solid black; } td { border-bottom: 1px solid #ddd; }
其中,border-collapse: collapse
可以将单元格边框合并为一个,让表格看起来更整齐。而border-bottom
则可以实现表头带有粗横线,而其他行带有细横线的效果。
在HTML中,我们可以使用table
标签来创建表格,如下:
姓名 | 性别 | 年龄 |
---|---|---|
张三 | 男 | 28 |
李四 | 女 | 32 |
通过结合CSS样式,我们可以实现下图所示的效果:
姓名 | 性别 | 年龄 |
---|---|---|
张三 | 男 | 28 |
李四 | 女 | 32 |