Here is a brief HTML table tutorial. It is important that before beginning this tutorial, you know the HTML basics. You know that <b> does not center something, but rather bolds that item. Ok so lets begin.
Tables are the lifeblood of HTML. They allow you to almost perfectly place text, images, and other media, exactly where you want it. You can make a table conform to the users screen width, or you can be rigid and make the table any number of pixels wide.
There are really only three basic tags for representing a table in HTML. They are:
<table> = table tag <tr> = table row <td> = table data
Most important is that a <td> is always inside a <tr>, which is always inside a <table>.
A very basic table would look like this
<table>
<tr>
<td>
Hi Mom
</td>
</tr>
</table>
Now, the fun begins when we start to add to the table.
Remember when you were little and you would build playing card houses, that the most important thing was the foundation? Well the same applies to HTML Tables. By properly placing tags with the right attributes you will build the solid foundation you need to make a great card house, oops I mean table.
I would like to make a 3 column, 3 row table so you can see a basic table, then we will add attributes to it, to flavor it up. So, let’s get started!
Here is the HTML code for the table above:
<table BORDER=1> <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr> <tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr> <tr><td>Cell 7</td><td>Cell 8</td><td>Cell 9</td></tr> </table>
It is at this point I would like to remind you that most HTML tags require end tag. This is especially important with table tags. One missing </td> and the table might not show up or could be skewed.
We can control the table appearance through tags. For example, if we change the border tag to read BORDER=0 table will have no border. This is commonly referred to as Borderless Tables.
Next we will add some cellpadding to the table. This gives each cell some space to breathe. Add CELLSPACING=5 to the table tag and see how table cells are increasing in size.
<table BORDER=1 CELLSPACING=5> <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr> <tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr> <tr><td>Cell 7</td><td>Cell 8</td><td>Cell 9</td></tr> </table>
There are loads of different options for tables. There are Cellpadding, Cellspacing, border, align, valign, and many others.
Cellpadding - Space within the cells Cellspacing - Space between the cells Border - Puts a border around the cells and table Align - aligns the content of the table (left, right, center) Valign - vertically aligns the content (top, middle, bottom)
Align and Valign can be used in td,tr, and table tags. Cellpadding, Cellspacing and Border should only be used in the table tag.
Other 2 very important tags are colspan and rowspan. As name suggests colspan allows you to stretch one column across multiple rows in table.
To accomplish this, you have to use the colspan attribute. Just add COLSPAN=2 to the <td>, and bam! Rowspan works similar. Add ROWSPAN=3, to your <td> tag to see results.
Finally, here is a HTML table element cheat sheet you can reference in future projects.
Post Your Comment