基本表格
表格是用于排列内容的最佳手段。在HTML页面中,有很多页面都是使用表格进行排版的。基本表格是由< able>标签、< t>标签和< d>标签组成的。通过使用< table>标签 ,可以制作课程表、成绩单等常见的表格
基本表格的制作
表格标签是< table>… < /able>,表格的其他标签需要在表格的开始标签< table>和结束标签< tabl>之间才有效
标签 | 含义 |
---|---|
| 表格标签 |
行标签 | |
单元格标签 |
语法格式如下:
<table>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
...
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在该语法中,< table> 和</ table>标签分别表示一一张表格的开始和结束;而< tr> 和</ t>标签则分别表示表格中一行的开始和结束,在表格中包含几组< t>…</ t>,就表示该表格有几行;< td>和</ td>标签分别表示一一个单元格的开始和结束,也就是一行中包含了几列
接下来巧用< table>表格标签、< tr>行 标签和< d>单元格标签,制作一张考试成绩表。 首先通过< table>表格标签创建一个表格框架,然后通过< t>行标签创建表格中的一行,最后使用< td>单元格标签输入具体的内容
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>基本表格</title>
</head>
<body>
<h1 align="center">基本表格--考试成绩表</h1>
<!--<table>为表格标记-->
<table align="center">
<!--<tr>为行标签-->
<tr>
<!--<td>为表头标记-->
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<!--<td>为单元格-->
<td>王佳</td>
<td>94分</td>
<td>89分</td>
<td>56分</td>
</tr>
<tr>
<td>李翔</td>
<td>76分</td>
<td>85分</td>
<td>88分</td>
</tr>
<tr>
<td>张莹佳</td>
<td>89分</td>
<td>86分</td>
<td>97分</td>
</tr>
</table>
</body>
</html>
常见错误
在开始标签与属性之间漏加空格,比如,把<lable agn="enter>写成<ablalin=“center”>,导致浏览器无法识别< table>标签,从而导致页面布局错乱。例如,在下面代码的第1行, <table align="center”>就写成了<ablalign=“enter”>*
<tablealign="center">
<!--<tr>为行标签-->
<tr>
<!--<td>为表头标签-->
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<!-- 省略部分代码-->
</table>
表头的设置
表格中还有一种特殊的单元格,称为表头。表头一般位于表格第一行, 用来表明该列的内容类别,用< th>和</ th>标签来表示。< th>标签与< d>标签的使用方法相同,但是< th>标签中的内容是加粗显示的
语法格式如下:
<table>
<caption>表格的标题</caption>
<tr>
<th>表格的表头</th>
<th>表格的表头</th>
...
</tr>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
...
</tr>
...
</table>
**注意:**在编写代码的过程中,结束标签不要忘记添加“/”
本实例使用< able>表格标签、< caption>表头标签、< th> 表头单元格标签、< r>行标签和< td>普通单元格标签,制作一张简单的课程表。首先通过< table>标签创建一张表格, 然后利用< caption> 表头标签制作表头文字“简单课程表”,最后使用< t>行 标签和< td>单元格标签输入课程表的内容
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>简单课程表</title>
</head>
<body>
<!--<table>为表格标记-->
<table align="center">
<!--<caption>表头标签-->
<caption>简单课程表</caption>
<!--<tr>为行标签-->
<tr>
<!--<th>为表头标记-->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<!--<td>为单元格-->
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>语文</td>
<td>数学</td>
<td>语文</td>
</tr>
<tr>
<td>体育</td>
<td>语文</td>
<td>英语</td>
<td>综合</td>
<td>语文</td>
</tr>
</table>
</body>
</html>
表格的高级应用
表格的样式
除基本表格外,表格还可以设置一些基本的样式属性,比如,可以设置表格的宽度、高度、对齐方式、插入图片等
语法格式如下:
<table>
<caption>表格的标题</caption>
<tr>
<th>表格的表头</th>
<th>表格的表头</th>
...
</tr>
<tr>
<td><img src="引入图片 路径"></td>
<td><img src="引入图片 路径"></td>
...
</tr>
...
</table>
下面通过在< td>单元格标签中插入< img>图像标签,制作- -张商 品推荐表格。首先通过< table>标签创建一个表格框架,然后利用< r>行标签和< td>单元格标签输入商品的文字内容,在最后一组< d>单元格标签中使用< img>图像标签,在单元格中插入具体的商品图片
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>商品表格</title>
</head>
<body>
<!--<table>为表格标记-->
<table align="center" width="66%" height="480" align="center">
<caption><b>商品表格</b></caption>
<tr height="36" bgcolor="#DD2727">
<th >潮流前沿</th>
<th >手机酷玩</th>
<th >品质生活</th>
<th >国际海购</th>
<th >个性推荐</th>
</tr>
<!--单元格加入介绍文字-->
<tr align="center">
<td>换新</td>
<td>手机馆</td>
<td>必抢</td>
<td>识货</td>
<td>囤货</td>
</tr>
<!--单元格加入介绍文字-->
<tr align="center">
<td>品牌精选新品</td>
<td>手机新品</td>
<td>巨超值 卖疯了</td>
<td>全球最热好货</td>
<td>居家必备</td>
</tr>
<!--单元格加入图片装饰-->
<tr align="center">
<td><img src="images/1.jpg" alt=""></td>
<td><img src="images/2.jpg" alt=""></td>
<td><img src="images/3.jpg" alt=""></td>
<td><img src="images/4.jpg" alt=""></td>
<td><img src="images/5.jpg" alt=""></td>
</tr>
</table>
</body>
</html>
表格的合并
在复杂的表格结构中,有些单元格是跨多个列的,有些单元格是跨多个行的,因而需要对这些单元格进行合并
语法格式如下:
<td colspan="跨的列数">
<td rowspan="跨的行数">
在该语法中,"跨的列数"是指这个单元格所跨的列数;"跨的行数"是指这个单元格在垂直方向上跨的行数
下面通过使用< t>行标签中的rowspan属性,将多行合并成一行, 制作一张较复 杂的课程表。首先使用< table>标签新建一个表格框架,然后通过< t>行标签和< d>单元格标签完成常规表格的制作,最后在希望合并的单元格标签< td>中添加属性rowspan,属性值为2,表示将两行合并为一行
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>复杂课程表</title>
</head>
<body style="background-image:url(images/bg.jpg) ">
<h1 align="center">课 程 表</h1>
<!--<table>为表格标记-->
<table align="center" border="1px" cellpadding="10%" >
<!--课程表日期-->
<tr bgcolor="#A5FEDE">
<th></th>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<!--课程表内容-->
<tr align="center">
<!--使用rowspan属性进行列合并-->
<td bgcolor="#FCD1C0" rowspan="2">上午</td>
<td bgcolor="#FCD1C0">1</td>
<td>数学</td>
<td>语文</td>
<td>英语</td>
<td>体育</td>
<td>语文</td>
</tr>
<!--课程表内容-->
<tr align="center">
<td bgcolor="#FCD1C0">2</td>
<td>音乐</td>
<td>英语</td>
<td>政治</td>
<td>美术</td>
<td>音乐</td>
</tr>
<!--课程表内容-->
<tr align="center">
<!--使用rowspan属性进行列合并-->
<td bgcolor="#FCD1C0" rowspan="2">下午</td>
<td bgcolor="#FCD1C0">3</td>
<td>舞蹈</td>
<td>化学</td>
<td>生物</td>
<td>历史</td>
<td>政治</td>
</tr>
<!--课程表内容-->
<tr align="center">
<td bgcolor="#FCD1C0">4</td>
<td>数学</td>
<td>体育</td>
<td>生物</td>
<td>历史</td>
<td>美术</td>
</tr>
</table>
</body>
</html>
表格的分组
表格可以使用< colgroup>标签对列进行样式控制,比如,设置单元格的背景颜色、字体大小等
**语法格式如下: **
<table>
<colgroup>
<col style="background-color:颜色值">
<col style="color:颜色值">
<colgroup>
<tr>
<td>单元格内的文字</td>
<td>单元格内的文字</td>
...
</tr>
...
</table>
在该语法中,使用< colgroup>标签对表格中的列进行控制,使用标签对具体的列进行控制
下面使用< colgroup>列分组标签制作一张学生联系方式表格,并且对列进行样式控制。首先使用< table>表格标签创建一个表格框架,然后通过< r>行标签和< d>单元格标签完成学生联系方式表格的制作,最后使用< colgroup>标签对每列单元格内容进行颜色设置
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>表格分组</title>
</head>
<body style="background-image:url(images/bg.png) ">
<h1 align="center">学生联系方式</h1>
<!--<table>为表格标记-->
<table align="center" border="1px" cellpadding="10%" >
<!--使用<colgroup>标签进行表格分组控制-->
<colgroup>
<col style="background-color: #7ef5ff">
<col style="background-color: #B8E0D2">
<col style="background-color: #D6EADF">
<col style="background-color: #EAC4D5">
</colgroup>
<!--表头信息-->
<tr>
<th>姓名</th>
<th>住所</th>
<th>联系电话</th>
<th>性别</th>
</tr>
<!--学生内容-->
<tr align="center">
<td>张刚</td>
<td>男生公寓208室</td>
<td>131****7845</td>
<td>男</td>
</tr>
<!--学生内容-->
<tr align="center">
<td>李凤</td>
<td>女生公寓208室</td>
<td>187****9545</td>
<td>女</td>
</tr>
<!--学生内容-->
<tr align="center">
<td>王强</td>
<td>男生公寓209室</td>
<td>154****5754</td>
<td>男</td>
</tr>
<!--学生内容-->
<tr align="center">
<td>宋玉</td>
<td>女生公寓208室</td>
<td>157****4512</td>
<td>女</td>
</tr>
</table>
</body>
</html>
div标签
< div>标签是用来为HTML文档的内容提供结构和背景的元素。< div>开始标 签和</ div>结束标签之间的所有内容都是用来构成这个块的,其中所包含标签的特性由< div>标签中的属性来控制,或者通过使用样式表格式化这个块来进行控制
div标签的介绍
div的全称为division,意为“分隔”。< div>标签被称为分隔标签,表示一块可以显示HTML的区域,用于设置字、图片、表格等的摆放位置。< div>标签是块级标签,需要结束标签</ div>
**说明:**块级标签又名块级元素( Block Element),与其对应的是内联元素( Inline Element),也叫行内标签,它们都是HTML规范中的概念
语法格式如下:
<div>
...
</div>
下面通过使用< div>标签对内容进行分组,制作-首古诗。 首先通过< p>段落标签完成古诗内容,然后将古诗标题和古诗内容分成两组,便于后期维护管理,使用< div>分组标签, 将古诗内容放在标签内
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>多标签分组--div</title>
</head>
<!--插入古诗背景图片-->
<body style="background:url(images/bg.png) no-repeat ">
<!--使用div标签对多个p标签进行分组-->
<div align="right">
<p>锄禾日当午,汗滴禾下土。</p>
<p>谁知盘中餐,粒粒皆辛苦。</p>
</div>
<!--不属于div分类标签的,未进行分组-->
<p align="right">--古诗--</p>
</body>
</html>
div标签的应用
在应用< div>标签之前,首先来了解< div>标签的属性。在页面中加入层时,会经常用到< div>标签的属性
**语法格式如下: **
<div id="value" align="value" class="value" style="value">
</div>
● id: < div>标签的id也可以说是它的名字,常与CSS样式相结合,实现对网页中元素的控制
● align: 用于控制< div>标签中元素的对齐方式,其值可以是lef center和right,分别用于设置元素的居左、居中和居右对齐
● class: 用于设置< div>标签中元素的样式,其值为CSS样式中的class选择符
● style: 用于设置< div>标签中元素的样式, 其值为CSS属性值,各属性值之间使用分号分隔
下面通过使用< div>标签,制作一份个人简历。首先不使用< div>标签,通过< hl>标签 和< h5>标签显示个人简历,然后使用< div>标签将“个人信息”和“教育背景”进行分组,以便更好地对分组内容进行样式控制等
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>div--个人简历</title>
</head>
<!--插入背景图片-->
<body style="background-image:url(images/bg.jpg) ">
<br/><br/><br/><br/>
<!--使用div标签进行分组-->
<div>
<h1><img src="images/1.png"> 个人信息(Personal Info)</h1>
<hr/>
<h5>姓名:李某 出生年月:1996.05</h5>
<h5>民族:汉 身高:177cm</h5>
</div>
<br>
<!--使用div标签进行分组-->
<div>
<h1><img src="images/2.png"> 教育背景(Education)</h1>
<hr/>
<h5>2005.07-2009.06 师范大学 市场营销(本科)</h5>
<h5>2009.07-2012.06 师范大学 电子商务(研究生)</h5>
<h5>2012.07-2015.06 师范大学 电子商务(博士)</h5>
</div>
</body>
</html>
span标签
HTML只是赋予内容的手段,大部分HTML标签都有其意义(如< p>标签用于创建段落、< h1>标签用于创建标题等),然而< spam>和< div>标签似乎没有任何内容上的意义,但实际上,当与CSS结合起来后,其应用范围就非常广泛了
span标签的介绍
< spam>标签和< div>标签非常类似,是HTML中组合用的标签,可以作为插入CSS这类风格的容器,或者插入class id 等语法内容的容器
**语法格式如下: **
<span>
...
</span>
下面通过使用< span>标签,制作- 一个“我爱你”各国语言版本的便签。首先通过< p>段落标签将便签的内容显示出来,然后在< p>标签内 部使用< span>标签,将需要单独分组的内容放入< span>标签中,进行样式控制
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>单标签分组--span</title>
</head>
<!--插入背景图片-->
<body style="background:url(images/bg.jpg) no-repeat ">
<!--界面样式控制-->
<br><br><br><br><br><br><br><br><br><br><br>
<!--使用<span>标签对单标签进行分组-->
<p><span style="color:red">“我爱你”</span>这句话,不同的语言是怎么说的呢?英语中是<span style="color:red">"I love you"</span>,
日语中是<span style="color:red">"阿娜塔农扣头啊西戴斯"</span>,
韩语中是<span style="color:red">"擦哪嘿"</span>。</p>
</body>
</html>
span标签的应用
< span>标签是行内标签, < span>标签的前后不会换行,它没有结构的意义,纯粹是为了应用样式。当其他行内元素都不合适的时候,请使用< span>标签
下面通过使用< span>标签,实现一则公司介绍短文的页面展示。首先使用< table>标签创建一个表格框架,然后使用< p>段落标签显示公司介绍短文,最后通过< spa>标签将短文中的内容进行分组,并将强调的内容显示为红色或链接等
<!DOCTYPE html>
<html>
<head>
<!--指定页面编码格式-->
<meta charset="UTF-8">
<!--指定页头信息-->
<title>span应用</title>
</head>
<!--插入背景图片-->
<body style="background:url(images/bg.jpg) no-repeat ">
<!--界面样式控制-->
<br><br><br><br><br><br><br>
<!--使用<span>标签对单标签进行分组-->
<p><span style="font-size: 24px;color: red">ooxx学院</span>,是ooxx科技有限公司倾力打造的在线实用技能学习平台,
该平台于2022年正式上线,主要为学习者提供海量、优质的<span><a href="http://www.baidu.com">课程</a></span>,课程结构严谨,用户可以根据自身的学习程度,
自主安排学习进度。<span style="color:black"><b>我们的宗旨是,为编程学习者提供一站式服务,培养用户的编程思维。</b></span></p>
</body>
</html>