投稿
  1. 购宝Home
  2. 投稿

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

柳 • • 投稿

制作HTML5的表格制作HTML5的表格

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

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

制作HTML5的表格制作HTML5的表格

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

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>

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

制作HTML5的表格制作HTML5的表格

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

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>

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

制作HTML5的表格制作HTML5的表格

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文件，效果如下：

制作HTML5的表格制作HTML5的表格

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>

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

制作HTML5的表格制作HTML5的表格

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的表格制作HTML5的表格

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

tbody元素：定义表格主体；

thead元素：定义表格头；

tfoot元素：定义表格脚。

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至624739273@qq.com举报，一经查实，本站将立刻删除。
Like (0)
柳的头像柳
0 0

相关推荐

  • 在线英语教师怎么样，在线英语教师兼职平台

    亚洲市场是在线英文教育最大的市场。 图片来源：东方IC “严选北美外教”，“让孩子的口音更纯正”，随处可见的各式广告，印证着在线青少儿英文教育已成为培训行业的香饽饽。而“不能输在起…

    笑脸的头像 笑脸
    2024年8月26日 • 投稿

  • 卧底00后社交APP一周

    看完《后浪》感觉和我的生活相似度很低，正在埋头苦想原因时，睿智的网友们一语点醒梦中人：后浪说的是00后，我们这帮90后老阿姨实在不必非要对号入座。 这让我开始有些好奇00后的真实生…

    柳的头像 柳
    2024年9月6日 • 投稿

  • dos7.1启动盘怎么输入中文（启动盘装系统步骤）

    DOS从最初的磁盘操作系统，到现在变成windows的附属功能，见证了整个操作系统的历史和发展。现在很多功能被各种可视化界面和工具替代了，但是当我们遇到系统问题的时候还是很有帮助的…

    柳的头像 柳
    2024年8月28日 • 投稿

  • 英文数据库有哪些（常见的数据库管理系统）

    在计算机科学中，图数据库（英语：graph database，GDB）是一个使用图结构进行语义查询的数据库，它使用节点、边和属性来表示和存储数据。该系统的关键概念是图，它直接将存储…

    柳的头像 柳
    投稿 2024年9月1日

  • excel更改日期格式公式（excel按身份证年龄排序）

    踩坑千千万，一切宗旨都是为了让爹们满意。每天从天而降的线上反馈，没有一点点防备，也没有一丝顾虑，它就这样出现，在我的世界里… 这日又是平凡的、虚心接受用户反馈的一天。领…

    柳的头像 柳
    2024年8月28日 • 投稿
  • 汽车之家财报：2024一路闯关 投稿

    汽车之家财报：2024一路闯关

    自阿里巴巴、网易、京东等中概股先后赴港二次上市后，网传汽车之家计划申请在港二次上市，引发市场热议。 （配图来自Canva可画） 据报道，汽车之家正在就香港股票发行准备工作与包括高盛…

    柳的头像 柳
    2024年9月3日

发表回复

Please Login to Comment
微信
微信
SHARE
TOP
话费电费9折起
要想花得少,就用购宝。话费电费9折起，官方公众号：购宝