While not every Site makes use of the familiar HTML TABLE tag, most do. This page presents several common alternatives for you to consider when you are selecting a "standard" for use on your Site.
Yes, RidgeStar recommends that data displayed in a Site in a Tabular format should normally be presented in a consistent style and appearance within the Site. This does not mean that every TABLE must have an identical presentation, but you should strive to have every table with a similar purpose appear the same as others with the same purpose.
TABLEs basically have 4 general characteristics that can generally effect how they appear on a Site. We reference them as Borders, Backgrounds, Headings, and Alignment.
- Borders
- The Borders around a table permit the data contained within a single cell to have an organized and "contained" appearance.
- Backgrounds
- The background treatment in headings, rows, columns, and/or cells can provide a nice visual connection between related data.
- Headings
- Key titles on top of columns or to the left of input fields can help identify the data being displayed in the table.
- Alignment
- The number of text characters in cells in the row and all the cells in a specific column will affect the relative width of the columns. Centering in the cell is quite often appropriate, but not always.
Sample Table Presentations
The following samples are just that - Samples. These are by no means the only variations of the basic TABLE elements. On the other hand, they do demonstrate how the various treatments can have a significant impact on the presentation of data.
| #1. No Formatting | #2. Light color with some dimension |
|---|
| Line1 | Contents2 | Contents3 |
| Line2 | Contents2 | Contents3 |
| Line3 | Contents2 | Contents3 |
|
| Line1 | Contents2 | Contents3 |
| Line2 | Contents2 | Contents3 |
| Line3 | Contents2 | Contents3 |
|
| #3. Graphic Header Shaded Background and Small Border | #4. Dotted Red Border with Valentine Theme |
|---|
| Graphic header |
| Line2 | Contents2 | Contents3 |
| Line3 | Contents3 | Contents3 |
|
| Line1 | Contents2 | Contents3 |
| Line2 | Contents2 | Contents3 |
| Line3 | Contents2 | Contents3 |
|
| #5. Framed Borders, Heading with Background and highlighted cell | #6. Cloud Table with White Data |
|---|
| Heading1 | Heading2 | Heading3 |
|---|
| Line1 | Contents2 | Contents3 |
| Line2 | Contents2 | Contents3 |
| Line3 | Contents2 | Contents3 |
|
| Heading1 |
| Line1 | Contents2 | Contents3 |
| Line2 | Contents2 | Contents3 |
| Line3 | Contents2 | Contents3 |
|
| #7. Happy Halloween! | #8. No Borders or Spacing, Alternating Shaded Backgrounds by Row |
|---|
| Halloween |
| Monsters | Ghost | Vampire |
| Candy | Candy Corn | Chocolate Bars |
| Activites | Costume Contest | Bobbing for Apples |
|
| Heading1 | Heading2 | Heading3 |
|---|
| Line1 | Contents2 | Contents3 |
| Line2 | Contents2 | Contents3 |
| Line2 | Contents2 | Contents3 |
|
