HTML Tables

R. Craig Collins > Web Page Design > HTML Tables

HTML Tables © R. Craig Collins, 2005/6

If you are using a word processor, and want to organize information into rows and columns, you create a table, and place your items in cells; of course, it is not quite as easy in web page speak: we subdivide a table into rows, and subdivide rows into details... and we place our items in these detail. If you have several rows, the stacked 'details' take on the appearance of columns.

Example

row 1 detail 1	row 1 detail 2	row 1 detail 3
row 2 detail 1	row 2 detail 2	row 2 detail 3
row 3 detail 1	row 3 detail 2	row 3 detail 3

To create a Table:

Open Notepad in the Accessories area

Either open your template.htm, or create the default HTML document

<HTML>
<HEAD><TITLE>Your Title</TITLE></HEAD>
<BODY>
</BODY>
</HTML>

Save document on your account or floppy as an .htm, such as inclass.htm

Between the <body...> </body> tags, insert the following


<HTML>
<HEAD><TITLE>Your Title</TITLE></HEAD>
<BODY>

<TABLE>
<TR>
<TD>Hi</TD>
</TR>
</TABLE>

</BODY>
</HTML>

This is the minimal table, 1 X 1, one row with one detail (a place to insert items into the table).
- <TABLE></TABLE> defines the table area
- <TR></TR> defines the table row
- <TD></TD> defines the table detail: the cell ... you may not have an empty detail.
To make a table bigger
- To increase the number of 'details' (cells) and generate the number of 'columns' you want, copy the <TD></TD>s repeatedly within the <TR></TR>

To increase the number of 'rows' to the number you want, copy the entire <TR></TR>s repeatedly within the <TABLE></TABLE>
Once the table structure is built, you may insert
- Text
- Images
- Links
within the 'details'.

Using a table to organize material into rows and columns. Let's say you want to organize some words into a column, and you want the column about one third of the way over from the left margin, like so:


	Hi
	Bye

If you were using a typewriter to do this, you would simply hit the tab key, or the space key, until the words were in the right place. But web browsers ignore spaces, and would draw the words to the left margin; therefore we have to use a table.

As shown above, the easiest way to create the table above is to start with an 1x1 table; that is, one row with one column (detail).

you should already have the following between the <body> and </body>, in inclass.htm:

<table> <tr> <td>Hi</td> </tr> </table>

Save changes, and switch to the browser, and refresh or reload. You should now see the word 'HI', clinging to the left margin.

By default, the borders are invisible; to verify that a table really is around the word, insert the attribute and value border="1" INSIDE of the table tag.

<table border="1"> <tr> <td> HI </td> </tr> </table>

Save changes, and switch to the browser, and refresh or reload. You should now see the word 'HI', clinging to the left margin, in a now visible table. The value for the border ranges from 0-6 pixels, zero being none, and 6 being very thick.

But the word 'Hi' is not at all where we want it placed. By default, tables are only big enough to accommodate what is inside. To move the word over, we need to increase the size of the table.

Switch back to notepad, and insert the attribute and valuewidth="100%"INSIDE of the table tag, allowing spaces to separate the tag and attributes.

<table border="1" width="100%"> <tr> <td> HI </td> </tr> </table>

Save changes, and switch to the browser, and refresh or reload. You should now see the word 'HI', clinging to the left margin, in a now very wide table. If we had omitted the '%', the value would have been interpreted as 100 pixels. That might be very big on a small screen, and very small on a big monitor screen, so normally values are set as a percentage of the available screen.

Even though the table is bigger, the word is still to the left. What we need to do is insert another detail in front of the detail holding the word, in order to start inching our target word away from the margin. But what we don't want to do is put anything visible in the detail. We will use the non-breaking space character,  .

Rather than type, you may just copy the existing detail to the clipboard, and paste an exact duplicate in front of the original. Then edit the contents of the first detail to  .

<table border="1" width="100%"> <tr> <td>   </td> <td> HI </td> </tr> </table>

Save changes, and switch to the browser, and refresh or reload. You should now see the word 'HI' is no longer clinging to the left margin, but only moved slightly. But we can use the same trick to make the detail wider that we used to make the table wider. INSIDE the first <td>, insert the attribute and value width="30%".

<table border="1" width="100%"> <tr> <td width="30%">   </td> <td> HI </td> </tr> </table>

Save changes, and switch to the browser, and refresh or reload. You should now see the word 'HI' is no longer near the left margin, but right where we wanted. But we also wanted the word 'BYE' to occur directly underneath it. What we need is another row, again with two details.

Copy from <tr> to </tr> to the clipboard, then paste the entire structure between the </tr> and the </table>.

<table border="1" width="100%"> <tr> <td width="30%">   </td> <td> HI </td> </tr> <tr> <td width="30%">   </td> <td> HI </td> </tr> </table>

Edit the word in the second detail on the second row to the desired contents; in this case, the word 'BYE'.
We also do not need the second row to repeat the already specified width="30%"for the column, so that may be removed.
And finally, we want the border to go away, leaving the words floating in space, away from the margin; so, reset the border to equal 0.

<table border="0" width="100%"> <tr> <td width="30%">   </td> <td> HI </td> </tr> <tr> <td width="30%">   </td> <td> BYE </td> </tr> </table>

You should wind up with the following

<table border="0" width="100%"> <tr> <td width="30%">   </td> <td> HI </td> </tr> <tr> <td >   </td> <td> BYE </td> </tr> </table>

which yields

	HI
	BYE

Fun with Tables

Details can hold text, links, or images... anything you can put into a web page you can put into a table, including another table!