Online-web-design-course.com 

HTML TABLES!

Online-web-design-course.com
HOME             RESOURCES             LESSONS             DIRECTORY             ARTICLES             FORUMS

Sponsor Links

Free Image Hosting
Your source for free image hosting - upload your images!

Poker Strategies and Tips
Poker, online poker, poker terms, poker accessories, poker tips and tricks.

Photoshop Tutorials
Over 3,000 tutorials for Photoshop, Flash and 3DS Max!

6,000 Free Fonts
Download over 6,000 Free Fonts for Mac and PC @ FontVillage.com

Buy Website Visitors
1,000 Targeted U.S. Visitors for $3.50 - 30 day guaranteed.

Reading Tarot Cards
Videochat with certified tarot readers & psychics - unlimited tarot cards readings!

Affiliate Software
Start an affiliate program and design to maximize affiliates' productivity

PPC Search Engine
Low cost advertising for your website!

Technical Service Provider
Your number one source for computer repairs and network solutions
 
LESSON 1-05-04: Merging Table Cells
Google
 

Web Design Lessons > Lesson 1-05-04: Merging Table Cells

Previous Lesson | Lesson Index | Next Lesson

In this little section of our free online web design course, we're going to learn how to merge table cells by using the "colspan" and "rowspan" attributes along with the <td> tag.

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:

<html>
<head>

</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 1Row 1, Column 2Row 1, Column 3
Row 2, Column 1Row 2, Column 2Row 2, Column 3
Row 3, Column 1Row 3, Column 2Row 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:

<html>
<head>

</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 1Row 1, Column 2Row 1, Column 3
Row 2 MERGED!
Row 3, Column 1Row 3, Column 2Row 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:

<html>
<head>

</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:

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

Sidenote #1: Check out my web design resources page to download a superb eBook!

Sidenote #2: If you enjoyed this lesson, please link to it :)

We're done! In the next lesson of our online web design course, you're going to learn how to use tables to create a site layout.

Previous Lesson | Lesson Index | Next Lesson

Nearby Lessons:

• Lesson 1-03 Basic Text Formatting
• Lesson 1-04 Web Colors Unleashed
• Lesson 1-05 HTML Tables
• Lesson 1-05-01 Building simple tables
• Lesson 1-05-02 Cellpadding & cellspacing
• Lesson 1-05-03 Defining table width & height
• Lesson 1-05-04 Merging table cells
• Lesson 1-05-05 Creating site layout by using tables
• Lesson 1-06 Background Alteration
• Lesson 1-07 Images

Back To TopWeb Design Course Top

Home  |  Resources  |  Articles  |  Lessons  |  Directory  |  Forums

Contact  |  Submit Article  |  Submit Site

Forums Archive  |  Site Map

Copyright© 2004 Onur Özcan. All Rights Reserved.

Long Distance Phone Service
Online-web-design-course.com

You must set the "ad_network_ads.txt" file to be writable.


 
Partner Links

Web Design Directory