html css制作表格

使用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样式

通过CSS可以控制表格的外观：

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  margin: 20px 0;
}

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

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:hover {
  background-color: #e9e9e9;
}

响应式表格设计

对于小屏幕设备，可以通过媒体查询实现水平滚动：

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

高级表格特性

添加表格标题和分组：

<table>
  <caption>月度销售数据</caption>
  <thead>
    <tr><th>月份</th><th>销售额</th></tr>
  </thead>
  <tbody>
    <tr><td>一月</td><td>$1000</td></tr>
  </tbody>
  <tfoot>
    <tr><td>总计</td><td>$1000</td></tr>
  </tfoot>
</table>

斑马条纹效果

使用CSS实现交替行颜色：

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

表格边框样式

自定义表格边框：

table {
  border: 2px solid #333;
}

th, td {
  border: 1px solid #aaa;
}

单元格合并

使用colspan和rowspan属性合并单元格：

<tr>
  <td rowspan="2">跨行单元格</td>
  <td>普通单元格</td>
</tr>
<tr>
  <td colspan="2">跨列单元格</td>
</tr>