整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

制作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>

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

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

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元素：定义表格脚。

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

JavaScript中，可以使用DOM操作来动态生成表格。以下是一个基本的示例代码，展示了如何通过JavaScript动态生成一个简单的表格：

```javascript

// 创建一个二维数组，表示表格中的数据

var data = [

["姓名", "年龄", "性别"],

["张三", 25, "男"],

["李四", 30, "男"],

["王五", 28, "女"]

];

// 获取要插入表格的父元素

var tableContainer = document.getElementById("table-container");

// 创建表格元素

var table = document.createElement("table");

// 遍历数据数组，逐行创建表格行和单元格

for (var i = 0; i < data.length; i++) {

var row = document.createElement("tr"); // 创建表格行

for (var j = 0; j < data[i].length; j++) {

var cell = document.createElement(i === 0 ? "th" : "td"); // 第一行创建表头<th>，其他行创建表格单元格<td>

cell.textContent = data[i][j]; // 设置单元格的内容

row.appendChild(cell); // 将单元格添加到行中

}

table.appendChild(row); // 将行添加到表格中

}

// 将表格添加到父元素中

tableContainer.appendChild(table);

```

在上述代码中，我们首先定义一个二维数组 `data`，用于存储表格中的数据。然后，使用 `getElementById` 方法获取要插入表格的父元素。接下来，使用 `createElement` 方法创建 `<table>` 表格元素，并使用嵌套的 `for` 循环遍历数据数组，逐行创建表格行和单元格。对于第一行，我们创建表头元素 `<th>`，其他行则创建表格单元格元素 `<td>`。最后，将创建好的表格元素和行、单元格依次添加到父元素中。

你可以根据需要进一步修改代码，例如添加样式、动态更新表格数据等。希望对你有所帮助！

过昨天的学习算是对HTML有了一点点了解，知道了什么是前端，什么是HTML、前端三大标准、主流浏览器和html的基本结构及常用标签。那么今天继续看看html还有什么新的知识吧。

特殊字符（了解即可）

有常见性就有特殊性，我们使用电脑时经常会用到空格键，在html文档上有时也会使用到空格键等等，那怎么在html上又是以什么形式展示给浏览器解析呢？

浏览器显示结果

特殊字符名称

HTML编辑字符


空格

& n b s p;

<

小于号

& l t ；

>

大于号

& g t；

&

和

& a m p；

©

版权

& c o p y ；

表格标签

作用：在浏览器上清晰美观地显示、展示数据。

表格标签的语法

<table>

<tr>

<td></td>

</tr>

</table>

表格标签：<table></table>，一个table标签中可嵌套多个tr标签。

行标签：<tr></tr>，一个tr标签代表一行。一个行标签中可以嵌套多个单元格标签。

单元格标签：<td></td>，一个td标签代表一个单元格。在单元格中可以填充文本、图片、超链接等等内容。

在html中表格不是由横线划分行和列，而是大大小小的矩形盒子来划分。Table是一个最大的矩形盒子，里面包含tr标签，这个是一个和table长度差不多的矩形盒子，table一行仅容纳一个tr盒子。在tr盒子中还包含有N个td盒子，td盒子就是单元格。

表格示例：

在html文档中编辑表格标签结构时，除了一个标签一个标签地敲之外，可以使用快捷方式快速操作：如五行三列的表格，可以在table标签中输入：“tr*5>td*3”然后敲回车，就将其表格结构迅速展现出来。

<h1>表格示例：</h1>
<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
</table>

运行界面示例：默认状态下表格是没有线条分界，表格对齐方式左对齐。

表头单元格标签

<th></th>：位于表格的第一行或第一列，可以使其内容加粗居中显示。

语法：

<table>

<th>

<td></td>

</th>

</table>

表头表格代码示例：

<h1>表头表格示例：</h1>
   <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面示例：

表格结构标签

表格结构标签分为表格头部标签和表格主体标签。类似于head标签和body标签对于html标签之间的关系。

表格头部标签：<thead></thead>。定义表格头部，嵌套在<table></table>中，一般位于第一行。

表格主体标签：<tbody></tbody>。定义表格主体，嵌套在<table></table>中，主要用于显示数据。

代码示例：

<h1>表格结构标签</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三丰</td>
                <td>男</td>
                <td>36</td>
            </tr>
            <tr>
                <td>李四喜</td>
                <td>女</td>
                <td>30</td>
            </tr>
        </tbody>
    </table>

运行界面：

表格属性

虽然表格属性在实际开发过程中不常使用，一般都是通过CSS样式设置，但是还是需要记住这些属性关键词，在css中属性关键词也会用到。

注：这些属性都要写在table标签的开始标签中，多个属性之间需要使用空格分隔。

align：表格的对其方式。

align=“left”：在浏览器中居左显示。也是默认显示。

align=“center”：在浏览器中居中显示。

align=“right”：在浏览器中居右显示。

border：表格是否具有边框。

border=”1”：表格添加边框。

cellpadding：单元格内的元素和td边框的距离。

举个例子，如果表格是一件教室的话，桌子就是单元格，桌子上放的书本就是单元格内的元素，书本边缘和桌子边缘之间产生的空白区域就是cellpadding的值。

cellspacing：单元格和单元格之间的距离。默认是有空隙的，可设置为零，使其空隙清零，成为一条直线。

还是以教室为表格，桌子为单元格。桌子和桌子之间的距离就是cellspacing的值。

width：表格的宽度，属性值可以是像素值也可以是百分比。

height：表格的高度，属性值可以是像素值也可以是百分比。

代码示例：

<h1>表头表格示例：</h1>
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三丰</td>
            <td>男</td>
            <td>27</td>
        </tr>
        <tr>
            <td>李四喜</td>
            <td>女</td>
            <td>18</td>
        </tr>                   
        <tr>
            <td>王五通</td>
            <td>男</td>
            <td>35</td>
        </tr>
        <tr>
            <td>秦六夏</td>
            <td>女</td>
            <td>30</td>
        </tr>
    </table>

运行界面：

合并单元格

合并单元格是指将两个或两个以上的单元格合并成一个单元格。合并属性一般写在单元格标签的开始标签上。合并代码属性设置后，要将没有写合并的单元格代码的其他合并单元格标签删除掉。

目标单元格：（合并代码存在位置）

跨行合并：最上侧单元格为目标单元格，写合并代码。

跨列合并：最左侧单元格为目标单元格，写合并代码。

合并单元格的方式：

跨行合并：将处于不同行的单元格进行合并

语法：rowspan=“合并单元格个数”

代码示例：

<h1>跨行合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行界面：

跨列合并：将处于不同列的单元格进行合并

语法：colspan=“合并单元格个数”

代码示例：

<h1>跨列合并表格：</h1>
    <table border="1" width="300px" height="150px" cellspacing="0">
        <tr>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

运行示例：

今天学习的表格内容就到这里了，明天开始学习列表。


在线咨询
上一篇：5月份GitHub最热门的开源项目
下一篇：在网页开发中，我们需要掌握的常用HTML标签有哪些？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 木兰县 江干区 红河县 金乡县 邹平县 延寿县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服