人员信息表表格作业

人员信息表表格

包含信息有编号,姓名,英文名,年龄,身高,性别,邮箱,电话,籍贯,所属部门,最后访问时间

html表格知识点

th有预置样式:加粗和居中

跨行合并

rowspan (row)行(span)合并

<td rowspan="3" align="center">值</td>

colspan (column)列(span)合并

<th colspan="3">值</th>

效果图

完整代码如下

  <table border="1">
    <caption>
      <h1>人员信息表</h1>
    </caption>
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>英文名</th>
        <th>年龄</th>
        <th>身高</th>
        <th>性别</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>籍贯</th>
        <th>所属部门</th>
        <th>最后访问时间</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>Three Zhang</td>
        <td>18</td>
        <td>175cm</td>
        <td rowspan="3" align="center">男</td>
        <td>12345678@qq.com</td>
        <td>1381122111</td>
        <td>山东济南</td>
        <td rowspan="3" align="center">市场部</td>
        <td>2022-10-17 12:23:43</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>Peter Li</td>
        <td>22</td>
        <td>170cm</td>
        <!-- <td>男</td> -->
        <td>987654321@qq.com</td>
        <td>1391122111</td>
        <td>安徽合肥</td>
        <!-- <td>市场部</td> -->
        <td>2022-10-11 12:23:43</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王二麻子</td>
        <td>Mazi King</td>
        <td>30</td>
        <td>180cm</td>
        <!-- <td>男</td> -->
        <td>654321@qq.com</td>
        <td>1401122111</td>
        <td>上海市</td>
        <!-- <td>市场部</td> -->
        <td>2022-08-11 12:23:43</td>
      </tr>
      <tr>
        <td>3</td>
        <td>朱丽叶</td>
        <td>Julie</td>
        <td>25</td>
        <td>160cm</td>
        <td>女</td>
        <td>Julie999@163.com</td>
        <td>1421122111</td>
        <td>北京市</td>
        <td rowspan="2" align="center">研发中心</td>
        <td>2022-09-11 12:23:43</td>
      </tr>
      <tr>
        <td>4</td>
        <td>李大头</td>
        <td>Tall Lee</td>
        <td>23</td>
        <td>163cm</td>
        <td>男</td>
        <td>tallLee@163.com</td>
        <td>1431122111</td>
        <td>深圳市</td>
        <!-- <td>研发中心</td> -->
        <td>2022-10-11 12:23:43</td>
      </tr>
      <tr>
        <td>5</td>
        <td>孙大圣</td>
        <td>Sun</td>
        <td>33</td>
        <td>183cm</td>
        <td>女</td>
        <td>Dasheng.Sun@126.com</td>
        <td>1555555555</td>
        <td>重庆市</td>
        <td>售后服务中心</td>
        <td>2022-10-01 12:23:43</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <!-- 水平方向,列合并 -->
        <th colspan="10" align="right">10月份访问人数</th>
        <th>4</th>
      </tr>
    </tfoot>
  </table>