小樱知识 > 生活常识h5表单制作教程（免费的h5制作网站）

h5表单制作教程（免费的h5制作网站）

提问时间：2022-03-16 12:02:04来源：小樱知识网

使用HTML5制作表格，是特别容易的事情，下面介绍一下制作方法。

1、HTML5表格的主要元素：

HTML5的表格包括table、caption、tr、td、th五个主要元素：

table元素：定义一个表格；

caption元素：定义表格的标题；

tr元素：定义表格的一行，tr是table row的缩写；

td元素：定义表格单元，td是table data的缩写；

th元素：定义表头，th是table head的缩写。

2、制作一个简单的表格

下面这个HTML文档，制定了一个学生常用的课表：

<!DOCTYPE html><html>    <head>        <title>table001</title>        <meta charset="utf-8" />    </head>    <body>        <table>            <tr>                <th>节次</th>                <th>周一</th>                <th>周二</th>                <th>周三</th>                <th>周四</th>                <th>周五</th>            </tr>            <tr>                <td>第1节课</td>                <td>语文</td>                <td>语文</td>                <td>英语</td>                <td>英语</td>                <td>语文</td>            </tr>            <tr>                <td>第2节课</td>                <td>语文</td>                <td>数学</td>                <td>数学</td>                <td>英语</td>                <td>数学</td>            </tr>            <tr>                <td>第3节课</td>                <td>英语</td>                <td>数学</td>                <td>物理</td>                <td>化学</td>                <td>物理</td>            </tr>            <tr>                <td>第4节课</td>                <td>英语</td>                <td>政治</td>                <td>地理</td>                <td>物理</td>                <td>政治</td>            </tr>            <tr>                <td>第5节课</td>                <td>数学</td>                <td>生物</td>                <td>信息</td>                <td>数学</td>                <td>化学</td>            </tr>            <tr>                <td>第6节课</td>                <td>体育</td>                <td>化学</td>                <td>语文</td>                <td>语文</td>                <td>美术</td>            </tr>            <tr>                <td>第7节课</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>            </tr>        </table>    </body></html>

使用浏览器打开这个文档时，效果如下：

这个表格一点都不好看，因为没有表格线。

3、给<table>元素设置border属性的值，为表格加上表格线。

对HTML文档进行修改，设置<table>元素的border值为1，修改后的HTML文档为：

<!DOCTYPE html><html>    <head>        <title>table002</title>        <meta charset="utf-8" />    </head>    <body>        <table border="1">            <tr>                <th>节次</th>                <th>周一</th>                <th>周二</th>                <th>周三</th>                <th>周四</th>                <th>周五</th>            </tr>            <tr>                <td>第1节课</td>                <td>语文</td>                <td>语文</td>                <td>英语</td>                <td>英语</td>                <td>语文</td>            </tr>            <tr>                <td>第2节课</td>                <td>语文</td>                <td>数学</td>                <td>数学</td>                <td>英语</td>                <td>数学</td>            </tr>            <tr>                <td>第3节课</td>                <td>英语</td>                <td>数学</td>                <td>物理</td>                <td>化学</td>                <td>物理</td>            </tr>            <tr>                <td>第4节课</td>                <td>英语</td>                <td>政治</td>                <td>地理</td>                <td>物理</td>                <td>政治</td>            </tr>            <tr>                <td>第5节课</td>                <td>数学</td>                <td>生物</td>                <td>信息</td>                <td>数学</td>                <td>化学</td>            </tr>            <tr>                <td>第6节课</td>                <td>体育</td>                <td>化学</td>                <td>语文</td>                <td>语文</td>                <td>美术</td>            </tr>            <tr>                <td>第7节课</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>            </tr>        </table>    </body></html>

使用浏览器打开这个文档，效果如下：

现在的表格好看一些了，但是还有个缺点，就是没有标题。

4、添加<caption>元素，为表格添加标题

这里修改HTML文档，加上“华南师大附中初二（12）班课程表”标题，修改后的HTML文档如下；

<!DOCTYPE html><html>    <head>        <title>table003</title>        <meta charset="utf-8" />    </head>    <body>        <table border="1">            <caption>华南师大附中初二（12）班课程表</caption>            <tr>                <th>节次</th>                <th>周一</th>                <th>周二</th>                <th>周三</th>                <th>周四</th>                <th>周五</th>            </tr>            <tr>                <td>第1节课</td>                <td>语文</td>                <td>语文</td>                <td>英语</td>                <td>英语</td>                <td>语文</td>            </tr>            <tr>                <td>第2节课</td>                <td>语文</td>                <td>数学</td>                <td>数学</td>                <td>英语</td>                <td>数学</td>            </tr>            <tr>                <td>第3节课</td>                <td>英语</td>                <td>数学</td>                <td>物理</td>                <td>化学</td>                <td>物理</td>            </tr>            <tr>                <td>第4节课</td>                <td>英语</td>                <td>政治</td>                <td>地理</td>                <td>物理</td>                <td>政治</td>            </tr>            <tr>                <td>第5节课</td>                <td>数学</td>                <td>生物</td>                <td>信息</td>                <td>数学</td>                <td>化学</td>            </tr>            <tr>                <td>第6节课</td>                <td>体育</td>                <td>化学</td>                <td>语文</td>                <td>语文</td>                <td>美术</td>            </tr>            <tr>                <td>第7节课</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>            </tr>        </table>    </body></html>

使用浏览器打开这个文档，效果如下：

5、现在我们加上“上午、下午”的信息。

为加上“上午、下午”的信息，我们需要增加一列，并使用<td>元素的rowspan属性对行进行合并。修改后的HTML文档如下：

<!DOCTYPE html><html>    <head>        <title>table004</title>        <meta charset="utf-8" />    </head>    <body>        <table border="1">            <caption>华南师大附中初二（12）班课程表</caption>            <tr>                <th>上午/下午</th>                <th>节次</th>                <th>周一</th>                <th>周二</th>                <th>周三</th>                <th>周四</th>                <th>周五</th>            </tr>            <tr>                <td rowspan="4">上午</td>                <td>第1节课</td>                <td>语文</td>                <td>语文</td>                <td>英语</td>                <td>英语</td>                <td>语文</td>            </tr>            <tr>                <td>第2节课</td>                <td>语文</td>                <td>数学</td>                <td>数学</td>                <td>英语</td>                <td>数学</td>            </tr>            <tr>                <td>第3节课</td>                <td>英语</td>                <td>数学</td>                <td>物理</td>                <td>化学</td>                <td>物理</td>            </tr>            <tr>                <td>第4节课</td>                <td>英语</td>                <td>政治</td>                <td>地理</td>                <td>物理</td>                <td>政治</td>            </tr>            <tr>                <td rowspan="3">下午</td>                <td>第5节课</td>                <td>数学</td>                <td>生物</td>                <td>信息</td>                <td>数学</td>                <td>化学</td>            </tr>            <tr>                <td>第6节课</td>                <td>体育</td>                <td>化学</td>                <td>语文</td>                <td>语文</td>                <td>美术</td>            </tr>            <tr>                <td>第7节课</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>                <td>社团活动</td>            </tr>        </table>    </body></html>

使用浏览器打开该HTML文件，效果如下：

6、为了让课表更美观，我们将“上午/下午”和节次合并，将“社团活动”合并。

我们通过设置<td>元素的colspan属性，实现这个目标。修改后的HTML文档如下：

<!DOCTYPE html><html>    <head>        <title>table005</title>        <meta charset="utf-8" />    </head>    <body>        <table border="1">            <caption>华南师大附中初二（12）班课程表</caption>            <tr>                <th colspan="2">节次</th>                <th>周一</th>                <th>周二</th>                <th>周三</th>                <th>周四</th>                <th>周五</th>            </tr>            <tr>                <td rowspan="4">上午</td>                <td>第1节课</td>                <td>语文</td>                <td>语文</td>                <td>英语</td>                <td>英语</td>                <td>语文</td>            </tr>            <tr>                <td>第2节课</td>                <td>语文</td>                <td>数学</td>                <td>数学</td>                <td>英语</td>                <td>数学</td>            </tr>            <tr>                <td>第3节课</td>                <td>英语</td>                <td>数学</td>                <td>物理</td>                <td>化学</td>                <td>物理</td>            </tr>            <tr>                <td>第4节课</td>                <td>英语</td>                <td>政治</td>                <td>地理</td>                <td>物理</td>                <td>政治</td>            </tr>            <tr>                <td rowspan="3">下午</td>                <td>第5节课</td>                <td>数学</td>                <td>生物</td>                <td>信息</td>                <td>数学</td>                <td>化学</td>            </tr>            <tr>                <td>第6节课</td>                <td>体育</td>                <td>化学</td>                <td>语文</td>                <td>语文</td>                <td>美术</td>            </tr>            <tr>                <td>第7节课</td>                <td colspan="5">社团活动</td>            </tr>        </table>    </body></html>

使用浏览器打开该文件，效果如下：

7、现在表格内容基本上完整了，就是显得有点小。

修改一下HTML文档，添加一下列宽的信息，修改后的HTML文档如下：

<!DOCTYPE html><html>    <head>        <title>table006</title>        <meta charset="utf-8" />    </head>    <body>        <table border="1" style="width:800px;text-align:center">            <caption>华南师大附中初二（12）班课程表</caption>            <tr>                <th colspan="2">节次</th>                <th>周一</th>                <th>周二</th>                <th>周三</th>                <th>周四</th>                <th>周五</th>            </tr>            <tr>                <td rowspan="4">上午</td>                <td>第1节课</td>                <td>语文</td>                <td>语文</td>                <td>英语</td>                <td>英语</td>                <td>语文</td>            </tr>            <tr>                <td>第2节课</td>                <td>语文</td>                <td>数学</td>                <td>数学</td>                <td>英语</td>                <td>数学</td>            </tr>            <tr>                <td>第3节课</td>                <td>英语</td>                <td>数学</td>                <td>物理</td>                <td>化学</td>                <td>物理</td>            </tr>            <tr>                <td>第4节课</td>                <td>英语</td>                <td>政治</td>                <td>地理</td>                <td>物理</td>                <td>政治</td>            </tr>            <tr>                <td rowspan="3">下午</td>                <td>第5节课</td>                <td>数学</td>                <td>生物</td>                <td>信息</td>                <td>数学</td>                <td>化学</td>            </tr>            <tr>                <td>第6节课</td>                <td>体育</td>                <td>化学</td>                <td>语文</td>                <td>语文</td>                <td>美术</td>            </tr>            <tr>                <td>第7节课</td>                <td colspan="5">社团活动</td>            </tr>        </table>    </body></html>

使用浏览器打开这个文件，效果如下：