h5 table网格状

HTML5中的表格（`<table>`）可以使用CSS3的`display: grid`属性来实现网格状布局，具体步骤如下：

1. 在HTML中添加表格元素`<table>`和表格行元素`<tr>`，并在表格行元素中添加表格单元格元素`<td>`或表头单元格元素`<th>`。

2. 在CSS中为表格元素设置`display: grid`属性。

3. 使用CSS的`grid-template-columns`属性和`grid-template-rows`属性来定义表格的列数和行数，并设置各个列和行的宽度和高度。

4. 使用CSS的`grid-column`属性和`grid-row`属性来设置单元格元素在表格中的位置。

示例代码如下：

<!-- HTML -->
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

/* CSS */
table {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
}

th {
  background-color: #f2f2f2;
}

td {
  grid-column: 1 / 4;
}

tr:nth-child(even) td {
  background-color: #f2f2f2;
}

上述代码中，`grid-template-columns`属性设置表格有3列（每个单元格的宽度为1份），`grid-template-rows`属性设置表格的每一行高度根据内容自适应。`td`元素使用`grid-column`属性将它们的位置从第1列到第3列（即整个表格）进行了扩展，以实现网格状布局。