| Vikki Olds March 15, 2004 Creating HTML tables by hand is not so hard once you get the hang of it. There really isn't a lot to remember. There are HTML table tag pairs that you use to create tables and the most used are: - <table></table>
- <tr></tr>
- <td></td>
There are more tag pairs that can be used also: - <tbody></tbody>
- <tfoot></tfoot>
- <th></th>
- <thead></thead>
Each tag pair has attributes that can be assigned to them. For instance the main table definition tag can specify a background color or image, a border and border color, cellspacing/how much space is between table cells, cellpadding/how much space is between content of the cell and the cell border, width, height and more. Most people generally won't go much further than what I've mentioned and some won't even go that far. For a very basic table you could use just the top three mentioned tag pairs: <table> and </table> are the opening and closing tags for the table. <table> is always the first item used to define a table and </table> is always the last item of a table definition. <tr> means table row so every time you want a row you would start it with <tr> and end it with </tr> <td> means table data so every time you want a cell for data/content you would start it with <td> and end it with </td>. It can get confusing at times if you don't indent your code. I generally use Notepad for coding and use indents to keep my code readable as shown above. In the code above there is one row and one column which would be rendered as: With just the first few tag pairs you can get a pretty complex table happening: Hrmm, look what happens to the left cell when content is placed in another cell next to it. This happens because cell widths are not set. To rectify the problem all we need to do is set cell widths: You will notice in the code above there are two parameters that have not been mentioned so far. One of those is rowspan and the other is colspan. Tables are like a grid and each row of the grid much match up or have the rowspan or colspan parameters set to make up the difference. In the above code we have a row that really spans two rows and so we need to use rowspan="2" in the table data for that cell. We also have a column that spans two columns. Again adding the colspan parameter for that table data cell; colspan="2" fixes any problems we might encounter. With the information above you should be able to get started creating HTML tables for your web site. Have fun!
Copyright 2004, Vikki Olds, All Rights Reserved | 