Online Web Design Course » Merging Table Cells

CMS

Content

HTML

Images

Monetizing

Home » HTML

Merging Table Cells

Monday, 22 March 2010 ·

Print This Post No Comment

Merging HTML Table Cells Horizontally

In order to merge table cells horizontally, we’ve got to use the “colspan” attribute and the number of cells you wish to merge horizontally. Below is the HTML code we used to build the 9-cell-table in web design lesson 1-05-01:

</head>
<body>

<table border=”1″>
<tr>
<td>
Row 1, Column 1
</td>
<td>
Row 1, Column 2
</td>
<td>
Row 1, Column 3
</td>
</tr>

<tr>
<td>
Row 2, Column 1
</td>
<td>
Row 2, Column 2
</td>
<td>
Row 2, Column 3
</td>
</tr>

<tr>
<td>
Row 3, Column 1
</td>
<td>
Row 3, Column 2
</td>
<td>
Row 3, Column 3
</td>
</tr>
</table>

</body>
</html>

As you know, this HTML code produces the below output:

Row 1, Column 1	Row 1, Column 2	Row 1, Column 3
Row 2, Column 1	Row 2, Column 2	Row 2, Column 3
Row 3, Column 1	Row 3, Column 2	Row 3, Column 3

Now, if we wish to merge the three cells in the second row horizontally to form one big cell in the middle of our table, we’ll have to use our “colspan” attribute with the value of “3″ as we want to merge 3 cells. We’re going to put the “colspan” attribute into the first <td> tag on that row. The HTML code is below:

</head>
<body>

<table border=”1″>
<tr>
<td>
Row 1, Column 1
</td>
<td>
Row 1, Column 2
</td>
<td>
Row 1, Column 3
</td>
</tr>

<tr>
<td colspan=”3″>
Row 2 MERGED!
</td>
</tr>

<tr>
<td>
Row 3, Column 1
</td>
<td>
Row 3, Column 2
</td>
<td>
Row 3, Column 3
</td>
</tr>
</table>

</body>
</html>

Note that you should not add any more <td> tags inside the middle row to be able to merge all of the three cells. The above HTML code produces the below output:

Row 1, Column 1	Row 1, Column 2	Row 1, Column 3
Row 2 MERGED!
Row 3, Column 1	Row 3, Column 2	Row 3, Column 3

You see how the middle cells merged into one single cell? Great, isn’t it? Now let’s merge table cells vertically by using the “rowspan” attribute!

Merging HTML Table Cells Vertically

Your free online web design course will now merge the middle column (Column 2) in the above 9-cell-table. To do that, we’ll use the “rowspan” attribute inside the first middle <td> tag and remove the other two middle <td> tags from the second and third rows to have one cell that spans three rows! Have a look at the HTML code below to get a clearer picture:

</head>
<body>

<table border=”1″>
<tr>
<td>
Row 1, Column 1
</td>
<td rowspan=”3″>
Column 2 MERGED!
</td>
<td>
Row 1, Column 3
</td>
</tr>

<tr>
<td>
Row 2, Column 1
</td>
<td>
Row 2, Column 3
</td>
</tr>

<tr>
<td>
Row 3, Column 1
</td>
<td>
Row 3, Column 3
</td>
</tr>
</table>

</body>
</html>

Notice how I removed the other two middle <td> tags and only left the first and third columns in the second and third rows of the table. The output of the above HTML code is below: