HTML table标签的行列合并

最新推荐文章于 2024-07-12 00:07:26 发布

追光在路上

最新推荐文章于 2024-07-12 00:07:26 发布

阅读量3.4k

点赞数

分类专栏：前端文章标签： html5

本文链接：https://blog.csdn.net/weixin_43320310/article/details/124763703

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何使用HTML的table标签进行行列合并，通过rowspan和colspan属性实现单元格的跨行和跨列合并，创建复杂的表格布局。示例代码展示了不同合并方式的运用，帮助理解表格布局的灵活性。

摘要由CSDN通过智能技术生成

HTML table标签的行列合并

实现效果

在这里插入图片描述

代码

<!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>
</head>
<body>
    <table border="1" width="500px" height="300px" style="border-collapse:collapse;" ><!--style="border-collapse:collapse;" 表格内外边框合并  -->
       <tr><!-- rowspan  上下跨行合并    colspan 左右跨列合并 -->
           <td colspan="2">1</td><!--跨两列合并 -->
           <td rowspan="2">2</td><!--跨两行合并 -->
           <td colspan="3">3</td>
           <td>4</td>
           
       </tr>
       <tr>
           <td rowspan="2">5</td>
           <td>6</td>
           <td>7</td>
           <td>8</td>
           <td rowspan="2">9</td>
           <td>10</td>
           
       </tr>
       <tr>
           <td rowspan="2">11</td>
           <td>12</td>
           <td colspan="2">13</td>
           <td rowspan="2">14</td>
          
       </tr>
       <tr>
           <td>15</td>
           <td>16</td>
           <td>17</td>
           <td colspan="2">18</td>
           
       </tr>
    </table>
</body>
</html>

追光在路上

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML table标签的行列合并

HTML table标签的行列合并实现效果代码<!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.
复制链接

扫一扫