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);
}