h5表单制作教程(免费的h5制作网站)

使用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>

使用浏览器打开这个文件,效果如下:

其实,在HTML5中,除了上面五个主要元素,还有三个较常用的的元素:

tbody元素:定义表格主体;

thead元素:定义表格头;

tfoot元素:定义表格脚。

这三个元素主要用于将表格分为表头、表尾、表体三个部分,便于进行编程控制,使用起来非常简单,这里就不介绍了。

[b2_index_module key=shengming]
[b2_index_module key=cnxh]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 kangeryun@qq.com 举报,一经查实,本站将立刻删除。
电商信息通 » h5表单制作教程(免费的h5制作网站)