Introductory Guide to Basic HTML Part Two - Tables
intro
In the first part of the HTML guide, I covered all the basics of formatting HTML for this web site. The only other thing you need that it doesn't cover is tables, which this document covers.
Tables are pretty simple. You open a table with the <table> tag. After that you can have any number of rows in your table. Each row is denoted by the <tr> tag (for table row). The individual cells inside each row are denoted by the <td> tag (for table data). After <td> goes the text you wish to be inside the cell. Then close the cell with </td>. If you want another cell, add another <td>, or if you're done with the row, close the row with </tr>. Once you've added all the cells and closed the row, you can either start a new row with another <tr> or close the whole table with </table>.
examples
Here is a good reference for tables with lots of examples. Look over them and notice all the different options you can add to the tags. The names of the options are usually pretty self-explanatory, but look at the result of each one to get a better idea of what they do.
writing your first table
It may take you a few minutes to write your first table. Once you understand how they work though, it's easy. Here's how to write one quickly: Start by writing just the tags for a table with one row, with as many cells in it as you need columns. Put nothing but maybe a single letter inside each cell - just enough so you can see the formatting. Get this simple, single-row table working first. Once you get this working, copy the entire row, and paste it several times right after the first row. Now you have a table with 5 or 6 rows and several columns.
notes
You can put any other HTML you like inside your cells, as long as you keep it between the <td> and </td> tags. This means you can have line breaks in there (with <br> ) or add text formatting (for instance with <i> ). Using <center> is unnecessary, because each cell can have an alignment. Simply add the align= option to your <td> tag, like this: <td align="center">. You can use either "center", "left" (the default), "right", or "justify". The <table> tag can also use the align= option, but it affects how the entire table is aligned. There is one more important option, width=, which can be used with the <td> and <table> tags. It can contain either a number of pixels or a percentage. If you use percentages for cells, make sure the add up to roughly 100%.
summary
For more information on tables see the examples on the link above. For your convenience I have written a little example table which you can copy and paste to get you started. Please don't just blindly use this code, try to understand it too, and modify it to fit your needs. The things inside <!-- this tag --> is a comment and will not be displayed by a web browser. You can delete the lines of comments if you use this code.
