网页|HTML表格制作

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

用html表格制作如何能够做出一个类似Excel的表格呢？

在我们学习工作想要做出一个表格的时候，我们通常会直接打开Excel，但其实，使用html进行表格制作时，更能体会到敲代码的魅力。

解决方案

表格由 <table> 标签来定义，表格的标题由<caption>定义。

图3.1

表格的行由<tr> </tr>定义，列（单元格）由<td> </td>定义，要输入的数据内容由<td> </td>定义，表头由<th> </th>定义

图3.2行、列、表头示例

跨行（列）的表格单元格

跨行单元格用 rowspan= “ ” 定义，跨列单元格用 colspan= “ ” 定义。

图3.3跨行单元格

结语

在使用html表格制作的过程中，体会到了自己敲代码做表格的魅力，但同时过程也遇到了一些问题。比如，当你要在如图表格的体育部后面添加干事一列，此时并不能把这个表格分成左右两部分看，而是把它们当作一个整体在第二列后面添加一个<td>标签，输入干事数据。

图4.1表格示例

END

实习编辑 | 王楠岚

责 编 | 吴怡辰

where2go 团队