How to use rowspan attribute

不言
Release: 2019-02-12 13:19:12
Original
17612 people have browsed it

The rowspan attribute in HTML specifies the number of rows a cell should span. That is, if a row spans two rows, it means it will take up the space of two rows in the table. It allows a single table cell to span the height of multiple cells or rows. The rowspan attribute has the same function as the spreadsheet's "merged cells" in Excel.

How to use rowspan attribute

rowspan attributeCan be used with the and elements in HTML tables.

The rowspan attribute When used with the

tag, the rowspan attribute determines the standard number of cells it should span.

When the rowspan attribute is used with the

tag, the rowspan attribute determines the number of header cells it should span.

Let’s look at a specific example

Used with the tag

The code is as follows

<!DOCTYPE How to use rowspan attribute>  
<How to use rowspan attribute>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
    <body style = "text-align:center">  
  
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <!-- This cell will take up space on  
                    two rows -->
                <td rowspan="2">24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
            </tr> 
        </table> 
    </body>  
</How to use rowspan attribute>
Copy after login

The effect is as follows

How to use rowspan attribute

##When used with the tag

The code is as follows

<!DOCTYPE How to use rowspan attribute>  
<How to use rowspan attribute>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align:center"> 
          
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
                <!-- This cell will take up space  
                    in 3 rows -->
                <th rowspan="3">php中文网</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <td>24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
                <td>25</td> 
            </tr> 
        </table> 
    </body>  
</How to use rowspan attribute>
Copy after login
The effect is as follows


How to use rowspan attribute

This article ends here. For more front-end exciting content, you can pay attention to the relevant column tutorials on the PHP Chinese website! ! !


The above is the detailed content of How to use rowspan attribute. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template