html表格制作css
HTML表格基础结构
HTML表格由<table>标签定义，包含行(<tr>)、表头单元格(<th>)和数据单元格(<td>)。基础结构如下：
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>CSS样式控制边框
通过border属性控制表格边框样式，建议使用合并边框模式：
table {
border-collapse: collapse; /* 合并相邻边框 */
width: 100%;
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 8px; /* 内边距 */
}表头样式优化
表头通常需要突出显示，可通过背景色和文字样式增强可读性：
th {
background-color: #f2f2f2;
color: #333;
text-align: left;
font-weight: bold;
}斑马纹效果
使用:nth-child()伪类实现交替行颜色，提升可读性：
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f1f1f1; /* 悬停效果 */
}响应式表格
针对小屏幕设备添加水平滚动条：
div.table-container {
overflow-x: auto;
}
@media screen and (max-width: 600px) {
table {
display: block;
width: 100%;
}
}对齐方式控制
通过text-align和vertical-align控制内容对齐：
td {
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
th {
text-align: left; /* 表头左对齐 */
}单元格合并样式
处理colspan或rowspan合并的单元格时需特殊样式：
td[colspan] {
background-color: #e6e6e6;
text-align: center;
}高级样式技巧
使用CSS变量实现主题色统一管理：
:root {
--table-header-bg: #4CAF50;
--table-header-color: white;
}
th {
background-color: var(--table-header-bg);
color: var(--table-header-color);
}
