<table style="display: grid; place-items: center;"> <thead> <tr> <th>学历</th> <th>职位数量</th> <th>平均薪资(K)</th> </tr> </thead> <tbody> {% for education, count in education_count.items() %} <tr> <td>{{ education }}</td> <td>{{ count }}</td> <td>{{ education_salary_mean[education] }}</td> </tr> {% endfor %} </tbody> </table>美化页面

可以通过添加 CSS 样式来美化页面。以下是一个简单的示例：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    font-size: 16px;
    color: #333;
  }
  th, td {
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc;
  }
  th {
    background-color: #f5f5f5;
    font-weight: bold;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f2f2f2;
  }
</style>

<table>
  <thead>
    <tr>
      <th>学历</th>
      <th>职位数量</th>
      <th>平均薪资(K)</th>
    </tr>
  </thead>
  <tbody>
    {% for education, count in education_count.items() %}
    <tr>
      <td>{{ education }}</td>
      <td>{{ count }}</td>
      <td>{{ education_salary_mean[education] }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

在上面的代码中，我们使用了 CSS 的 `border-collapse` 属性将表格边框合并，使表格看起来更整洁。通过 `width` 和 `max-width` 属性，我们可以限制表格的宽度，并在页面中居中显示。`font-size` 和 `color` 属性可以调整表格文字的大小和颜色。`background-color` 属性可以设置表头和交替行的背景颜色，使表格更易于阅读。