Split and merge tables in HTML (colspan, rowspan)

The code demonstrates horizontal merging:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Demonstration table tag 2--cell merging</title>
        <style type="text/css">
            td{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table border="1" cellspacing="0" width="50%" height="150">
            <caption>Merge cells horizontally</caption>
<!--colspan must specify the number of columns to be merged, whether it is two columns or three columns, etc.-->        
            <tr> <th colspan="2">Name and age</th> <th>Phone number</th> </tr>
            <tr> <td>Jack</td> <td>24</td> <td>1351234567</td> </tr>
            <tr> <td>Tom</td> <td>22</td> <td>1351234567</td> </tr>
            <tr> <td>Rose</td> <td>22</td> <td>1351234567</td> </tr>
            <tr> <td>张三</td> <td>25</td> <td>1351234567</td> </tr>
        </table>
        <br/>

        <table border="1" cellspacing="0" width="50%" height="150">

Running results:

這里寫圖片描述

The code demonstrates vertical merging:

<table border="1" cellspacing="0" width="50%" height="150">
            <caption>Merge cells vertically</caption>
            <tr><th>Class</t> <th>Name</th><th>Age</th> <th>Telephone</th> </tr>
            <tr><td rowspan="2">Class 601</td> <td>Jack</td> <td>24</td> <td>1351234567</td> </tr>
            <tr> <td>Tom</td> <td>22</td> <td>1351234567</td> </tr>
<!--rowspan must specify the number of columns to be merged, whether it is two rows or three rows, etc.-->    
            <tr><td rowspan="3">Class 602</td> <td>Rose</td> <td>22</td> <td>1351234567</td> </tr>
            <tr> <td>张三</td> <td>25</td> <td>1351234567</td> </tr>
            <tr> <td>Li Si</td> <td>25</td> <td>1351234567</td> </tr>
        </table>
    </body>
</html>

Running results:

這里寫圖片描述

This is the end of this article about table splitting and merging (colspan, rowspan) in HTML. For more related table splitting and merging content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Example code for implementing random roll caller in html

>>: How to fix some content in a fixed position when scrolling HTML page