web前端开发基础——在网页中使用表格

文章目录

web前端开发基础——在网页中使用表格
前言
一、表格
- 1.表格及其基本使用
- 2.引用css
二、单元格的合并
- 1.样例
- 2.样例代码

前言

本篇主要解释了如何在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;/* 文字居中 */
}

以上的所有都只是在下对目前所学知识的部分理解与总结，希望对诸位有所帮助。如果诸位在阅读过程中发现在下有说错的地方还请指出；如果诸位觉得在下存在没有解释清楚之处或者仍有不懂之处，请留言。