本文共 7404 字，大约阅读时间需要 24 分钟。

基本表格

表格是用于排列内容的最佳手段。在HTML页面中，有很多页面都是使用表格进行排版的。基本表格是由< able>标签、< t>标签和< d>标签组成的。通过使用< table>标签 ,可以制作课程表、成绩单等常见的表格

基本表格的制作

表格标签是< table>… < /able>,表格的其他标签需要在表格的开始标签< table>和结束标签< tabl>之间才有效

标签	含义
	表格标签
	行标签
	单元格标签

语法格式如下:

   
...
...
 ...
    
     
      
单元格内的文字
      
单元格内的文字
     
     
      
单元格内的文字
      
单元格内的文字
     
    
   

在该语法中，< table> 和</ table>标签分别表示一一张表格的开始和结束;而< tr> 和</ t>标签则分别表示表格中一行的开始和结束，在表格中包含几组< t>…</ t>,就表示该表格有几行;< td>和</ td>标签分别表示一一个单元格的开始和结束，也就是一行中包含了几列

接下来巧用< table>表格标签、< tr>行 标签和< d>单元格标签，制作一张考试成绩表。 首先通过< table>表格标签创建一个表格框架，然后通过< t>行标签创建表格中的一行，最后使用< td>单元格标签输入具体的内容

    
       
       
       
基本表格--考试成绩表
   
   
                
     
                            
姓名
              
语文
              
数学
              
英语
         
         
                            
王佳
              
94分
              
89分
              
56分
         
         
              
李翔
              
76分
              
85分
              
88分
         
         
              
张莹佳
              
89分
              
86分
              
97分
         
    
   

常见错误

在开始标签与属性之间漏加空格，比如，把<lable agn="enter>写成<ablalin=“center”>,导致浏览器无法识别< table>标签,从而导致页面布局错乱。例如，在下面代码的第1行, <table align="center”>就写成了<ablalign=“enter”>*

       
                
            姓名        语文        数学        英语    
    
   

表头的设置

表格中还有一种特殊的单元格，称为表头。表头一般位于表格第一行， 用来表明该列的内容类别，用< th>和</ th>标签来表示。< th>标签与< d>标签的使用方法相同,但是< th>标签中的内容是加粗显示的

语法格式如下:

   
        ...    
        ...    
    ...
        
     表格的标题
    
        
     
              
表格的表头
               
表格的表头
     
         
              
单元格内的文字
              
单元格内的文字
     
    
   

**注意:**在编写代码的过程中，结束标签不要忘记添加“/”

本实例使用< able>表格标签、< caption>表头标签、< th> 表头单元格标签、< r>行标签和< td>普通单元格标签，制作一张简单的课程表。首先通过< table>标签创建一张表格， 然后利用< caption> 表头标签制作表头文字“简单课程表”，最后使用< t>行 标签和< td>单元格标签输入课程表的内容

    
       
       
       
   
   
                
     简单课程表
    
                
     
                            
星期一
              
星期二
              
星期三
              
星期四
              
星期五
         
         
                            
数学
              
语文
              
数学
              
语文
              
数学
         
         
              
语文
              
数学
              
语文
              
数学
              
语文
         
         
              
体育
              
语文
              
英语
              
综合
              
语文
         
    
   

表格的高级应用

表格的样式

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

语法格式如下:

   
        ...    
        ...    
    ...
        
     表格的标题
    
        
     
              
表格的表头
              
表格的表头
     
         
              
              
     
    
   

下面通过在< td>单元格标签中插入< img>图像标签,制作- -张商 品推荐表格。首先通过< table>标签创建一个表格框架,然后利用< r>行标签和< td>单元格标签输入商品的文字内容,在最后一组< d>单元格标签中使用< img>图像标签，在单元格中插入具体的商品图片

    
       
       
       
   
   
        
     商品表格
    
        
     
              
潮流前沿
              
手机酷玩
              
品质生活
              
国际海购
              
个性推荐
         
                  
              
换新
              
手机馆
              
必抢
              
识货
              
囤货
         
                  
              
品牌精选新品
              
手机新品
              
巨超值 卖疯了
              
全球最热好货
              
居家必备
         
                  
              
              
              
              
              
         
    
   

表格的合并

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

语法格式如下:

在该语法中,"跨的列数"是指这个单元格所跨的列数;"跨的行数"是指这个单元格在垂直方向上跨的行数

下面通过使用< t>行标签中的rowspan属性，将多行合并成一行, 制作一张较复 杂的课程表。首先使用< table>标签新建一个表格框架，然后通过< t>行标签和< d>单元格标签完成常规表格的制作，最后在希望合并的单元格标签< td>中添加属性rowspan,属性值为2,表示将两行合并为一行

    
       
       
       
课 程 表
   
   
                
     
              
              
              
星期一
              
星期二
              
星期三
              
星期四
              
星期五
         
                  
                            
上午
              
1
              
数学
              
语文
              
英语
              
体育
              
语文
         
                  
              
2
              
音乐
              
英语
              
政治
              
美术
              
音乐
         
                  
                            
下午
              
3
              
舞蹈
              
化学
              
生物
              
历史
              
政治
         
                  
              
4
              
数学
              
体育
              
生物
              
历史
              
美术
         
    
   

表格的分组

表格可以使用< colgroup>标签对列进行样式控制,比如，设置单元格的背景颜色、字体大小等

**语法格式如下: **

   
        ...    
    ...
                                                          
     
              
单元格内的文字
               
单元格内的文字
     
    
   

在该语法中，使用< colgroup>标签对表格中的列进行控制，使用标签对具体的列进行控制

下面使用< colgroup>列分组标签制作一张学生联系方式表格，并且对列进行样式控制。首先使用< table>表格标签创建一个表格框架,然后通过< r>行标签和< d>单元格标签完成学生联系方式表格的制作，最后使用< colgroup>标签对每列单元格内容进行颜色设置

    
       
       
       
学生联系方式
   
   
                                                                                            
     
              
姓名
              
住所
              
联系电话
              
性别
         
                  
              
张刚
              
男生公寓208室
              
131****7845
              
男
         
                  
              
李凤
              
女生公寓208室
              
187****9545
              
女
         
                  
              
王强
              
男生公寓209室
              
154****5754
              
男
         
                  
              
宋玉
              
女生公寓208室
              
157****4512
              
女
         
    
   

div标签

< div>标签是用来为HTML文档的内容提供结构和背景的元素。< div>开始标 签和</ div>结束标签之间的所有内容都是用来构成这个块的，其中所包含标签的特性由< div>标签中的属性来控制，或者通过使用样式表格式化这个块来进行控制

div标签的介绍

div的全称为division,意为“分隔”。< div>标签被称为分隔标签,表示一块可以显示HTML的区域，用于设置字、图片、表格等的摆放位置。< div>标签是块级标签,需要结束标签</ div>

**说明:**块级标签又名块级元素( Block Element),与其对应的是内联元素( Inline Element),也叫行内标签，它们都是HTML规范中的概念

语法格式如下:

   
        ...
   

下面通过使用< div>标签对内容进行分组，制作-首古诗。 首先通过< p>段落标签完成古诗内容，然后将古诗标题和古诗内容分成两组，便于后期维护管理，使用< div>分组标签, 将古诗内容放在标签内

    
       
       
       
   
   
   
    
    
锄禾日当午，汗滴禾下土。
    
    
谁知盘中餐，粒粒皆辛苦。
   
   
--古诗--

div标签的应用

在应用< div>标签之前，首先来了解< div>标签的属性。在页面中加入层时，会经常用到< div>标签的属性

**语法格式如下: **

● id: < div>标签的id也可以说是它的名字,常与CSS样式相结合,实现对网页中元素的控制

● align: 用于控制< div>标签中元素的对齐方式，其值可以是lef center和right,分别用于设置元素的居左、居中和居右对齐

● class: 用于设置< div>标签中元素的样式，其值为CSS样式中的class选择符

● style: 用于设置< div>标签中元素的样式， 其值为CSS属性值，各属性值之间使用分号分隔

下面通过使用< div>标签，制作一份个人简历。首先不使用< div>标签，通过< hl>标签 和< h5>标签显示个人简历,然后使用< div>标签将“个人信息”和“教育背景”进行分组，以便更好地对分组内容进行样式控制等

    
       
       
       
   
   
   
    
 个人信息（Personal Info）
    
    
    
姓名：李某     出生年月：1996.05
    
    
民族：汉        身高：177cm
   
   
   
    
    
 教育背景（Education）
    
    
    
    
2005.07-2009.06   师范大学    市场营销（本科）
    
    
2009.07-2012.06   师范大学    电子商务（研究生）
    
    
2012.07-2015.06   师范大学    电子商务（博士）
   

span标签

HTML只是赋予内容的手段，大部分HTML标签都有其意义(如< p>标签用于创建段落、< h1>标签用于创建标题等),然而< spam>和< div>标签似乎没有任何内容上的意义，但实际上,当与CSS结合起来后，其应用范围就非常广泛了

span标签的介绍

< spam>标签和< div>标签非常类似，是HTML中组合用的标签,可以作为插入CSS这类风格的容器，或者插入class id 等语法内容的容器

**语法格式如下: **

	...

下面通过使用< span>标签,制作- 一个“我爱你”各国语言版本的便签。首先通过< p>段落标签将便签的内容显示出来,然后在< p>标签内 部使用< span>标签,将需要单独分组的内容放入< span>标签中，进行样式控制

    
       
       
       
   
   
   
“我爱你”这句话，不同的语言是怎么说的呢？英语中是"I love you",    日语中是"阿娜塔农扣头啊西戴斯"，    韩语中是"擦哪嘿"。

span标签的应用

< span>标签是行内标签, < span>标签的前后不会换行，它没有结构的意义，纯粹是为了应用样式。当其他行内元素都不合适的时候，请使用< span>标签

下面通过使用< span>标签，实现一则公司介绍短文的页面展示。首先使用< table>标签创建一个表格框架，然后使用< p>段落标签显示公司介绍短文，最后通过< spa>标签将短文中的内容进行分组，并将强调的内容显示为红色或链接等

    
       
       
       
   
   
   
ooxx学院，是ooxx科技有限公司倾力打造的在线实用技能学习平台，    该平台于2022年正式上线，主要为学习者提供海量、优质的课程，课程结构严谨，用户可以根据自身的学习程度，    自主安排学习进度。我们的宗旨是，为编程学习者提供一站式服务，培养用户的编程思维。

转载地址：http://dhnwi.baihongyu.com/