CSS从入门到精通——表格样式

CSS（层叠样式表）中的表格样式主要用于控制网页中的数据展示，使表格看起来更专业和易读。以下是基本的表格样式步骤：

1. **基本结构**：
开始一个HTML表格标签 `<table>`，包含 `<tr>` (行) 和 `<td>` 或 `<th>` (单元格)。`<th>` 用于表头，`<td>` 用于普通内容。

<table>
  <thead>
    <tr>
      <th>列标题1</th>
      <th>列标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>行1, 列1</td>
      <td>行1, 列2</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

2. **样式设置**：
- `border`: 设置边框宽度、样式和颜色；
- `width` 和 `height`: 控制单元格大小；
- `text-align` 和 `vertical-align`: 文字对齐；
- `padding` 和 `margin`: 内外间距调整；
- `background-color` 或 `background-image`: 背景颜色或图片。

table {
  border-collapse: collapse; /* 合并相邻单元格边框 */
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* 可选：美化表格 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

3. **高级样式**：
使用伪元素如 `::before`, `::after` 添加行/列编号，或者使用媒体查询针对不同屏幕尺寸优化布局。

th::before {
  content: counter(column); /* 这里counter(column)需要在HTML里通过属性data-column-count设置计数 */
}

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  /* ...继续调整小屏下的样式... */
}