Subhash's Table Tutor
Creating Tables is one of the easiest things which you will encounter in your life! So put on your seat bealts, & let us go ...
The basic construct of Table starts with:
Now you have to add a row to the table. The table row is represented by <tr> tag:
<table>
<tr></tr>
</table>
|
Now you have a row. What next? Columns. Columns are represented as cells within the table row. Technically these are called Table Data (<td>). So to your existing table you add two columns:
<table>
<tr><td></td><td></td></tr>
</table>
|
Put something inside the table data cell:
<table>
<tr><td>Data1</td><td>Data2</td></tr>
</table>
|
Now you have a very basic table. View it in your browser. Do not panic if the result is similar to the following:
The table is present, but the borders are invisible. To add a border of 1 pixel width, change the code as follows:
<table border=1>
<tr><td>Data1</td><td>Data2</td></tr>
</table>
|
Now your table should look like:
Since you have become an expert in creating tables, why not add another row holding Data3 & Data4? Your code should look like:
<table border=1>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data3</td><td>Data4</td></tr>
</table>
|
In your browser it should look like:
Okay, the table is there. But how do you add a column heading(called the Table Header) to it? Just add the following:
<table border=1>
<tr><th></th><th></th></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data3</td><td>Data4</td></tr>
</table>
|
What have I done? I have added a table row (<tr>) just below the <table border=1> tag. Inside the row I have added two Table Headers (<th>). Now put some content into the headers:
<table border=1>
<tr><th>Head1</th><th>Head2</th></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data3</td><td>Data4</td></tr>
</table>
|
Preview:
| Head1 | Head2 |
|---|
| Data1 | Data2 |
| Data3 | Data4 |
How about adding a Caption to your table? Say 'My Table'.
<table border=1>
<caption>My Table</caption>
<tr><th>Head1</th><th>Head2</th></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data3</td><td>Data4</td></tr>
</table>
|
So your table has grown to:
My Table
| Head1 | Head2 |
|---|
| Data1 | Data2 |
| Data3 | Data4 |
Unfortunately, the caption doesn't come up in bold. You have to bolden it manulally:
<table border=1>
<caption><b>My Table</b></caption>
<tr><th>Head1</th><th>Head2</th></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data3</td><td>Data4</td></tr>
</table>
|
The result:
My Table
| Head1 | Head2 |
|---|
| Data1 | Data2 |
| Data3 | Data4 |
By now you should have gained a substantial degree of expertise in creating HTML tables. So the spoon feeding will end here. Other attributes of various table tags are given in the
Table Tutor II, which will come handy when you start dirtying your hand with HTML.
