![]() | HTML TABLES! | ![]() |
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 Web Design Lessons > Lesson 1-05-01: Building Simple Tables
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:
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 BordersBy 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:
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:
We have a visible single-cell table! Adding Extra Table CellsOnline 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:
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:
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:
This example of your free online web design course, will create a table with two cells composed of two rows and one column:
Here's another example, this time with three rows and three columns:
We get a 3x3 matrix:
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.
Nearby Lessons: • Lesson 1-03 Basic Text Formatting• Lesson 1-04 Web Colors Unleashed • Lesson 1-05 HTML Tables • Lesson 1-06 Background Alteration • Lesson 1-07 Images Back To Top Home | Resources | Articles | Lessons | Directory | Forums Copyright© 2004 Onur Özcan. All Rights Reserved. | Partner Links |