Building Simple Tables
Print This Post
One CommentRelated Reading |
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> <table> </body> |
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> <table border=”1″> </body> |
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 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> <table border=”1″> </body> |
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:
| <html> <head> </head> <table border=”1″> <tr> </body> |
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:
| <html> <head> </head> <table border=”1″> <tr> <tr> </body> |
We get a 3×3 matrix:
|
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.
Loading ...
Hi!
I just HAD to let you know that this sight is a m a z i n g !!! Well done!
I have just completed an adult college course on entry level web design and so I am not sure if it is the combination of what I have been taught with what you have presented here – (I did did come out of the course a little overwhelmed though)…
I have learnt so much more in half an hour here than over 18 weeks in class…
You have explained everything so neatly and I cant tell you enough how good this info is presented. MUCH better I find than (for example) W3…
ANYWAY – you’ve got my vote and I will tell everyone else back in Cert 3 including the facilitators!!
peace out
mzphit