HTML表格商品展示 - 竖向布局 | 商品列表设计示例 - 常规

<html>
<head>
<style>
table {
  width: 100%;
  border-collapse: collapse;
}
<p>table, th, td {
border: 1px solid black;
}</p>
<p>th, td {
padding: 8px;
text-align: left;
}</p>
<p>th {
background-color: #f2f2f2;
}
</style></p>
</head>
<body>
<h2>商品展示</h2>
<table>
  <tr>
    <th>商品名称</th>
    <th>价格</th>
    <th>库存</th>
  </tr>
  <tr>
    <td>商品1</td>
    <td>10元</td>
    <td>100</td>
  </tr>
  <tr>
    <td>商品2</td>
    <td>20元</td>
    <td>50</td>
  </tr>
  <tr>
    <td>商品3</td>
    <td>15元</td>
    <td>80</td>
  </tr>
</table>
</body>
</html>