如何用HTML制作学生信息表格——手机版

选择合适的表格标签

在HTML中，最基本的表格由<table>，<tr>和<td>三个标签组成。<table>标签定义整个表格，<tr>标签定义表格中的每一行，<td>标签定义每一行中的每一列。但是，在手机端，一个大的表格在小屏幕上展现，会显得非常拥挤，影响用户的视觉体验。因此，我们需要考虑使用响应式表格，以适应不同屏幕尺寸的设备，并使信息更加清晰易读。

使用响应式表格

响应式表格可以自动根据不同的设备屏幕尺寸进行自适应调整，内容排版更加合理，更加适合手机端阅读。以下是使用响应式表格的示例代码：

  <div class=\"table-responsive\">    <table class=\"table\">      <thead>        <tr>          <th>学号</th>          <th>姓名</th>          <th>性别</th>          <th>年龄</th>          <th>联系方式</th>        </tr>      </thead>      <tbody>        <tr>          <td>201901001</td>          <td>张三</td>          <td>男</td>          <td>20</td>          <td>139xxxxxxxx</td>        </tr>        <tr>          <td>201901002</td>          <td>李四</td>          <td>女</td>          <td>19</td>          <td>136xxxxxxxx</td>        </tr>      </tbody>    </table>  </div>

<div class=\"table-responsive\">是一个响应式类，可用于使表格自适应于屏幕大小。<table>标记表格的开始，<thead>和<tbody>标记表格的两部分。<tr>标记表格每一行的开始和结束，<th>标签定义表格每一列的标题，<td>标签定义表格每一行中的每一列。例如，上述代码呈现一个包含五列的表格，头部为“学号”，“姓名”，“性别”，“年龄”和“联系方式”，两行内容表示两个学生的信息。

使用表格样式美化表格

为了让表格更美观、可读性更强，我们需要对表格应用一些CSS样式。使用CSS style属性，以定义行、列的样式，实现表格美化的效果。例如：

  <style>    table {      width: 100%;      margin: auto;      border-collapse: collapse;      border: 1px solid #ddd;    }        th, td {      padding: 8px;      text-align: center;      border: 1px solid #ddd;    }        th {      background-color: #F5F5F5;      color: #333;    }        tbody tr:nth-child(even) {      background-color: #f2f2f2;    }  </style>

上述代码中，我们为表格定义了一些样式。例如，margin:auto 使表格在页面居中显示，使用border-collapse属性合并边框，增加整体的视觉效果；thead中定义的表头的背景颜色、字体颜色区分明显；使用:nth-child选择器，使每一行显示不同的背景颜色等。这些效果都结合起来，让表格的内容很容易地阅读且提升了用户体验。

总结

本文介绍了如何使用HTML和CSS制作学生信息表格，以适应手机端阅读。我们可以使用响应式表格，自适应用户的设备屏幕尺寸，并使用CSS style属性使表格更加美观、易读。

参考

• HTML Tables
• CSS Tables
• How to Create Responsive Tables in Bootstrap 4