html基础 表格的相关属性使用

1.1表格的基本标签
   语法结构：/*整体包裹部分,包裹多个tr *//* 表格的每一个行，包裹td *//*表格的单元格,包裹内容 */
         
               
      
                      
               

                     
           
2.1表格相关属性
属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度 
html结构代码：
         '1' width='300' height='300'> /**/
 
          

            姓名
            成绩
            评语
          

          

            小哥哥
            100分
            小哥哥真帅
          

          

            小姐姐
            100分
            小姐姐真漂亮
          

          

            总结
            郎才女貌
            郎才女貌

效果图：

 2.2 表格标题和表头单元格；表格标题：是表格上方的标题； 表头单元格：表格内部第一行加粗的文字

html 结构代码
    '1' width='300' height='300'>
          /*caption 表格标题*//*th 是表头单元格*/
学生成绩单
  
          

            姓名  
            成绩
            评语
          

          

            小哥哥
            100分
            小哥哥真帅
          

          

            小姐姐
            100分
            小姐姐真漂亮
          

          

            总结
            郎才女貌
            郎才女貌
          

      


注意：caption标签一定要写table标签内部
     th标签书写在tr标签内部、替换第一个行的td
3.1 表格的结构标签（了解，可有可无）
标签 作用
thead 表格头部
tbody 表格身体
tfoot 表格底部 

用于包裹tr标签的
4.1合并单元格

 （1）单元格合并原则 ：
           1。上下合并 -->只保留最上面的，删除其他
           2.  左右合并 -->只保留最左边的，删除其他
 
 （2）给保留的单元格设置：跨行合并（rowspan='2' 2表示合并两行） 跨行合并（colspan='2'）

注意：不能夸结构合并的，也就thead和tbody两个结构不能跨过合并
html 结构代码
      '1' width='300' height='300'>
          
学生成绩单

          

            姓名
            成绩
            评语
          

          

            小哥哥
            "2">100分
            小哥哥真帅
          

          

            小姐姐
            
            小姐姐真漂亮
          

          

            总结
            "2">郎才女貌
html基础

相关

HTML 基础及超链接练习

标签