| Text only | |||||
 |
 |
||||
|
|||||
WWW Information Pack
Topics covered: uses of tables, page layout, disadvantages of tables, CSS, frames, creating tables in Dreamweaver, creating tables in XHTML code, slicing images into tables
The ability to create tables inside web pages was first introduced into the HTML language to allow the publication of tabular data, as follows:
| catalogue number |
price (£) |
|---|---|
| 10225 | 15 |
| 10344 | 23 |
| 11337 | 12.50 |
Example 12.1 - The use of a web table to display purely tabular data
However, as the web became more popular, and increased in technical and visual complexity, web developers quickly realised that tables could be adapted for other uses. By placing images and blocks of text inside table cells, it became possible to create more interesting and elaborate web page layouts. Advanced web design techniques now routinely include embedding smaller tables within the cells of larger outer tables, and making the table borders invisible (Figure 12.1).
Figure 12.1 - A modern web page constructed from a number
of tables.
Top: as the page is intended to be seen, with table borders hidden.
Bottom: with table borders made visible as grey lines.
The main advantage of using tables for web page layout is the opportunity to create visually appealing designs, which can be easy and pleasant for most web users to read and navigate. By specifying the heights and widths of tables (and of the individual cells within them), it is now possible to create web page layouts with almost as much precision as is possible with traditional print-based design.
However there are also some important disadvantages to this kind of tables-based web design. As with many aspects of web development, it is necessary to use more complex techniques thoughtfully, and to balance the advantages with the potential disadvantages:
Blind and partially sighted users often use text-to-speech web browsers. These programs read out the contents of web pages in a synthesised voice. However, if the content of a web page is split up into a number of table cells, such software has no way of "knowing" the order in which these blocks of text should be read out. Quite often they may read "across" the rows of tables, when the page may be designed in a series of newspaper-like columns. This can lead to the page making little sense, when read out through such software.
| This page has been designed... | when read by an automated text-to-speech tool | |
 |
the order of reading may go horizontally across the rows | |
| to be read in newspaper-like columns, but... | and so may make no sense. |
Example 12.2 - The placement of text in this table may cause trouble for a
text-to-speech browser, if it reads horizontally across the rows
It is possible to specify the dimensions of tables and table cells in "fixed" units (pixels), such that the tables are always displayed at the same fixed width. Typically, a design width of just under 800 pixels will be used, since most PC users now have screen displays set to 800x600 pixel resolution or higher.
The disadvantage of this technique is that the pages may look odd to users of computers with either very low-resolution or very high-resolution screens (Figure 12.2):
Figure 12.2 - On a high-resolution screen (left) a page built from fixed-width tables will leave a large area of blank space. On a low-resolution screen (right), it will not all fit onto the screen, so the user will need to use both the horizontal and vertical scroll bars.
Increasing the default text size in a viewer's browser may also cause such fixed-width table designs to break, because the larger text tends to force the table cells out beyond the designer's carefully chosen widths.
To avoid the above problems, web designers may prefer to specify table widths in relative (percentage) units, so that the page layout expands or contracts in accordance with the screen size viewing it. This also helps to avoid problems if the user changes their text size.
Figure 12.3 - A page built from relative width tables will expand to accommodate itself to a high resolution screen (left), or contract to a low resolution one (right)
When working with complex table structures it is necessary to check their appearance in a range of different web browsers. Older browsers in particular can be temperamental and inconsistent in the way they display tables. It is possible to spend hours carefully crafting a complex table structure for one browser, only to find that it displays incorrectly in another.
At the time of writing, tables are the most popular and commonly-used method of laying out web page designs. In future, it is likely that more modern alternative techniques will replace them, because of the problems highlighted above.
At the moment, the World Wide Web Consortium (W3C) recommends that Cascading Style Sheets (CSS) should be used rather than tables for page layout. However, the current level of support for CSS in the major web browsers is insufficiently advanced to make this an easy task for many designers, especially beginners. See Factsheet 13 for more discussion of CSS.
Some older web pages use frames to achieve a more complex layout. Frames are a method of splitting up the browser window, such that it displays two or more different web pages at once (Figure 12.4). Except in special cases, the use of frames is strongly discouraged, because they cause major accessibility and usability obstacles. See www.useit.com/alertbox/9612.html for more discussion of this issue.
Figure 12.4 - The use of frames to split the browser window into separate sub-pages is now discouraged
Dreamweaver makes it very easy to create tables in your web pages - use the menu command
A dialogue box is displayed, which allows you to specify the number of columns and rows you want in your table. You can also specify the amount of cell spacing (how far the table cells are separated from one another, in pixels) and cell padding (how far the contents of a table cell are separated from the inner border of that cell, in pixels). The width of the table can be specified either in percent of the available screen width, or in fixed-width pixel units. The border value specifies the width of the outer border to be displayed around the table - you can set this to 0 if you want the table cells to have no borders at all, i.e. the table will be invisible when viewed in a web browser.
Figure 12.5 - Dreamweaver's dialogue box
Once you have inserted the table, you can type text or insert images directly into its cells, or drag-and-drop content from elsewhere in your page into the table cells. You can also select the table with your mouse, and click-and-drag in its borders to re-size it, or to adjust the width of individual cells or columns:
Figure 12.6 - You can adjust the relative widths of table columns by dragging with the mouse in Dreamweaver
In some cases you may want to merge a number of table cells, to create a larger single cell. In Dreamweaver, you can simply select the cells with your mouse, right-click, and select (Figure 12.7)
Figure 12.7 - Top: merging two table cells using mouse-clicks
in Dreamweaver.
Bottom: the resultant table with a larger merged cell
Dreamweaver MX contains some advanced features that enable you to "draw" tables directly onto the page. Firstly, in Dreamweaver's floating Insert toolbar, click on the lower-right small button to go into Layout View (Figure 12.8).
Figure 12.8 - Dreamweaver's Layout View tool in the lower-right part of its floating Insert toolbar
Having done this, clicking on the small buttons in the Layout section of this same toolbar will allow you to drag with the mouse to create tables (the leftmost button) and to create cells within tables (the rightmost button) directly in Dreamweaver's web editing window (Figure 12.9).
Figure 12.9 - You can drag with the mouse to draw a table in Dreamweaver's Layout View
Making tables in "raw" HTML or XHTML code can be rather tedious and error-prone, due to the large number of table cells and rows to be included. Even expert XHTML coders tend to resort to visual web editors such as Dreamweaver when they are required to create large tables. Nevertheless, the following is a brief overview:
Tables are specified between the <table> and </table> tags.
The border attribute determines whether the table has a visible border, or whether it is invisible (border="0").
Each new row in the table is specified between <tr> and </tr> tags, and each cell within a row is placed between <td> and </td> tags.
Here are two simple examples:
| <table border="2">
<tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </table> |
|
You can make cells "run together" vertically and/or horizontally, using the rowspan and colspan attributes:
| <table border="2">
<tr> <td rowspan="2">A</td> <td>B</td> <td>C</td> </tr> <tr> <td colspan="2">D</td> </tr> </table> |
|
||||||
There are many more HTML / XHTML tags that you can use to control the layout and appearance of your tables - for full details see the references at the end of this Factsheet.
Advanced web designers often decide to "slice up" their large images into several smaller ones, and then re-assemble them again with the aid of a table (Figure 12.10).
Figure 12.10 - This image has been sliced up and re-assembled in a table. The table borders and cell padding have been added here to illustrate the technique - once these are removed, the net effect is indistinguishable from the original single image.
There are two main reasons why this might be considered necessary:
Although image-slicing and table construction can be performed manually, it is extremely laborious and error-prone. Luckily many of the major image editing software packages can now automate the process, including Adobe Photoshop, Macromedia Freehand and Paint Shop Pro.
In Paint Shop Pro, first load the image file that you want to slice. Then use the menu command:
This opens Paint Shop Pro's Image Slicer tool. You can select the tool button (in the middle of the top row of buttons) to mark out the places where you want your image to be cut (Figure 12.11).
Figure 12.11 - Paint Shop Pro's Image Slicer tool. The top-left image slice is currently selected (this is indicated by the green border).
Note that you should specify a separate for each image section, if you want your pages to be fully accessible and technically valid.
The button allows you to create an interactive mouseover effect. You need to specify an additional image that should be loaded when the user passes their mouse over the currently-selected image slice.
When you click on , Paint Shop Pro will prompt you for a folder location, into which it will save each slice of the image as a separate file, plus an HTML page that contains the table code for piecing the image back together again - including the necessary JavaScript code to make the rollover effect work.
Note that Paint Shop Pro produces very basic HTML code, so some additional code refinement and conversion of the tags to lower-case may be necessary if you are working in the newer XHTML language. In addition, its code assumes that your HTML page and image files will all be located together in the same folder when you ultimately publish the image. If this is not the case, you may need to amend the paths of the image references within the generated code.
A good tutorial on coding tables in HTML is available at www.w3schools.com/html/html_tables.asp
The web authoring classes run by DISS include an introduction to creating tables in Dreamweaver - see www.abdn.ac.uk/web/courses.hti for more details.
The book Web Design in a Nutshell by Jennifer Niederst, published by O'Reilly, contains an excellent chapter on tables. It is currently in its second edition, but be sure to check for more recent versions.
 Contents page | Next Factsheet  |
View
this page as text only | 
Email
this page to a friend
