学习CSS布局:简单表格布局代码示例
yund56 2025-04-15 16:44 28 浏览
CSS是现代Web设计和开发的必备技能之一。而表格布局是Web页面中常用的布局之一，用于展示数据和信息。在这篇文章中，我们将介绍如何使用CSS创建一个简单的表格布局，并提供代码示例，帮助您更好地了解CSS的表格布局。
HTML代码
在CSS中创建表格布局之前，我们首先需要创建表格结构的HTML代码。下面是一个简单的表格结构的HTML代码示例：
html
| 姓名 | 年龄 | 性别 |
|---|---|---|
| 张三 | 20 | 男 |
| 李四 | 25 | 女 |
| 王五 | 30 | 男 |
在这个示例中，我们使用
| 和 | 元素分别创建了表格头和单元格。 CSS代码 在HTML代码完成后，我们需要使用CSS样式来创建表格布局。下面是一个简单的CSS样式代码示例： css table { border-collapse: collapse; width: 100%; text-align: center; } thead th { background-color: #eee; font-weight: bold; } tbody td { border: 1px solid #ddd; padding: 8px; } tbody tr:nth-child(even) { background-color: #f2f2f2; } 在这个示例中，我们使用了border-collapse属性来将表格边框合并为单一的边框，使用width属性将表格宽度设置为100%，使用text-align属性将表格内容居中对齐。使用thead和tbody选择器来定义表格头和表格主体的样式，使用background-color属性来设置表格头的背景颜色和字体加粗，使用border和padding属性来定义表格单元格的边框和内边距，使用nth-child伪类选择器来为奇数行和偶数行设置不同的背景颜色。 相关推荐
|
|---|