H5前端开发学习笔记——0x05表格标签

本节大纲

• 课时37表格标签基本使用(理解)
• 课时38表格标签的属性(了解)
• 课时39细线表格(理解)
• 课时40表格中的其它标签(理解)
• 课时41表格的结构(了解)
• 课时42单元格合并(理解)
• 课时43表格练习(了解)

表格标签

其实在过去，表格标签用的非常多，绝大多是web都是用它做的

作用

为一对数据添加表格语义，对很大数据时，table将会展示的非常清晰

格式

• table：一对table标签就是一个表格
• tr：行
• td：列

ps:默认表格边框宽度为0，是看不见的，需要给table添加border属性

表格标签的属性

• 水平对齐（table、tr、tb）垂直对齐（tr、td）
  • align属性控制水平位置
  • valign属性控制垂直位置
• 内外边距（table）
  • 外边距：单元格与单元格之间的距离
    • cellspacing属性控制距离，默认情况下，其间的距离是2
  • 内边距：文字距离单元格边框的距离
    • cellpadding属性控制距离，默认情况下，其间的距离是1
• 宽度高度（table、td）
  • 可以使用width/height指定，未指定的将按照内容进行自动适配
  • 如果给td修改高宽，不会影响整个表格的高度和宽度

细线表格

使用bgcolor属性来实现

• 新建表格table
• 先把table的bgcolor改为黑色
• 然后把行的bgcolor改为白色
• 然后把cellspacing改为1px

注意点：

• table、tr、td标签都支持bgcolor属性。但以上内容仅作为了解，还是老规矩，css管样式！！

表格中的其他标签

• caption标签，表格的专用标题标签
  • 要写在table标签中，否则无效
• th标签，标题单元格标签，只要将当前列的标题存储在其中，就会自动将文本居中加粗
  • 到此，我们知道了两种单元格，一个是td，一个th；td存数据，th放列标题的

表格的结构

表格要是较为复杂，为了便于管理，我们可对表格分类，共分为四类

• 表格的标题
• 表格的表头信息
• 表格的主体信息
• 表格的页尾信息

表格的完整结构

    
表格标题
    

        

            
每一列的标题
        
    
    

        

            
内容

        
    
    

        

            
内容

        
    

caption 表格标题

thead 表头信息

tbody 主题内容

tfoot 表尾信息

注意点：

• 若没有编写tbody，系统会自动添加
• 若指定了thead和tfoot，他们都是有自己默认的高度的，不会随这改变table属性而变化
• 企业开发是不会用这些东西的

单元格合并

1. 水平方向的合并
   • 添加colspan="n"属性
   • 由于一个当n个用，那就应该删除这行多出来的单元格
   • 单元格合并都是向后或者向下合并，而不能向前或者向上合并
2. 垂直方向的合并
   • 添加rowspan="n"属性
   • 同上，记得删除多出来的单元格