HTML表格

HTML学习笔记

目录

一，表格标签

1.表格的基本标签

2.标签的基本属性

3.表格标题和表头单元格标签

4.表格的结构标签（了解）

5.合并单元格

一，表格标签

1.表格的基本标签

• 场景：在网页中以行＋列的单元格的方式整齐展示和数据，如：学生成绩单
• 基本标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

2.标签的基本属性

• 场景：展示效果
• 相关属性

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

• 注意点：实际开发对于样式效果推荐使用css设置

3.表格标题和表头单元格标签

• 场景：在表格中表示整体大标题和一列小标题
• 其他标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示。

4.表格的结构标签（了解）

thead，tbody，tfoot。

  

    
学生成绩单
      

        

        
姓名
        
成绩
        
评语
      
   
      

        

        
王一
        
100
        
很好
      
      

        
王二
        
99
        
好
      
    
      

        

        
总结
        
good
        
very good
      
    
  

5.合并单元格

步骤：

1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁

• 上下合并，只保留最上的，删除其他的
• 左右合并，只保留最左的，删除其他的

     3.给保留的单元格设置：跨行合并或者跨列合并

属性名	属性值	说明
rowspan	合并单元格数目	跨行合并，将多行单元格垂直合并
colspan	合并单元格数目	跨列合并，将多列单元格水平合并

      
        
        王一
        100
        很好
      
      
        王二
        好