表格与 < div> 标签

最新推荐文章于 2023-01-03 10:55:02 发布

Blank memory

最新推荐文章于 2023-01-03 10:55:02 发布

阅读量1.1k

点赞数 3

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_43395428/article/details/105473374

版权

HTML 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

基本表格

表格是用于排列内容的最佳手段。在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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AniDLHIg-1586686065671)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web1.png)]$

常见错误

在开始标签与属性之间漏加空格，比如，把<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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lG9YfNfs-1586686065672)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web2.png)]$

表头的设置

表格中还有一种特殊的单元格，称为表头。表头一般位于表格第一行，用来表明该列的内容类别，用< 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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T5XhfCaR-1586686065673)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web3.png)]$

表格的高级应用

表格的样式

除基本表格外，表格还可以设置一些基本的样式属性,比如,可以设置表格的宽度、高度、对齐方式、插入图片等

语法格式如下:

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1RuDq4sE-1586686065673)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web4.png)]$

表格的合并

在复杂的表格结构中,有些单元格是跨多个列的，有些单元格是跨多个行的，因而需要对这些单元格进行合并

语法格式如下:

<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">课&nbsp;程&nbsp;表</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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ORv1jwZq-1586686065674)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web5.png)]$

表格的分组

表格可以使用< 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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-psYRshdL-1586686065675)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web6.png)]$

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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dmseR6jL-1586686065675)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web7.png)]$

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">&nbsp;个人信息（Personal Info）</h1>
<hr/>
    <h5>姓名：李某   &nbsp;&nbsp;出生年月：1996.05</h5>
    <h5>民族：汉     &nbsp;&nbsp;&nbsp;身高：177cm</h5>
</div>
<br>
<!--使用div标签进行分组-->
<div>
    <h1><img src="images/2.png">&nbsp;教育背景（Education）</h1>
    <hr/>
    <h5>2005.07-2009.06 &nbsp;&nbsp;师范大学  &nbsp;&nbsp;市场营销（本科）</h5>
    <h5>2009.07-2012.06 &nbsp;&nbsp;师范大学  &nbsp;&nbsp;电子商务（研究生）</h5>
    <h5>2012.07-2015.06 &nbsp;&nbsp;师范大学  &nbsp;&nbsp;电子商务（博士）</h5>
</div>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Hxk6SfeG-1586686065676)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web8.png)]$

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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OfzzEQUW-1586686065676)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web9.png)]$

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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pwK9Af7e-1586686065677)(C:\Users\Jsck\Desktop\Web+Html+Css+JavaScript\第 1 篇：HTML 5 篇\4.表格与 div 标签\web10.png)]$

Blank memory

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
表格与 < div> 标签

表格与div标签基本表格表格的高级应用div标签span标签基本表格的制作表头的设置表格的样式表格的合并表格的分组div标签的介绍div标签的应用span标签的介绍span标签的应用基本表格表格是用于排列内容的最佳手段。在HTML页面中，有很多页面都是使用表格进行排版的。基本表格是由< able>标签、< t>标签和< d>标签组成的。通过使用< ta...
复制链接

扫一扫

专栏目录