css制作biaoge

使用CSS制作表格

表格在网页设计中常用于展示结构化数据，通过CSS可以自定义表格样式，使其更符合设计需求。以下方法介绍如何用CSS创建并美化表格。

基础表格结构

HTML部分需使用<table>标签，包含<thead>、<tbody>和<tr>、<td>等元素：

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
  </tbody>
</table>

边框样式控制

通过border-collapse合并边框，避免双线边框：

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

表头与行交替颜色

使用伪类选择器增强可读性：

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

悬停高亮效果

增加交互反馈：

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

响应式表格设计

在小屏幕设备上横向滚动：

div.table-container {
  overflow-x: auto;
}

高级样式示例

圆角边框与阴影效果：

table {
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}
th:first-child {
  border-radius: 5px 0 0 0;
}
th:last-child {
  border-radius: 0 5px 0 0;
}

单元格对齐方式

控制内容对齐方式：

td {
  text-align: center;
  vertical-align: middle;
}

通过组合这些CSS属性，可以创建从简约到复杂的各种表格样式。实际应用中可根据设计需求调整颜色、间距等参数。