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

Tables in HTML

Page 5 of 6

You are in page:

1. The basics

2. Table headers

3. Table width and height

4. Row height & Column width

» 5. Merging cells

6. Cell spacing & Cell padding

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:

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.

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>

Test your file in your browser.

Change the first
```
<td>...</td>
```
tag of each table to a
```
<th>...</th>
```
.
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 <1 2 3 456 >

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

Tables in HTML

You are in page:

Merging cells

Comments & Questions