John McSweeney
- Home |
- Painting |
- Computing |
- Web Design |
- Miscellaneous |
- Search
Content
- Introduction
- Form and Content
- Colour
- Usability
- Usability Guidelines
- File Structure
- Browsers
- Tables
- Gifs and JPEGs
- Introduction to HTML
- HTML basics
- Introduction to CSS
- Text as graphic
- Displaying Maths
- MS Equation Editor
- Mathcad and MathML
- Displaying Code
- CSS Selectors
- XHTML intro
- XHTML syntax
- Software
May 10, 2008, 12:47 am
Website Design
Tables
At this stage, I intend to discuss strategies for using tables, rather than provide any specific markup. I will leave that until later.
In the past, like many designers, I relied heavily on tables to control the layout of text and graphics on a webpage. I now use CSS to control page layout, but occasionally still need to place text, or images, in tables. Several examples can be found on this page, where not only did I need to tabulate content, namely information about different kinds of objects, but also illustrate the structure of an array. On this occasion I decided that HTML tables provided the best option.
Deciding on the size for a table, or more precisely its width, does require some thought. As always, there are conflicting views on what constitutes best practice, but everyone is agreed on one point. Designers have no control over the resolution settings of a user's monitor.
At present, the majority of users will set monitor resolution settings to one of two values.
- 800 x 600 pixels
- 1024 x 768 pixels
There are two strategies that can be adopted:
- Make the table a percentage size in width. For example, if it
is being used to control page layout, one could set the table width to 95%.
This ensures that the table will expand to fill most of the width
of the browser, no matter what resolution setting the user has chosen.
However, this may lead to a problem.
A line of small paragraph text (note that I am not suggesting fixed-size fonts) at 1024 x 768 pixels, will be strung out across the screen in a manner that may make for uncomfortable reading (e.g. 30 words per line). However, modern browsers do provide users with a choice in this matter. Text size can be adjusted, provided the designer has not used fixed size fonts. This reinforces an important principle for successful UI design.
Think user.
Offer the user a choice by designing flexibly. Again CSS technology provides designers with the tools to maximize user choice. Increasingly, this is the strategy that I have adopted for my web pages. For this example of a table, both font size and table width can be set to non-fixed values. - The second strategy, adopted in the past by many designers, is to control page size by setting a table's width to a fixed size of approximately 600px. This ensures that anyone still using a 640 x 480 screen resolution will not be required to scroll horizontally; this is behaviour that should be prevented. One drawback to this approach, and very much tied to removing user choice, is that a 600 pixel wide table wastes available browser space at the margins for higher resolution settings. It is not entirely without its merits though. By aligning it to the centre of the screen, again this is simply achieved using CSS, one can ensure that the table's contents are viewed comfortably, at any display setting (including 640 x 480), without the need for horizontal scrolling.
Before illustrating how to control the layout of text with complete certainty, albeit at the risk of upsetting HTML purists, I want to discuss gifs and jpegs.
Next page » Gifs and JPEGs
Previous page « Browsers