HTML Tables













Tables

Tables, in my opinion, are the most important tag you can learn when creating a web page, it allows you to have the ultimate control of how your web page will look, it also will help to organize your web page. At first most people think of a table looking something like this:
This a Caption
Heading Heading 2
Table Data Table Data 2

Well, that is one way to organize a little batch of information that you may want to present to your reader, but look at the web page you are reading right now, it's put into one big table and it gives me the control of changing the colors in the different areas, to dictate the size of certain columns, and any number of other features. I'm sure if you ask any web page designer, you'll find that they share the opinion that tables can be one of the greatest organizational tags that you can use to create a web page. Now, you can remove the borders of the table and make the viewer completely unaware that you've used a table to organize everything on your page. Now that we've covered why tables are important, it's time to explain how to make tables. Here are the basic tags you'll be using:

  1. <table></table> Now this creates the table, all the data for a table will be contained with in these tags. You will also be able to set many of the features of the table, like size, borders, colors, etc.
  2. Caption creates a table caption. They can added right after the <table> command or right before you close the tags.
  3. <th></th> will create a heading for the columns or rows.
  4. <tr></tr>These are the Table Row command. Now this will create the rows of your table. You can change the color for the rows, etc in this tag.
  5. <td></td>These are the Table Data commands. Here is where you will input the data for your table. It also creates the colums. So if you have one <tr>command, and inside this set of <tr> tags you have four <td> tags, you'll create a table that has 1 row and 4 columns. You can change color per table data cell, size of the td cell, and a few other aspects.

Table Height and Width
The width and height command can be used to change the size of the whole table or individual cells of the table. Height and width can be used with the <table> <td> and the <th> tags. Here is a few examples:
<table width="300" height="300"></table>
<td width="20%" height="20%"></td>
<th width="100" height="100"></th>

When using the width and height command, you can either use the pixel size, as seen in the first and the third, or you can use a percentage like in the second example.

Cellpadding, Cellspacing, and Border
This will help you control the spacing between the cells of a table.

  1. <table cellpadding="?"> Fill in the ? with a number...This will define the space in pixels between the table cells and the cell border.
  2. <table cellspace="?"> Fill in the ? with a number...This will define the pixel space btween the cells in a table.
  3. <table border="?"> This defines the border around your tables and cells, you may have a 0 border and it will not be visible, or change the ? with a pixel number to define the thickness of the border.
Colspan and rowspan
These two commands are used to make one cell span more than the one row or column that would ordinarily assigned to it. The two commands are this: <td colspan="2"></td>
This would create a td cell that would span 2 columns, the number could be increased to however many cells you wish this to span. <td rowspan="2"></td>
Thiswould create a td cell that would span 2 rows, the number could be increased to however many cells you would want the row to span.
These two commands can also be used with the <th></th> command. Let me give you a quick example of how this would look in a cell.
This data will span two columns
Useless info to fill this box Useless info to fill this box

That was an example of colspan, rowspan would be the same, except it would span the rows instead of columns.

Alignment of Cell Data: You can align the data in a td tag many ways, left, right, center, but also vertically, so let me show you the commands:

  1. <td align="left">This will align everything to the left of the cell</td>
  2. <td align="right">This will align everything to the right of the cell</td>
  3. <td align="center">This will align the data in the center</td>
  4. <td valign="top">the valign command will put the data at the top of the cell</td>
  5. <td valign="middle">Will align the data in the middle of the table cell</td>
  6. <td valign="bottom">Will align the data at the bottom of the cell</td>
Now, not only can you align the contents of the TD cell, but you can also change the alignment of the whole table, this will tell where the whole table should be positioned on the web page. You would do this in the table tag:
  1. <table align="left">Will align the whole table to the left
  2. <table align="right">Will align the table to the right
  3. To center a table you must put the <center> tags around the whole table, so it would look something like: <center><table>and once you wanted to close everything it would be</table></center>

Background Color

You can change the background color of the whole table, table rows, individual table cells, or the border color. Here is how:

  1. <table bgcolor="white">This would make the color of the whole table white.
  2. <tr bgcolor="blue">This would make the color of one whole row change.
  3. <td bgcolor="green">This would change the color of one cell on the table.
Now a basic rule that follows, the table color is set for the whole table, but you can change it by using the tr bgcolor for just that one row, or the td color, just for that one cell.

You can also change the bordercolor in a similar manner, like this:

  1. <table border="1" bordercolor="green">This will make the borders of the whole table green.
  2. <tr bordercolor="yellow">This would just change the border color for the one row.
  3. <td bordercolor="blue">Will change the color of the border for one cell.
Now there is another command, but it only works with Microsoft internet explorer, and since I use Netscape, and many people do, I won't bother going into this command to change the shading of a table. When you design your web page, you must always be aware of your viewing audience, and while many people use ie explorer, not everyone does. So make your pages complient for all browser.

Now, one last note on tables, it's called nesting tables, it's very simple but thought you should know about it. When making a table, you can information in the td tags, this is the spot for your data. If you want, you can put another table inside a table. Just put the table between the td tags of your current table. This is called nesting tables.

You've completed your lesson in tables, use them frequently, master all you can do with them, then make a web page utilizing it and see how much control it can give you.

The next lesson is on forms.