HTML3
Sections
  Home
    Intro
    History
    FAQ

  Choices
  Side bar

  Styles
  Headers
  Footers
  Effects
  Chars
  Address
  Links
  Images
    Rollovers
  Tables
  Forms
  SSI
  Plugins
Resources
  Colour editing
  Image creation
  JS Tricks
  Servers
  Tokens
  Latin-1
|
|
HTML³: Tables |
-
-
|

Tables

Tables can be tricky beasts, but they are very useful; although some purists bemoan the fact that they are very really used for what they were originally intended - tabulating data - for the designer they're the good alternative to the evil <frameset> when it comes to designing pages with menu areas down one of the edges of the browser window.

Here I'll try to deal with the basics of table design as simply as possible, and then layer on the complexity the further in we get. Or you can just view the source of this document and skip to the end of the file for the examples if you want.

As of HTML³ version 3.54 the tables window has become a little more complex, simply because I've ensured that each part of the window - tables, rows and cells - can have their own attributes such as colour, alignment etc. instead of sharing one all-encompassing set of options. This is not only less confusing (despite what you might initially think on seeing all of those options!), it means less work switching backwards and forwards. All three sections now have reset buttons to set them back to their simplest form.

In WML mode tables are available, but are very, very basic - for instance, you set the default alignment in the <table> tag and can't have any attributes in the <tr> or <td> tags; the only other attribute of note is that you have to say how many columns you'll be using; this also goes in the table tag.


The Basics

Your basic table goes a little something like this...
<table>
  <tr>
    <td>Some data here</td>
    <td>Some more data</td>
  </tr>
</table>
...which comes out like...

Some data hereSome more data
(a border may or may not be added by default; I've added one here for clarity)

The <table> and </table> tags are probably self-evident; this marks the start and end of the table. However, you can't just put any arbitrary data inside with first using some other tags.

<tr> is a table row - this starts a line of cells sideways across the page. You must add cells into these rows to contain the table data - the <td>...</td> pairing. If you try to put data into a table without using this row and cell structure[1], strange things will happen such as the data being put in the wrong place (like before the table in Fresco).

Some people will say that you can do away with some of the closing tags - i.e. </td> and </tr> - and for general use this is indeed true, the table will appear to render correctly without closing these tags. However, if you are using nested tables, that is a table inside a table - as with this page, where the bars along the top and the side menus are added using a table, and I'm using example tables in this main white area - then some browsers can get confused as to where the elements from one table starts and where the other tables bits end, so it's best to try and get into the habit from the start of correctly ending your table elements.[2]

1 Okay, so the techie amongst you may have spotted an error in that statement - you can use <th> and <caption> commands, but these are basically Microsoft extensions, and while they are now more widely supported browser-wise they aren't included in HTML³ as I can't see the point in re-inventing the wheel
 
2 I don't always practice what I preach, so don't look too closely at my source code - do as I say, not as I do!
    :-)


<table> attributes

Table section

Table section


What follows is a rundown of the attributes you can add to the main table command, and how to use them to your best advantage.

Table width
How wide you want the table to be. If you're displaying a simple table of data you might want to leave this out as the table will find its own best size. However, if you want to have control over how the data is represented, making sure that text doesn't get broken over many lines or making sure full use is made of the available space for instance, there are two ways to go about it.

Specifying a width in pixels means that, no matter what size the browser window is, your table will always remain the same size - maybe you want to give the effect of newspaper columns, which might look silly if they were stretched to some extremely wide size by people using huge monitors. If you do this, don't forget to take off a little to make sure that scroll bars don't ruin the effect - if you're trying to keep data to the same size as a 640x480 screen, you might only want to make the table 620 pixels wide.

If you're using tables for layout control purposes rather than just displaying tabulated data, you might want to use percentage widths. Saying a table should be width="100%" will take up all the available width, no matter what the width of the browser window is; if the window is resized, the text resizes with it. This is a little like how the browser operates when there are no tables involved - you can use the table to add a side bar for navigation and suchlike, just like this page, but have the main text area react the same as the default browser action.

You don't have to encase the whole of the page in a table however, if you want headlines and sub-headings with background colours you can use 100% width tables just surrounding the headline, and switch it off so the text below is just in the normal window, and keep repeating that for as many headlines as you need.

Tables that don't have very precise column sizes - i.e. those that allow one or more columns to resize as the window is resized - can mess up sizing quite badly, so see the tips about making sure tables stay the right size

Height
I don't think this minimum height option actually works on any RISC OS browser, but on PCs you can tell the table to be at least 480 deep and it will indeed be at least 480 deep, or more if it needs it. This is great for when you've got an image as a background to one of the cells or columns, and want to make sure that all of the image is seen; of course, backgrounds in tables aren't generally supported in RISC OS browsers either.

Border
Each cell, and the entire table, can have a border around it - usually in 3D, size permitting. A size of 0 will turn it off completely, which these days is often the default - but do it anyway to make sure!

On PC browsers you can tell the border to have a colour and it will be rendered a flat line in that colour (Internet explorer further allows you to specify the light and dark colours of a 3D border); none of his is available to the RISC OS-only designer. A cool trick is to set the border to 0, and then set cell spacing to, say, 2 or above - this will show the background colour through, so if you're using a white page background you will appear to have a plain white border around everything. To get a colour border, you can place the entire table inside another, single-cell, table, the cell of which has you desired "border" colour (play with the cellpadding on this table to get the outer border to your desired width). Make sure you set the background colour on the cells in your inner table though, otherwise the "border" colour will show through the whole o the transparent main table instead of just around the edges.

Columns
By specifying how many columns a table is to have from the start, it aids the drawing of that table. On some browsers this is the quick way of getting all columns equally spaced - four columns will each take up 25% of the available space without having to specify a width in the cell definitions individually. However, I wouldn't rely on this totally and would still put in the individual cell widths too.

(Cell) Spacing
This is the space in between each cell of the table, so if you have a border set you can up the cell spacing to push the cells apart and get a sort of double outline to show up. It's also handy to push coloured cells apart to get border effects without using the browser's (limited) built-in border facility.

(Cell) Padding
Cell padding pushes the text away from every edge of the cell kind of like an all-round margin, which can be good for clarity (text too close to the edge of a coloured cell can be messy, and slightly harder to read).

Align
Although the rows and cells can define the alignment of the contents of the tables, this option is to set the alignment of the table itself (in relation to the rest of the document). Left and right alignment of the table using the align attribute acts in the same way as images being aligned, with text outside flowing around the table - handy for having images with captions and backgrounds colours etc. However, the No text flow tick box will become available if you want to stop text flowing around the table when it's left or right aligned.

Colour
You can set the default colour for the table here; strictly speaking you should set the colour in the table cells only, but this option often works in modern browsers.

Image
Exactly the same as the colour option, although with the added problem that background images in tables doesn't work in most RISC OS browsers at the time of writing.


Table Rows

Table Rows

Table Rows


Alignment
Items (such as text) inside the cells can be either left, right or centrally aligned - default will not bother to specify one, which usually means things will be left aligned.

Fresco also supports align="justify", which like a word processor with full justification switched on will stretch any text spacing so that both edges of the text are perfectly straight; however, this doesn't appear to work in any other browser without using Cascading Style Sheet (CSS) commands, so both methods are used when this feature is used.

Vertical Alignment
The default action is to have text centrally aligned - so if you have a small piece of text in one cell and a larger piece of text in another, the small will seem to float around the middle of the cell. Personally I always switch on valign="top", which means both pieces of text start from the top of their cells no matter how far down they reach.

Background colour/image
This sets the background for the entire row, which can override the background set up for the rest of the table and can be overridden on a cell-by-cell basis in the <td...> definition.


Table Data (Cells)

Table Data (Cells)

Table Data (Cells)


As mentioned before, these are the boxes into which you put the actual data; they're the smallest element of a table, but they're also where all the action takes place.

Width and height You can use these options to set the minimum width and height of an individual cell in pixels or percentages (which may influence cells on the same row and/or column, because of course they're linked in straight lines). Note that the height only seems to be a PC thing, and width can be very variable - see below for information about ensuring the correct size.

Column span and row span Tables are grids that are so many columns wide, and so many rows tall. This is pretty much all you need for tabulating data - for instance, copying data exactly like it's show in a spreadsheet program - but if you want to use tables for interesting layout it's often useful to be able to break the rigid spreadsheet-like structure.

For instance, you have a three-by-two table, but you would like to have another row along the top which spans the entire table so that you can put a title in there; well, you'd use <td colspan="3"> for just such an occasion:
Title here
Data Data Data
Data Data Data

<table border="1" cols="3">
  <tr>
    <td colspan="3" align="center">
      Title here
    </td>
  </tr>
  <tr>
    <td width="33%">Data</td>
    <td width="34%">Data</td>
    <td width="33%">Data</td>
  </tr>
  <tr>
    <td width="33%">Data</td>
    <td width="34%">Data</td>
    <td width="33%">Data</td>
  </tr>
</table>
I wouldn't recommend using headline commands (e.g. <H1>...</H1>) in that title box, as headline commands create large linespaces after you've closed them, so there'd be a big gap under the title; some people frown on using <font...> tags anywhere at all but that's my recommendation for titles in tables.

You can also span a number of rows in exactly the same way...
Side
Bar
First bit of data
Second bit of data

<table border="1" cols="2">
  <tr>
    <td rowspan="2">
      Side<br>
      Bar
    </td>
    <td>
      First bit of data
    </td>
  </tr>
  <tr>
    <td>
      Second bit of data
    </td>
  </tr>
</table>
Notice how there's only one cell defined in the second row? that's because the rowspan command means the first cell in the first row is also the first cell in the second row.

Other options
As in the row section you can set the horizontal and vertical alignment of data inside each cell, and as in both the row and table section the background colour and image of each cell can be set. The cell is the proper place to set the background, and I usually set the alignment forthe entire row and just override that with changes in some individual cells.

These settings override the settings in other places - that is, they override the default background colour and alignment settings for the row, and override the default background colour of the whole table.


Help! My table columns never come out the right size!
Various bugs in various browsers can make something as simple as getting table columns to stay the size you want them more an arcane art than a simple piece of layout; for instance, there is a "bug" in Netscape (I say "bug" in speechmarks as it's never been fixed, so maybe it's a "feature") which means it always presumes values up to and including 100 are percentages rather than pixel sizes, even though there's no % mark after them. Here's a couple of tips for overcoming this:

  1. if everything up to 100 is considered a percentile, why not try 101?
  2. A more strong-arm approach is as follows:
    a. Set your smaller column, say 80 pixels wide, to 80 pixels, and then brace it with an "invisible" graphic. Create a GIF graphic that is wholly made up of mask - it doesn't even have to be the right size, I generally have a small padding image of maybe 16x16 pixels in my graphics directory and use the img tag's width attribute to stretch it to the appropriate size. Do it at the bottom of the column, just before you close the cell, so that it doesn't make the text or images in this column drop down from the top of the cell (unless you want this to happen of course)
    b. Now that the slimmer column is braced, it might be that it tries to move into the other other cell, making it too big instead of too small. Simply make the bigger cell have a width of 100%, which theoretically should make the sum of the cells wider than the actual table, but in reality will simply make sure that cell takes up all available room in the table - bar that which is braced with your padding graphic of course.
You can of course combine this in many ways, for instance have two small columns to one side (a menu and a small margin so text isn't too close to the menu bar perhaps?), then a couple of columns at 50% each, and finally another coloured column for footnotes and the like. The two 50% columns are not guaranteed to work of course, but so long as they have roughly equal amounts of data in them they should do okay - or you can use padding graphics here too to make sure they at least get the same minimum size, and it will make them more likely to play ball when they exceed this size.

Example code

What follows is an example of a table used for laying out a page with a large bar along the top for a headline, a side bar for links etc., a small margin column, and a large area for displaying text. It's very much like the code used to generate these help pages, but has the advantage of not having lots of help text in the way!

Just look at the source of this page (it's easy to find - just use [Ctrl] and [down cursor] to get to the end of this page); there's even comments in the code to make it a little easier to understand. I've also used an image that is quite obviously not blank to show you where your invisible padding graphic should go.

Title Here
Link 1
Link 2
Link 3
pad.gif
pad.gif

Main text

The "broken" graphics are there for a purpose, honest.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed quam lacus, pulvinar non, commodo a, nonummy et, neque. Integer sit amet nisl. Vivamus convallis. Quisque rhoncus, tellus in malesuada euismod, est enim condimentum neque, sed eleifend nulla nisl semper velit.


HTML³: © Richard Goodwin 1997-2002

|