day5-表格标签

上一部分主要介绍关于列表标签，列表标签分为无序、有序、定义，各自特点和属性及应用场景
地址：http://www.jianshu.com/p/e8e5e011177b

今天要介绍关于表格标签及其属性宽度高度、对齐方式、内边距外边距（属性部分为了解内容，在以后的开发中样式均由CSS编写）、表格标签的其他属性caption、th等、表格的结构tbody（开发中不会主动使用，系统会自动添加）等、表格的合并

如果有什么笔记中有什么错漏，或者提问技术问题都可以留言，大家进行经验分享 ---- 喵

表格标签

• 历史转折点：过去几年的网站大部分都是使用表格标签制作的，现在被div+css取代了

  
  
  

  以前的网站.png

• 作用：给一堆数据添加表格语义

  • 表格：一种数据的展现形式，当数据量非常大的时候，表格被认为是最清晰的一种展现形式

• 格式：
  

  
  
  
  
  

• 属性

  • tr：表格中的一行数据
  • td：一行数据中的某个单元格

• 练习：表格2行3列

表格基本使用.png

• 注意点：
  • 1️⃣表格标签有一个边框属性，默认是0，要看到边框必须设置该属性
  • 2️⃣table和tr td是一个整体，不会打单独出现

表格标签的属性

1. 高度宽度

• 可作用在table标签、tr标签和td标签上
• 注意点：
  • 1️⃣高度和宽度默认是按照内容尺寸来调整，也可以给table标签width和height属性手动设置---设置height时候会报警告
  • 2️⃣给td标签设置width和height属性，不会影响整个表格的宽度和高度

2. 水平对齐和垂直对齐

• 1）水平对齐align：可作用在table标签、tr标签和td标签上
• 注意点
  • 1️⃣table标签设置align属性，可以设置表格水平方向的对齐方式：left（默认）、center、right
  • 2️⃣tr标签设置align属性，可以设置该行所有单元格内容水平方向的对齐方式：left（默认）、center、right
  • 3️⃣td标签设置align属性，可以设置该单元格内容水平方向的对齐方式：left（默认）、center、right-----同时设置td和tr的水平对齐方式会按照td设置方式显示
• 2）垂直对齐valign：只能给tr标签和td标签
• 注意点：
  • 1️⃣table标签设置valign属性，无效
  • 2️⃣tr标签设置align属性，可以设置该行所有单元格内容垂直方向的对齐方式：top、center（默认）、bottom
  • 3️⃣td标签设置align属性，可以设置该单元格内容垂直方向的对齐方式：top、center（默认）、bottom-----同时设置td和tr的垂直对齐方式会按照td设置方式显示

3. 外边距和内边距

• 只能给table标签使用
• 外边距cellspacing：单元格与单元格之间的距离，默认是2px
• 内边距：内容和单元格边框之间的距离，默认是1px

练习代码

    

        
1.1
        
1.2
        
1.3
    
    

        
2.1
        
2.2
        
2.3
    

细线表格

实现方式

• 1.取消外边距cellspacing="0"，无法达到效果，只是把边框和外边距合成了一条线
• 2.设置背景颜色，再设置外边距
• 注意点：
  • table标签、tr标签、td标签都可以设置bgcolor
  • 仅作了解，设置样式使用CS
• 代码

    
1.1
    
1.2


    
2.1
    
2.2

表格标签的其他标签

• 1）表格标题caption，可以自动相对于整个表格宽度居中
• 注意点：
  • 1️⃣一定要写在table标签里面才有效
  • 2️⃣一定要紧跟着table标签后面
• 2）每一列标题th标签（通常在第一行），设置之后会自动加粗并且居中显示
• 小结：
  • 表格中有两种单元格
    • th：用来存储当前列的标题
    • td：用来存储数据

练习

    

        
        
今日小说排行榜
    
    

        
        
排名
        
关键词
        
趋势
        
今日搜索
        
最近七日
        
相关链接

    
    

        
1
        
暴走大事件
        

            ![](zan.gif)
        
        
623557
        
4088311
        

            贴吧
            图片
            百科

        
    
    

        
1
        
暴走大事件
        

            ![](zan.gif)
        
        
623557
        
4088311
        

            贴吧
            图片
            百科

        
    
    

        
1
        
暴走大事件
        

            ![](cai.gif)
        
        
623557
        
4088311
        

            贴吧
            图片
            百科

        
    
    

        
1
        
暴走大事件
        

            ![](cai.gif)
        
        
623557
        
4088311
        

            贴吧
            图片
            百科

        
    
    

        
1
        
暴走大事件
        

            ![](zan.gif)
        
        
623557
        
4088311
        

            贴吧
            图片
            百科

        
    
    

        
1
        
暴走大事件
        

            ![](zan.gif)
        
        
623557
        
4088311
        

            贴吧
            图片
            百科
        
    

练习表格图

表格的结构（了解）

• 以上内容的表格标签内容并不完整，若在浏览器中打开网页，里面的table标签后面会自动添加tbody标签等；但是在开发中不需要写完整的，因为浏览器会自动帮我们添加这些tbody这些标签
• 为了提升表格的语义，对表格中存储的数据进行了分类，可以分为四类
• 1.表格标题caption
• 2.表头信息（每列标题）thead中有tr th
• 3.主题信息（单元格数据）td
• 4.页尾信息（根据数据计算出来的信息）tfoot中有tr td
• 注意点：
  • 1️⃣如果我们没有编写tbody系统会自动添加tbody
  • 2️⃣如果指定了thead和tfoot，在修改表格高度的时候，thead和tfoot有默认的高度，不会随之改变

练习

    
学生信息
    

    

        
姓名
        
年龄
    
    
    

    

        
张三
        
20
    
    

        
李四
        
30
    
    
    

    

        
2
        
25
    
    

练习-表格的结构

单元格合并

• 1.水平方向的单元格合并
  • td标签添加一个colspan属性，把某一单元格当做多个单元格
• 2.垂直方向的单元格合并
  • td标签添加一个rowspan属性，把某一单元格当做多个单元格
• 注意点：
  • 1️⃣被合并的单元格不需要再写标签td
  • 2️⃣单元格合并永远是向后和向下！！

练习1

单元格合并

练习2

![单元格练习2](http://upload-images.jianshu.io/upload_images/2558437-a4ca8f1ec0a5d20d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

快捷键

• 移动代码块：command + shift + 上下方向键
• 快速合并展开代码：command + 加号/减号 ---光标位置---单个标签
• 快速合并展开代码：command + shift +加号/减号 ---光标选中多个标签
• 快速新启一行：shift + 回车