html、css、js入门-5：HTML的表格

 

 

表格

  表格的作用

   . 表格通常用来组织结构化的信息
   . 表格是一些被称作单元格的矩形框按照从左到右，从上到下的顺序排列在一起而形成的
   . 表格的数据保存在单元格里

       -- 显示表格数据
       -- 设置也慢慢布局

 

 

创建表格

    . 定义表格 : 使用成对的<table></table> 标记
    . 创建表行 : 使用成对的<tr></tr> 标记
   
    . 创建单元格: 使用成对的<td></td>标记

 
   <table border="1">
       <tr>
          <td>第1行，第1列</td>
          <td>第1行，第2列</td>
       </tr>
 
       <tr>
          <td>第2行，第1列</td>
          <td>第2行，第2列</td>
       <tr>
   </table>

    
     页面显示:

         第1行，第1列   第1行，第2列
         第2行，第1列   第2行，第2列

 

 

 

表格的常用属性

    . border
    . width/height
    . align
    . cellpadding:单元格边框与内容之间的间距
    . cellspacing:单元格之间的间距

 

 

表格标题 <caption>

   .  使用 <caption> 元素为表格定义标题
        -- 默认情况下，标题将在表格上方居中显示

   .  <caption> 标签必须紧随<table> 标签之后，
     且只能对每个表格定义一个标题

    <table border="1">
        <caption>我的表格</caption>
        <tr>
           <td>第1行，第1列</td>
           <td>第1行，第2列</td>
        </tr>
    </table>

 

      页面显示:

                      我的表格
             第1行，第1列   第1行，第2列
             

 

 

行分组

    . 表格可以划分3个部分: 表头、表主体和表尾

    . 表头行分组 : <thead></thead>
    . 表主体行分组: <tbody></tbody>
    . 表尾行分组:   <tfoot></tfoot>
 
        -- 包含一个或者多个<tr> 元素

 

不规则表格

   . 设置单元格<td> 的跨行或者跨列属性
   . 跨列 : colspan

        -- 水平方向延伸单元格，值为一正整数，代表此单元格
            水平延伸的单元格数    

   . 跨行 : rowspan          
        
        -- 垂直方向延伸单元格，值为一正整数，代表此单元格
            垂直延伸的单元格数

  例如:  A单元格跨行  ，B单元格跨列

                  B
            A
                C  D

 

表格的嵌套：

   . 嵌套表格
        -- 在单元格中放置另外一个表在表单元格
        -- 即<td> 元素中再包含<table> 元素

   . 使用嵌套的表格以设计复杂表格或者复杂布局

   
       例如:  嵌套的表格

           页面显示:    
       
              1    2
              3   a  b

 

表格

      使用表格为 html 文档添加数据表格