How to merge table cells in HTML?

HTMLWeb DevelopmentFront End Technology

To merge cells in HTML, use the colspan and rowspan attribute. The rowspan attribute is for the number of rows a cell should span, whereas the colspan attribute is for a number of columns a cell should span.

Both the attribute will be inside the <td> tag. The number will be a numeric value, for example, 2 for 2 rows if rowspan, 2 for 2 columns if column span.

Example

Firstly, we will see how to create a table in HTML with 3 rows and 3 columns

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th></th>
            <th></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           <td></td>
           <td></td>
           <td></td>
         </tr>
      </table>
   </body>
</html>

Example

Let’s merge cells using the colspan and rowspan attribute

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th colspan="2"></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>
raja
Published on 01-Feb-2018 11:30:47
Advertisements