轻松掌握HTML5：精选实战table表格案例解析

表格基础与案例解析

什么是表格？

在HTML中，表格是用来显示数据的一种结构，它将数据组织成行和列。每个单元格（cell）可以包含文本、图片或者其他HTML元素。表格在网页设计中非常有用，特别是在显示数据列表时。

基础表格标签

HTML5中的表格主要通过以下标签来实现：

• <table>：定义一个表格。
• <tr>：定义表格中的一行。
• <th>：定义表头单元格（通常是表格的第一行或第一列）。
• <td>：定义表格中的标准单元格。

实战案例一：简单商品信息表格

以下是一个简单的商品信息表格示例：

<table border="1">
  <tr>
    <th>商品名称</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>5元/斤</td>
    <td>100</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>3元/斤</td>
    <td>200</td>
  </tr>
</table>

这个表格包含了三个表头单元格和三个数据行，用于展示苹果和香蕉的价格和库存信息。

实战案例二：响应式表格

随着移动设备的普及，响应式表格变得越来越重要。以下是一个简单的响应式表格示例：

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  @media (max-width: 600px) {
    th, td {
      display: block;
    }
  }
</style>

<table>
  <tr>
    <th>商品名称</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>苹果</td>
    <td>5元/斤</td>
    <td>100</td>
  </tr>
  <tr>
    <td>香蕉</td>
    <td>3元/斤</td>
    <td>200</td>
  </tr>
</table>

在这个例子中，我们使用CSS媒体查询来改变表格在不同屏幕尺寸下的显示方式，使得表格在小屏幕上也能很好地展示。

实战案例三：动态数据表格

在实际应用中，我们常常需要从服务器动态获取数据并展示在表格中。以下是一个简单的动态数据表格示例：

<table id="myTable">
  <tr>
    <th>商品名称</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
</table>

<script>
  // 模拟从服务器获取数据
  var data = [
    {name: "苹果", price: "5元/斤", stock: "100"},
    {name: "香蕉", price: "3元/斤", stock: "200"}
  ];

  // 动态生成表格行
  data.forEach(function(item) {
    var row = document.createElement("tr");
    row.innerHTML = `<td>${item.name}</td><td>${item.price}</td><td>${item.stock}</td>`;
    document.getElementById("myTable").appendChild(row);
  });
</script>

在这个例子中，我们使用JavaScript从服务器获取数据，并动态生成表格行。

总结

通过以上案例解析，相信你已经对HTML5中的表格有了更深入的了解。在实际应用中，表格可以帮助你更好地展示数据，提高用户体验。希望这些案例能够帮助你轻松掌握HTML5表格的使用方法。