web前端开发基础——在网页中使用表格
前言
本篇主要解释了如何在web中建立表格设置表格的大小，单元格宽高、背景色以及表格内字体的大小
提示：以下是本篇文章正文内容，下面案例仅供参考
一、表格
由于关于web网页制作的软件多种多样，本人所使用的是VSCode，虽然软件不同，但操作与结果应该是相近的。
1.表格及其基本使用
表格在网页中有两个作用,一是布局网页内容;二是组织相关数据,以行列的形式将数据罗列出来,结构紧凑,数据直观,因而在日常生活中,表格被大量使用,如工资表、工作报表、财务报表、数据调查表、电视节目表等都使用了表格组织数据。在2008年以前,表格最主要的用途就是布局网页内容。随着前端技术的不断发展,使用表格布局的弊端越来越明显,因而使用表格布局网页的方式已逐渐淘汰,现在布局网页的方式主要是使用 CSS + DIV +一些结构性标签。
表格通过行列的形式直观形象地将内容表达出来,结构紧凑且蕴含的信息量大,是文档处理过程中经常用到的一种对象。可以在 HTML 表格的单元格中放人任何网页元素,如导航条、文字、图像、动画等,从而使网页的各个组成部分排列有序。
表格属于结构性对象，一个表格包括行、列和单元格3个组成部分。其中行是表格中的水平分隔,列是表格中的垂直分隔,单元格是行和列相交产生的区域。
在网页中描述表格至少需要3个标签,分别是< table> < tr >和< td >,其中< table >用于声明一个表格对象,< tr >用于声明一行,< td >用于声明一个单元格。
基本语法:
<table>
<tr>
<td>第1行第1格</td>
<td>第1行第2格</td>
<td>第1行第3格</td>
<td>第1行第4格</td>
</tr>
<tr>
<td>第2行第1格</td>
<td>第2行第2格</td>
<td>第2行第3格</td>
<td>第2行第4格</td>
</tr>
<tr>
<td>第3行第1格</td>
<td>第3行第2格</td>
<td>第3行第3格</td>
<td>第3行第4格</td>
</tr>
</table>
语法说明:表格中的所有< tr >标签对都必须放到< table >标签对之间,一个 table 标签对可以包含一个或多个< tr >,而< td >标签对需要放到< tr >标签对之间,一个< tr >标签对可以包含一个或多个< td >标签对,需要注意的是,所有需在表格中显示的内容,包括嵌套表格,都是放到单元格< td >标签对之间的。
运行结果：
虽然可以运行，但得到的结果可以说是极其简陋的——没有边框、标题、背景色，而且表格的位置不是居中的，接下来我们将对表格做出一定的处理进行美化。
2.引用css
对于网页设计人员而言，css是非常重要的，因为它关系整个页面的美观，大方，以及个性，给人已美不胜收的感觉； 在业内认识看来，css不仅可以提高网页的质量，而且可以提高下载速度，也就是当我们浏览时，会更快。对于目前的我来说，就是为了简洁。
结构（HTML）与样式（CSS）相分离。（专业的人做专业的事）CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
在这里，我们使用外部样式表(外链式),css的作用可以理解为对example.html进行格式的设置。关于对css的引用样式之后会再做解释。首先，我们在VSCode中新建一个css文件，如图：
/* @charset"utf-8"//这一行代码其实可以删掉，对结果基本没有什么影响；但如果没有的话有时输入或输出中文字符时出现乱码造成乱码
.{
}
*/
body{
background-color: #CCFFFF;
}
table{
background-color: #6699CC;
width: 1200px;
border: 1px;
margin: 0 auto;
font-family:"黑体";
font-size: 20px;
}
td{
border: 2px solid #FFFFFF;/* 添加边框 2px 实线 */
/* background-color: rgba(166, 236, 245, 0.671); */
text-align: center;/* 文字居中 */
}
再看看index.html网页：
没有任何变化，原因是我们没有在index.html中对style.css进行引用，引用的代码如下：
<link rel="stylesheet" href="style.css">
再看结果:
二、单元格的合并
1.样例
明显的，在这个表格中有许多上下合并的单元格，接下来我们讲讲如何合并单元格。合并的基本语法有：
<td rowspan="5">上午</td><!-- 向下合并5个单元格，单元格内容为上午 -->
<td colspan="6"></td><!-- 横向合并6个单元格，无内容 -->
此处我注明一下，上面两行代码中的“向下”“向右”指的是从你所选的单元格开始向下或向右。注意，要及时删掉合并以后多出来的单元格，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web表格的制作</title>
</head>
<body>
<h1>我的课表</h1>
<table>
<tr>
<td rowspan="5">第1行第1格</td><!-- 向下合并5个单元格 -->
<td>第1行第2格</td>
<td>第1行第3格</td>
<td>第1行第4格</td>
</tr>
<tr>
<td>第2行第1格</td>
<td>第2行第2格</td>
<td>第2行第3格</td>
<td>第2行第4格</td>
</tr>
<tr>
<td>第3行第1格</td>
<td>第3行第2格</td>
<td>第3行第3格</td>
<td>第3行第4格</td>
</tr>
<tr>
<td>第4行第1格</td>
<td>第4行第2格</td>
<td>第4行第3格</td>
<td>第4行第4格</td>
</tr>
<tr>
<td>第5行第1格</td>
<td>第5行第2格</td>
<td>第5行第3格</td>
<td>第5行第4格</td>
</tr>
</table>
</body>
</html>
结果是：
除了第一行的第四格之外，余下四行的最后一格都被挤出了一格，这提醒我们要及时删除单元格，刚开始上手的同志可以对照着结果判断需删除的单元格，至于高手，请跳过。
向右与向下差别不大，请自行实验得出结果。所以建议按从上向下、从左向右的顺序对单元格进行合并操作得到课表。
2.样例代码
样例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css"> <!--引用styles.css中的内容 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimeTable</title><!-- 网页的标题 -->
</head>
<body>
<h1>我的课表</h1><!-- -->
<table>
<tr>
<td>时间段</td>
<td>节次</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="5">上午</td><!-- 向下合并5个单元格，单元格内容为上午 -->
<td>1</td>
<td rowspan="2"> </td>
<td rowspan="2"></td>
<td rowspan="2">面向对象的java</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td rowspan="3">概率论与数理统计</td>
<td rowspan="3">web前端开发技术</td>
<td></td>
<td rowspan="3">数据库原理与应用</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td rowspan="2">离散数学</td>
<td rowspan="2">羽毛球</td>
<td></td>
<td></td>
</tr>
<tr>
<td>5</td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4">下午</td>
<td>6</td>
<td rowspan="4"></td>
<td rowspan="3">计算机组成</td>
<td></td>
<td rowspan="2"> 离散数学</td>
<td rowspan="4">数据库原理</td>
<td></td>
<td></td>
</tr>
<tr>
<td>7</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8</td>
<td rowspan="2">考研英语</td>
<td rowspan="2">马克思主义原理</td>
<td></td>
<td></td>
</tr>
<tr>
<td>9</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4">晚上</td>
<td>10</td>
<td rowspan="2">面向对象的java</td>
<td rowspan="4"></td>
<td rowspan="2">计算机组成</td>
<td rowspan="3">大学生性健康</td>
<td></td>
<td></td>
<td rowspan="2">音乐鉴赏</td>
</tr>
<tr>
<td>11</td>
<td></td>
<td></td>
</tr>
<tr>
<td>12</td>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td rowspan="2">人力资源管理</td>
</tr>
<tr>
<td>13</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<p></p>
</body>
</html>
其中引用的css代码为：
@charset"utf-8"
.{
}
p{
font-size: 30px;
font-family: "宋体";
}
h1{
text-align: center;/* 使字体居中 */
}
body{
background-color: #F9F7E8;
}
.txt{
text-align: center;
font-size: 30px;
font-family: "宋体";
}
table{
background-color: #FFEFE5;
/* width: 1200px; */
border: 1px;
margin: 0 auto;
font-family:"黑体";
font-size: 20px;
}
td{
border: 2px solid #FEDCCC;/* 添加边框 2px 实线 */
/* background-color: rgba(166, 236, 245, 0.671); */
width: 130px;
text-align: center;/* 文字居中 */
}
以上的所有都只是在下对目前所学知识的部分理解与总结，希望对诸位有所帮助。如果诸位在阅读过程中发现在下有说错的地方还请指出；如果诸位觉得在下存在没有解释清楚之处或者仍有不懂之处，请留言。
扫一扫
2438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
