Screen Printing

TUTORIALS » HTML / JavaScript » HTML essentials (guided tutorials)

Tables in HTML

Page 5 of 6


Merging cells

You can merge two or more contiguous cells by using the colspan and rowspan attributes inside a
<td>
(or
<th>
) tag. This way you can accomplish tables like:

   
       
or
     
   
   
     


The colspan attribute defines how many cells will be merged from left to right.

The rowspan attribute defines how many cells will be merged from top to bottom.

  1. Create a new XHTML document with two tables within the body, using the code:
    <table border="1">
      <tr>
        <td colspan="3">Merged cell</td>  
      </tr>
      <tr>
        <td>1</td> <td>2</td> <td>3</td>
      </tr>
      <tr>
        <td>4</td> <td>5</td> <td>6</td>
      </tr>
    </table>
    
    <br />
    
    <table border="1">
      <tr>
        <td rowspan="3">Merged cell</td> <td>1</td> <td>2</td>
      </tr>
      <tr>
        <td>3</td> <td>4</td>
      </tr>
      <tr>
        <td>5</td> <td>6</td>
      </tr>
    </table>
  2. Test your file in your browser.

  1. Change the first
    <td>...</td>
    tag of each table to a
    <th>...</th>
    .
  2. Test your file in your browser.

Note that when we merge cells using colspan or rowspan, we have to omit the
<td>
tags that are being merged.

Once you have practiced and mastered the merging of cells inside a table, continue to the next tutorial.

More pages of this tutorial → Tables in HTML  <123456>

Comments & Questions