Astro Lesson #10 : tumultuous.tables

Back to the basics again! Today we will discuss tables - not the kitchenette kind, but the kind that will help you with placing things on a web page where you want them to go without an argument. Well, not much of an argument anyway...

on.the.table
Why bother with tables? Although HTML is developing at a cracking pace, there are still some rudimentary things that it does not do so well - page placement is one of those things. Have a look at the main page for Retro City. (HERE) See all the pretty Nebula thingys? It would be awkward to get them in the right place without putting them in a table, which is what we have done. Just because they are graphics does not mean a table will treat them any differently - and they are also links to other parts of retrocity.

table.manners
What is a table? It's really just a container to store certain bits of information, or graphics in a way that allows for more control over placement. Let's start with the structure of a table, shall we?

Firstly, you must inform the browser that a table is about to begin - "Hey, You! Here comes a table!" Not quite, this is the way it's done ...

<table> yep - here is a table

<tr> and here is the first row within that table - you know, it goes across the page!

<td> ooh looky, here's some table data - stuff within the row of the table

</td> oops that's the end of it

<td> criminy! And here's a bit more

</td> and that's the end of that too

</tr> well, the row has ended

</table> yowie - no more table!

Here's what it will look like ... for display purposes we have added a few extra thingummybobs that you don't know about yet - don't worry 'cos you soon will!

The size of a table is limited only to the size of your web page ... however, remember that the bigger the table, the longer it may take to download - this is because the browser has to figure out the layout of the entire table before it worries about what is going to appear inside it. Each data 'cell' will expand itself to include the text or graphic within it, or you can set some size parameters.

a.nest.of.tables
Tables can be placed inside other tables for added effect, but make sure all the tags are in order or you could end up 'under the table' and in a mess. This is called nesting. (Lists can also be nested - so can birds - and can be used within a table too!)

table.talk

• Borders: Our example table above has a border but you may not want one - for instance if a graphic is inside the table a yukky old border might spoil it's good looks. Then what do you do? Easy! The default value is
  
  <table border="0"> Our example has border=2
  
  
• Bordercolor: If you decide to include a border, its color can be specified using this tag but this is dodgy across certain browsers
  
  <table bordercolor="red"> or <table bordercolor="#000000">
  Color names or their Hex equivalent are the requirements.
  
  
• Background: Background color or patterns can be set, either in the entire table, or in each cell. Using background images needs careful checking across browsers - netscape can do some weirdo display things especially when cellpadding or cellspacing is employed (more on that later) As above, this can be useful in making text stand out against the background of a page or for contrast. Do this:
  
  <table bgcolor="red"> or <table background="stars.gif">
  
  
• Width/Height : This can be set for the entire table, or for individual cells, and is specified either in pixels or as a percentage of the browser window. Height can be tricky - its best to make the content fit the desired height.
  
  <table width="200" height="100"> or <table width="100%">
  
  
• Cellpadding/Spacing : Further functionality is provided with these 2 tags. Cellpadding refers to the space within each cell, and Cellspacing to space between cell borders. If borders or cell background colors are not used, then cellspacing will look same as cellpadding. Pixels please.
  
  <table cellpadding="5" cellspacing ="10">
  
  

setting.the.table
Even more wonderful is the fact that elements within tables can be aligned in a variety of interesting ways.

For instance, in order to align the whole table in the center of a page, simply use the

<p align=center> or <div align="center">

tag prior to setting the table tags. (Similarly, this can be left or right) For cell content, both the < tr > & < td > tags can be defined with align=left, right or center and the valign attribute controls vertical alignment (top, bottom & middle )

the.captions.table
Would you like to include a caption with your table? Simply use this tag after the main table tag. Align can be set to top or bottom, which will produce the caption either at the top or the bottom of the table.

<caption align=top>

spanning.not.spamming
Table cells can be made to stretch or 'span' over a number of cell widths, which is great for headings within a table, or for large graphics. This can be accomplished in 2 ways - by row or by column. Let's look at our example table again -

Click me!	Spanning is a mighty useful thing, unlike Spamming
	Retro City is a darn fine place	Have you visited all the pod's in this space station?

Here we have used a number of thingumybobs to brighten up our table - cellpadding, cellspacing, rowspanning, colspanning and a graphical link. It's really important to sit down with a pencil and paper before building such tables as it is easy enough to get your rows mixed up with your columns. You might want to turn the table border on (border="1") at first so that you can see what you are doing - and then turn it off later (border="0").

• <td colspan="2"> Will span 2 adjacent cells in a column (across)
  
  
• <td rowspan=2> Will span 2 adjacent cells in a row (down)