前端实现表格

在前端实现表格可以使用 HTML 和 CSS 进行布局和样式设计，使用 JavaScript 动态地向表格中添加数据和操作表格。下面是一个简单的表格示例：

<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 {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

接下来，您可以使用 JavaScript 动态地向表格中添加数据，例如：

const tableBody = document.querySelector('tbody');

const data = [
  { name: '王五', age: 28, gender: '男' },
  { name: '赵六', age: 35, gender: '女' }
];

data.forEach(item => {
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${item.name}</td>
    <td>${item.age}</td>
    <td>${item.gender}</td>
  `;
  tableBody.appendChild(row);
});

这样就可以动态地向表格中添加数据了。当然，这只是一个简单的示例，您可以根据实际需求来进行更加复杂的表格设计和操作。