表格的基本结构(table, tr, td)

表格的基本结构(table, tr, td)

HTML表格由<table>元素定义，包含行(<tr>)和单元格(<td>)。表格用于以行列形式展示数据，每个单元格可以包含文本、图像或其他HTML元素。

table元素

<table>标签定义HTML表格，是所有表格内容的容器。它可以包含一个或多个<tr>、<th>、<td>、<caption>、<colgroup>、<thead>、<tbody>和<tfoot>元素。

<table border="1">
  <!-- 表格内容 -->
</table>

常用属性：

• border：定义表格边框宽度(像素)
• width：定义表格宽度(像素或百分比)
• cellspacing：单元格之间的间距
• cellpadding：单元格内容与边框之间的间距

tr元素

<tr>(table row)定义表格中的行，包含一个或多个<td>或<th>元素。

<table>
  <tr>
    <td>第一行第一列</td>
    <td>第一行第二列</td>
  </tr>
  <tr>
    <td>第二行第一列</td>
    <td>第二行第二列</td>
  </tr>
</table>

行可以设置以下属性：

• align：水平对齐(left/center/right)
• valign：垂直对齐(top/middle/bottom)
• bgcolor：背景颜色

td元素

<td>(table data)定义标准单元格，包含表格数据。每个<td>代表一个单元格。

<table>
  <tr>
    <td width="100" colspan="2">跨两列的单元格</td>
  </tr>
  <tr>
    <td rowspan="2">跨两行的单元格</td>
    <td>第二行第二列</td>
  </tr>
  <tr>
    <td>第三行第二列</td>
  </tr>
</table>

重要属性：

• colspan：单元格横跨的列数
• rowspan：单元格横跨的行数
• width/height：单元格宽高
• nowrap：防止单元格内容换行

表头单元格(th)

<th>定义表头单元格，通常位于第一行或第一列，浏览器默认以粗体居中显示。

<table>
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>¥10,000</td>
  </tr>
</table>

表格分组元素

表格可以分为三个部分：头部(<thead>)、主体(<tbody>)和底部(<tfoot>)。

<table>
  <thead>
    <tr>
      <th>日期</th>
      <th>收入</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2023-01-01</td>
      <td>¥5,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总计</td>
      <td>¥5,000</td>
    </tr>
  </tfoot>
</table>

复杂表格示例

<table border="1" cellspacing="0" width="80%" align="center">
  <caption>学生成绩表</caption>
  <colgroup>
    <col width="20%">
    <col width="30%">
    <col width="25%">
    <col width="25%">
  </colgroup>
  <thead>
    <tr bgcolor="#f0f0f0">
      <th rowspan="2">学号</th>
      <th rowspan="2">姓名</th>
      <th colspan="2">成绩</th>
    </tr>
    <tr bgcolor="#f0f0f0">
      <th>理论</th>
      <th>实践</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>85</td>
      <td>90</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>78</td>
      <td>88</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">平均分</td>
      <td>81.5</td>
      <td>89</td>
    </tr>
  </tfoot>
</table>

表格的可访问性

为增强可访问性，应该：

1. 使用<th>元素和scope属性标识表头
2. 为复杂表格添加summary属性
3. 使用<caption>提供表格标题

<table summary="2023年第一季度销售数据">
  <caption>2023年第一季度销售报告</caption>
  <tr>
    <th scope="col">月份</th>
    <th scope="col">产品A</th>
    <th scope="col">产品B</th>
  </tr>
  <tr>
    <th scope="row">一月</th>
    <td>120</td>
    <td>150</td>
  </tr>
</table>

响应式表格设计

在小屏幕设备上，可以通过CSS使表格水平滚动或改变布局：

.table-responsive {
  overflow-x: auto;
  max-width: 100%;
}

<div class="table-responsive">
  <table>
    <!-- 宽表格内容 -->
  </table>
</div>

表格样式控制

使用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: #f1f1f1;
}

表格与JavaScript交互

通过JavaScript可以动态操作表格：

// 添加新行
function addRow() {
  const table = document.getElementById("myTable");
  const newRow = table.insertRow();
  
  const cell1 = newRow.insertCell(0);
  const cell2 = newRow.insertCell(1);
  
  cell1.innerHTML = "新单元格1";
  cell2.innerHTML = "新单元格2";
}

// 删除行
function deleteRow(row) {
  const table = document.getElementById("myTable");
  table.deleteRow(row.rowIndex);
}

表格排序功能

实现客户端表格排序：

function sortTable(n) {
  const table = document.getElementById("myTable");
  let rows, switching, i, x, y, shouldSwitch;
  switching = true;
  
  while (switching) {
    switching = false;
    rows = table.rows;
    
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[n];
      y = rows[i + 1].getElementsByTagName("td")[n];
      
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
      }
    }
    
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

表格分页显示

对于大型数据集，可以实现分页功能：

let currentPage = 1;
const rowsPerPage = 5;

function showPage(page) {
  const table = document.getElementById("myTable");
  const rows = table.getElementsByTagName("tr");
  
  // 隐藏所有行(跳过表头)
  for (let i = 1; i < rows.length; i++) {
    rows[i].style.display = "none";
  }
  
  // 显示当前页的行
  const start = (page - 1) * rowsPerPage + 1;
  const end = start + rowsPerPage;
  
  for (let i = start; i < end && i < rows.length; i++) {
    rows[i].style.display = "";
  }
}

function setupPagination() {
  const table = document.getElementById("myTable");
  const rows = table.getElementsByTagName("tr").length - 1;
  const pageCount = Math.ceil(rows / rowsPerPage);
  
  const pagination = document.getElementById("pagination");
  pagination.innerHTML = "";
  
  for (let i = 1; i <= pageCount; i++) {
    const btn = document.createElement("button");
    btn.innerText = i;
    btn.addEventListener("click", () => {
      currentPage = i;
      showPage(currentPage);
    });
    pagination.appendChild(btn);
  }
}