HTML笔记-- 表格标签

HTML笔记-- 表格标签

标签（空格分隔）： HTML

---

表格标签（*******）

• 作用：可以对数据进行格式化操作，是数据显示更加清晰；
• 表示方法：
  • 表示一个表格行和列属性定义在这对标签内部！
    • border: 表示表格个线粗细有无；0则表示没有表格线；
    • bordercolor：表示表格线的颜色
    • cellspancing： 表示单元格之间的距离，0则表示单元格的线重叠；
    • width：表示每个单元格的宽度（一行中）
    • height：表示每个单元格的高度（一行中）
  • 表示行数有几行就定义几个tr
    • align：设置每个单元格里资源位置，left（默认值）； right ；center
  • 表示列数定义在行标签内部表示每一行有多少列；当然总列数有最大值决定；
  • 可以当使用，他的效果是默认居中加粗
  • 画法技巧：首先数要画得单元格有多少行，然后每一行中有多少列；
  • 例如实现如下效果：
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    姓名	张三	王五	李四
    年龄	12	13	14

代码如下：

    

        
姓名
        
张三
        
王五
        
李四
    
    

        
年龄
        
12
        
13
        
14
    

这里由于编译器的原因导致显示方式不正确，复制代码用浏览器打开就可以看到实际效果。

• 关于合并单元格：
  • 合并列:比如实现一个单元格在一行中站两列的位置。
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    人员信息
    姓名	张三	王五	赵四
    年龄	12	13	14

代码如下：

    
人员信息


    
姓名
    
张三
    
王五
    
李四


    
年龄
    
12
    
13
    
14

 
 
 
 
即跨列属性在td标签中设置:"人员信息"
 
 
 
  
合并行操作
 比如实现如下效果
 













 
 
年龄
 
1
 
1
 
 
 
姓名
 
张三
 
 
 
年龄
 
12
 
 
 
 
 
 
代码如下
 
 


    
年龄
    
1
    
1


    
姓名
    
张三


    
年龄
    
12

 
 
 
 
即在第一行的第三个单元格即td标签的属性中设置rowspan="3"
 可以看出所有的跨行跨列操作都是在单元格td标签中设置，关键是：
 

 
实现跨行操作：必须先算清一共有几行，如上述例子一共有三行；就有三个tr
 
 第一行中有3列，第二和地三行中有2列
 
就在第一行第三个单元格设置rowspan属性
 
 跨列操作同理；