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-01: Building Simple Tables
Google
 

Web Design Lessons > Lesson 1-05-01: Building Simple Tables

Previous Lesson | Lesson Index | Next Lesson

In this lesson of our free online web design course, we'll first concentrate on how to create a table with a single cell. To achieve this, we have to use the <table>, <tr> (table row) and <td> (table data/table column) tags respectively. Copy and paste the below HTML code to your notepad to create a table with one cell:

<html>
<head>

</head>
<body>


<table>
<tr>
<td>
The contents of your table cell go here
</td>
</tr>
</table>


</body>
</html>

Sidenote: A single-cell HTML table is composed of 6 different tags - 3 opening tags: <table><tr><td> and 3 closing tags: </td></tr></table>. Therefore, think of the whole set of 6 tags as one table and not only the <table> and </table> tags ;)

You will not see any table in the output when you save the above HTML code and open it in a browser window. This is because we did not include a "border" attribute within the <table> tag.

HTML Table Borders

By adding a "border" attribute to our single-cell table, we are going to make our table visible to the human eye. Have a look at the below HTML code:

<html>
<head>

</head>
<body>


<table border="1">
<tr>
<td>
The contents of your table cell go here
</td>
</tr>
</table>


</body>
</html>

As you see above, we have added the "border" attribute to our <table> tag. The border attribute can take any number starting from zero. This number defines the width of the border in pixel units, along with the "cellspacing" attribute. We're going to learn about the "cellspacing" attribute later on in our free online web design course. For now, let's just have a look at the output of the above code:

The contents of your table cell go here

We have a visible single-cell table!

Adding Extra Table Cells

Online Web Design Course continues by teaching you how to create more columns and rows inside your table. In order to create more columns, you simply need to add another <td> tag after the former </td>. This way we are starting another column on the spot where the first one ended. Copy and paste the below HTML code to have a table with two cells composed of one row and two columns:

<html>
<head>

</head>
<body>


<table border="1">
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
</tr>
</table>


</body>
</html>

Notice that we have started our second <td> tag (i.e. second column) only AFTER the first <td> tag was closed by a </td> tag. The output of the above HTML code is:

Column 1Column 2

We can also have a table with two rows and one column. To achieve that, you need to start a new <tr> tag where the first one ends. Also keep in mind that to have a valid table cell, you have to have a new <td> tag after each <tr> tag - you can not have raw data inside the <tr> and </tr> tags, without adding the <td> and </td> tags. Just copy and paste the below HTML code to your text editor to understand what I mean:

<html>
<head>

</head>
<body>


<table border="1">
<tr>
<td>
Row 1
</td>
</tr>

<tr>
<td>
Row 2
</td>
</tr>
</table>


</body>
</html>

This example of your free online web design course, will create a table with two cells composed of two rows and one column:

Row 1
Row 2

Here's another example, this time with three rows and three columns:

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

We get a 3x3 matrix:

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

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

In the next lesson of our online web design course, we're going to learn about "cellspacing" and "cellpadding" attributes of HTML tables.

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

'.$ad_network[2].' '.$ad_network[3].' '.$ad_network[4]; ?>


 
Partner Links

Web Design Directory