用HTML CSS JS打造实用网页表格

做网页时，表格不只是用来展示数据，还能变成互动小工具。比如你在网上查课程表、看订单明细，背后都是HTML、CSS和JS在配合干活。掌握这几个技巧，自己也能做出清爽又实用的表格。

先搭个基础表格结构

用HTML把表格骨架写出来，这是第一步。一个带表头的简单表格长这样：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>上海</td>
    </tr>
  </tbody>
</table>

让表格看起来舒服点

默认的表格太素了，加点CSS美化一下。给表头换个背景色，加上边框线，再隔行变色，读起来更轻松。

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}
th, td {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}

让表格动起来

光看静态数据不过瘾，加点JS让它能排序。比如点击“年龄”那列，数据按大小排个序。

给表头加个点击事件：

<th onclick="sortTable(1)">年龄</th>

然后写个简单的排序函数：

function sortTable(col) {
  const table = document.querySelector('table');
  const tbody = table.querySelector('tbody');
  const rows = Array.from(tbody.rows);

  rows.sort((a, b) => {
    const cellA = a.cells[col].textContent;
    const cellB = b.cells[col].textContent;
    return cellA.localeCompare(cellB, undefined, { numeric: true });
  });

  rows.forEach(row => tbody.appendChild(row));
}

加个搜索过滤功能

数据一多，找起来费劲。加个输入框，打字就能筛。

先加个搜索框：

<input type="text" id="searchInput" placeholder="搜索姓名...">

再用JS监听输入：

document.getElementById('searchInput').addEventListener('keyup', function() {
  const filter = this.value.toLowerCase();
  const trs = document.querySelectorAll('tbody tr');

  trs.forEach(tr => {
    const text = tr.textContent.toLowerCase();
    tr.style.display = text.includes(filter) ? '' : 'none';
  });
});

这样一来，输入“张”，就只留张三那行。特别适合后台管理页面或者查订单记录。

这些技巧不复杂，但组合起来很实用。下次做网页需要展示数据，别再直接扔个干巴巴的表格上去，稍微花点时间优化下，用户体验立马不一样。