Using Tables to Organize Stuff

Tables are a good way to organize text and images within a webpage. They require that you learn only 3 tags. The <table> tag starts a table. The <tr> tag creates a row (side to side). The <td> tag creates a cell (or column). All of the aforementioned tags require a closing tag using the same name with a /. Objects (text, images, etc.) are put in the cells (between <td> and </td>). An example might be:

<table border=1>

<tr>

<td>

Some meaningful words or an image

</td>

<td>

More stuff

</td>

</tr>

</table>


The resulting table would look like this:

Meaningful words More stuff



…and why would you want to do this…


To further enhance your table you may use table attributes. Attributes in HTML are extensions that add functionality to normal tags. An example might be <table bgcolor="000000">. Within the realm of table tags you may use both bgcolor= (a hex color value), align= (left, center, right), valign= (top, middle, bottom), width= (a numeric value) and height= (a numeric value) to adjust parts of your table within <table>, <tr> and <td>. Additionally, the <table> tags supports border= (a numeric value), cellpadding= (a numeric value) and cellspacing= (a numeric value). Note: cellpadding is the space around the cells (the border), and cellspacing is the space around the contents of the cell. The <td> tag also supports the colspan= (number of columns…<td> to horizontally span) and rowspan= (number of rows…<td> to vertically span) attribute. There other tags and attributes for both the Netscape and Microsoft browsers but they are beyond the scope of this class. You might then ask what you would do with these attributes.


Table Quick Reference

Tags What it does Where to use
<table> Creates a table In web documents
<tr> Creates a row Within the <table> tag
<td> Creates a cell (or coloumn) Within a <tr> tag
Attributes – legal within tags    
bgcolor=000000 Changes color Within <table>, <tr> or <td>
align=left, center, or bottom Justifies objects Within <table>, <tr> or <td>
valign=top, middle, or bottom Vertically justifies objects Within <table>, <tr> or <td>
width= a numeric value Resizes an object Within <table>, <tr> or <td>
height= a numeric value Resizes an object Within <table>, <tr> or <td>
border= a numeric value Creates a 3D border Within <table>
cellpadding = a numeric value See above Within <table>
cellspacing= a numeric value See above Within <table>
colspan= a numeric value See above Within <td>
rowspan= a numeric value See above Within <td>



Probably the best way to start designing a table-based webpage is to sketch it on a piece of paper. Next, decide whether you wish to span columns and rows or nest a table within a table. Both options possess strengths and weaknesses. Both are challenging to organize. If you choose to span columns and rows, some tips have been provided below the reference table.

Spanning columns and/or rows via cells can be challenging. The trick to clarifying what goes where involves visualizing the row <tr> in which a spanning cell <td> resides. So… if you wish to span all cells on the very top of your table the colspan attribute (i.e. <td colspan=4> ) should be used in the first (and only) cell in the top row. If you choose to span all cells from the bottom, the colspan attribute should be in the first (and only) cell in the bottom row.

Spanning rows can be a little trickier. First, determine in which row that you wish to start the span. Count the number of rows that you wish to span. Place the rowspan attribute in the proper cell (i.e. <td rowspan="4"> ). For visual examples please view:

http://wp.netscape.com/assist/net_sites/table_sample.html


Fun with Tables (-:

Please complete all challenges below:

Table Challenge 1

Thus far we have created simple tables. To fully assess your understanding, you are presented with the following challenge:

  • Create a 10x10 table. Border="1" Width="400"
  • Include the first initial of your name in each cell.
  • Change the color of the cells that resemble the first letter of your name.
  • Please note:If the first letter of your name is "L", try the first letter of your last name.

When you are finished the table should look similar to:

Assuming, of course that the first initial of your name is "M".



Table Challenge 2

Create a table that matches the example below. As is illustrated in the table, choose 25 of your favorite colors. You may think that I am colorblind as I have only chosen gray; however, you must remember the limitations of the photocopiers. It may also provide some insight into the limitations of someone that is truly colorblind. You should arrange the table so that top and bottom cells span all others. The sides should span all interior cells. Clues have been provided within the image to assist you. Additional Notes: You may opt to include the hex value for the color within the cell so long as it is visible.



Table Challenge 3

Table tags must constantly be reviewed to ensure that you are able to competently use them when you need them. Therefore, in the interest of reviewing concepts previously introduced, we will complete the following activity. Use the template below to create a simple table including the content listed.

When you have finished you should have a table similar to this:

table3.gif (5627 bytes)



Table Challenge 4

Create a softball/baseball scoring sheet or similar worksheet to track data for a team.