HTML使用表格 布局

HTML 表格布局

基本介绍

HTML表格使用<table>元素创建，用于展示行列数据或进行页面布局。

主要标签

1. <table> - 定义表格容器

2. <tr> - 定义表格行

3. <td> - 定义标准单元格

4. <th> - 定义表头单元格

5. <caption> - 定义表格标题

6. <thead> - 定义表头区域

7. <tbody> - 定义表格主体

8. <tfoot> - 定义表尾区域

基本用法

<table>
  <caption>学生成绩表</caption>
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>90</td>
      <td>85</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>88</td>
      <td>92</td>
    </tr>
  </tbody>
</table>

常用属性

• border - 设置表格边框

• cellpadding - 单元格内边距

• cellspacing - 单元格间距

• colspan - 单元格跨列

• rowspan - 单元格跨行

CSS扩展样式

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

th, td {
  padding: 12px 15px; /* 单元格内边距 */
  text-align: left; /* 文本对齐 */
  border-bottom: 1px solid #ddd; /* 底部边框 */
}

th {
  background-color: #f2f2f2; /* 表头背景 */
  font-weight: bold; /* 加粗 */
}

tr:hover {
  background-color: #f5f5f5; /* 悬停效果 */
}

/* 斑马纹效果 */
tr:nth-child(even) {
  background-color: #f9f9f9;
}

响应式表格

@media screen and (max-width: 600px) {
  table {
    border: 0;
  }
  
  table thead {
    display: none;
  }
  
  table tr {
    display: block;
    margin-bottom: 10px;
    border: 1px solid #ddd;
  }
  
  table td {
    display: block;
    text-align: right;
    border-bottom: 1px dotted #ccc;
  }
  
  table td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
}

现代布局替代方案

虽然表格可用于布局，但现代Web开发推荐使用：

• CSS Flexbox

• CSS Grid

• 框架布局系统(Bootstrap等)

表格应主要用于展示表格数据，而非页面布局。