非零基础自学前端最后一遍一 HTML+CSS 12 HTML高级元素 12.6 table的单元格合并-跨行跨列

清疚 2024-03-24 08:23 9阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  12 HTML高级元素
         *   *  12.6 table的单元格合并-跨行跨列
             *   *  12.6.1 单元格合并
                 *  12.6.2 如何使用单元格合并

![在这里插入图片描述][9300109889914d42b0ebef50acd8e8b1.png_pic_center]

#### 一 HTML+CSS ####

#### 12 HTML高级元素 ####

##### 12.6 table的单元格合并-跨行跨列 #####

###### 12.6.1 单元格合并 ######

*  在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的
    
     *  一个单元格可能会跨多行或者多列来使用;
 *  比如下面的表格

![在这里插入图片描述][fe5eab3a14fc4b5fa4c31004177abf41.png_pic_center]

这个时候我们就要使用单元格合并来完成;

###### 12.6.2 如何使用单元格合并 ######

*  单元格合并分成两种情况:
    
     *  跨列合并: 使用colspan
        
         *  在最左边的单元格写上colspan属性, 并且省略掉合并的td;
        
        ![在这里插入图片描述][13fbdf513ad24dea85ab2d3bad9ea121.png_pic_center]
     *  跨行合并: 使用rowspan
        
         *  在最上面的单元格协商rowspan属性, 并且省略掉后面tr中的td;
        
        ![在这里插入图片描述][6babd56d4a204a2cb762354183d75eee.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        table {
          
          border-collapse: collapse;
          text-align: center;
        }
    
        td {
          
          border: 1px solid red;
          padding: 10px 20px;
        }
      </style>
    </head>
    
    <body>
    
      
    
      
      
    
      
      <table>
        <tr>
          <td rowspan="2">1-1</td>
          <td>1-2</td>
        </tr>
        <tr>
          <td>2-2</td>
        </tr>
      </table>
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][b85a0f3c376044fc8be4fae89559d833.png_pic_center]

[9300109889914d42b0ebef50acd8e8b1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/d83a429d933343b08eedd9e60d4cbff8.png
[fe5eab3a14fc4b5fa4c31004177abf41.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/5f3c59b922ff40e58efec451f5a55f44.png
[13fbdf513ad24dea85ab2d3bad9ea121.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/dc247f87547f4b1fb2927d8dcd125ca0.png
[6babd56d4a204a2cb762354183d75eee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/a0438a04f6a1447584fcb0cd500c541c.png
[b85a0f3c376044fc8be4fae89559d833.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0138d1974b5b4cc39273b48eb7d28893.png