Follow The New Tutorial updates on WhatsApp, Telegram or YouTube.

HTML Table – colspan and rowspan

If you want to make a cell span more than one column, you can use the colspan attribute and if you want to make a cell span more than one row, you can use the rowspan attribute. HTML tables can have cells that spans over multiple rows and/or columns.

colspan – will divide one cell/row into multiple columns, and the number of columns depend on the value of colspan attribute.

rowspan – will divide a cell into multiple rows. The number of divided rows will depend on rowspan values.

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

   <body>
      <h1>HTML Table - colspan and rowspan example</h1>
      <table>
         <tr>
            <th colspan="2"></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td rowspan="3"></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>
HTML Table – colspan and rowspan example