HTML5中如何修改表格

当你想要给网页上的表格换上新装，HTML5里有很多工具可以让你轻松实现，就像给家里装修一样，我们得先了解有哪些材料和工具，然后再动手，下面是一些修改表格的小技巧，让你的表格看起来既专业又美观。

使用CSS样式化表格

CSS是改变表格外观的利器，它可以让你的表格颜色、字体、边框等都焕然一新，你可以这样设置表格的边框：

table {
  border-collapse: collapse; /* 让边框合并，看起来更整洁 */
  width: 100%; /* 让表格占满整个容器的宽度 */
}
td, th {
  border: 1px solid #ddd; /* 设置单元格边框的颜色和宽度 */
  padding: 8px; /* 设置单元格内部的填充 */
}

为表格添加背景色

想让表格更加醒目？给表格的头部和单元格添加背景色是个不错的选择。

thead {
  background-color: #f2f2f2; /* 给表头添加浅灰色背景 */
}
tr:nth-child(even) {
  background-color: #f9f9f9; /* 给偶数行添加浅灰色背景 */
}

让表格响应式

在移动设备上查看表格时，我们希望表格能够适应屏幕大小，这时，可以使用媒体查询来调整表格的布局：

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td {
    border: none;
    position: relative;
    padding-left: 50%;
  }
  td:before {
    content: attr(data-title);
    position: absolute;
    left: 10px;
    font-weight: bold;
  }
}

给表格添加排序功能

如果你的表格数据量很大，添加排序功能可以让用户更方便地查看数据，这通常需要结合JavaScript来实现，这里是一个简单的示例：

<table id="myTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">姓名</th>
      <th onclick="sortTable(1)">年龄</th>
      <th onclick="sortTable(2)">城市</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
  </tbody>
</table>
<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  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;
    }
  }
}
</script>

给表格添加分页功能

对于数据量非常大的表格，分页可以提高页面加载速度和用户体验，这通常需要后端支持，但也可以前端实现，这里是一个简单的前端分页示例：

<table id="myTable">
  <!-- 表格数据 -->
</table>
<div id="pagination"></div>
<script>
var pages = 5; // 假设有5页数据
var currentPage = 1;
function showPage(page) {
  var start = (page - 1) * 10; // 假设每页显示10条数据
  var end = page * 10;
  var table = document.getElementById("myTable");
  var tbody = table.getElementsByTagName("tbody")[0];
  tbody.innerHTML = ""; // 清空当前页数据
  
  for (var i = start; i < end; i++) {
    // 假设有一个数组存储所有数据
    var row = document.createElement("tr");
    row.innerHTML = "<td>数据" + i + "</td>";
    tbody.appendChild(row);
  }
}
function createPagination() {
  var pagination = document.getElementById("pagination");
  pagination.innerHTML = "";
  for (var i = 1; i <= pages; i++) {
    var pageButton = document.createElement("button");
    pageButton.innerHTML = i;
    pageButton.onclick = function() {
      currentPage = this.innerHTML;
      showPage(currentPage);
    };
    pagination.appendChild(pageButton);
  }
}
createPagination();
showPage(currentPage);
</script>

就是一些基本的HTML5表格修改技巧，通过这些方法，你可以让表格看起来更加美观，同时也提高用户的使用体验，记得在实际应用中，根据你的具体需求调整代码和样式。