html➕css好看的table样式，并给出效果图

以下是一个简单的 HTML/CSS 表格样式，具有边框和阴影效果。

HTML 代码：

<table>
  <thead>
    <tr>
      <th>名称</th>
      <th>价格</th>
      <th>数量</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>苹果</td>
      <td>$1.99</td>
      <td>10</td>
    </tr>
    <tr>
      <td>香蕉</td>
      <td>$0.99</td>
      <td>15</td>
    </tr>
    <tr>
      <td>橙子</td>
      <td>$2.49</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

CSS 代码：

table {
  border-collapse: collapse;
  box-shadow: 0px 0px 8px grey;
  margin: 20px auto;
}

thead {
  background-color: #f2f2f2;
}

th, td {
  padding: 10px;
  text-align: left;
}

th {
  font-size: 18px;
  font-weight: bold;
  border-bottom: 2px solid #ddd;
}

td {
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f5f5f5;
}

效果图：