首页 > 其他分享> > html表单元素的colspan和rowspan合并单元格

html表单元素的colspan和rowspan合并单元格

2021-06-10 22:04:03 作者：互联网

文章目录

colspan和rowspan
- colspan
- rowspan
代码案例

colspan和rowspan

colspan和rowspan这两个属性用于创建特殊的表格。

colspan

colspan用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。

rowspan

rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行。

rowspan通常使用在td和th标签中
row:行,span:跨度,跨距,范围
col:列,span:跨度,跨距,范围

代码案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300">
        <caption>标准</caption>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </table>
    <br><br>
    <table border="10">
        <caption>合并</caption>
     <tr>
         <td>小组成员</td>
         <td colspan="2" align="center">性别</td>
         <td>年龄</td>
     </tr>
     <tr>
         <td align="center">杨小菜</td>
         <td>男√</td>
         <td>女&nbsp</td>
         <td>20</td>
     </tr>
     <tr>
         <td align="center">杨大菜</td>
         <td>男&nbsp</td>
         <td>女√</td>
         <td>20</td>
     </tr>
     <tr>
         <td align="center">张大仙</td>
         <td>男&nbsp</td>
         <td>女√</td>
         <td>20</td>
     </tr>
    <table border="1" width="300">
        <caption>合并第一行的三列</caption>
    <tr>
        <td colspan=3>合并第一行的三列</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    </table>
    </br>
    <table border="1" width="300">
         <caption>合并第一行的两列</caption>
    <tr>
        <td rowspan="2">合并第一列的两行</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
 </table>
</body>
</html>

标签：rowspan,20,colspan,单元格,合并,html,nbsp
来源： https://blog.51cto.com/u_15265965/2894237