Free Guides
Language Tutorials
HTML ( Hyper Text Markup Language )
Creating tables
Tables can get quite hairy to create, but they are a very important part of HTML, and must be learnt eventually. In this section, I'll cover the general syntax for creating tables- complex tables are beyond the scope of this tutorial, though.
All tables involve using the below three tags:
| <table></table> | Defines a table. All tables begin and end with this tag. |
| <tr></tr> | Defines a row. A table must have at least one row (think about it). |
| <td></td> | Defines a cell within a row. All tables must also have a least one row. |
The best way to illustrate how to create tables is to begin by showing the syntax involved in creating a basic table:
<table>
<tr>
<td>A basic table</td>
</tr>
</table>
|
|
Take special note of the structure of the tags- All tables begin with the <table> tag, followed by at least one <tr> tag, and then by at least one <td>.
Lets take the above a little further and create a table with two cells (as opposed to just one):
<table border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
</table>
| This is the first cell | This is the second cell |
Want to try for a table with two rows, and two cells in each of the row?
<table border=1>
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
<tr>
<td>This is the third cell</td>
<td>This is the fourth cell</td>
</tr>
</table>
|
|
Since we wanted two rows, we defined two <tr> tags. Since we wanted two cells in each of the row, we defined two <td> tags inside each of the <tr>. Not that bad, right?
Table attributes
Before we get too carried away with creating tables, its appropriate to first introduce the attributes available in manipulating a table's appearance, such as border size, background color, row/cell width etc. Below lists these important attributes:
| width | Available to all of the table tags. Used to determine the tag's width, either in px or % |
| border | Available to the <table> tag. Defines its border size |
| cellpadding | Available to the <table> tag. Defines the padding width between each of it's cells. |
| cellspacing | Available to the <table> tag. Defines the spacing width between each of it's cells. |
| bgcolor | Available to the <table> tag. Defines the background color of he table |
| background | Available to the <table> tag. Specifies the background image of the table. |
I encourage you to individually try out all of these attributes; here's an example that uses several of the attributes at once:
<table border="2"
width="136" background="backgr15.jpg" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">Sample table<br>Sample table></td>
</tr>
</table>