6Tables

So far, we've covered basic page markup and adding content — but this would give you a page without columns (or, technically, one wide column) — what we call wall-to-wall text. Now it's time to address adding some form to our pages. This can be achieved with tables.

Usage Note: while the web design industry has turned to table-less layouts (using divs), I'm frankly surprised at how many designers don't know how to use tables at all. This falls under the heading of "knowing your tools" — and it's vital for those who might have to compose HTML email newsletters, for example: email programs are generally not as advanced as browsers, and so one has to take a step back in composing design for delivery by email. And, if you take the time to understand tables, you won't find yourself bogged down when you face them.

Because HTML was originally devised to convey scientific works, the original versions of HTML and browsers did not provide for much more than headlines, outlines, text and a grey background. What we have now is glorious, but long, linear screen-wide columns of content are not always what we're after. Enter the table.

Tables are rectangular boxes which can be divided up into "cells" (columns) which can contain images, text and other page contents. An example is the Page Contents menu above. Although there are other ways to place content into web pages, tables are excellent for organizing content and giving it a more professional and polished look.

Tables are also block level elements.

While we're giving our tables a border (the grey outlines) so that you can see them, tables can be "borderless" or non-visible containers for your page contents: this entire Tutorial was composed in tables.

:: The Table Tag

This table has two rows with two cells each. I'm using the border attribute to show the box parameters.

Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

Below, note that the coding runs left to right, top to bottom:
<table> specifies the table
<tr> is the table row, with a closing </tr> after all the cells
<td> is the "table data" (although it's really a cell, and not "data"), with a closing </td>
</table>
closes the table

<table>
<tr>
<td>
Row 1, Cell 1</td>
<td>
Row 1, Cell 2</td>
</tr>
<tr>
<td>
Row 2, Cell 1</td>
<td>
Row 2, Cell 2</td>
</tr>
</table>

Getting Specific with Tables

It's important to include table and cell widths to keep your tables from misbehaving (resizing themselves), and to help the page to display faster because the browser does not have to wait to download the entire table contents before determining what sizes are needed.

:: Table and Cell Widths in Percentages

Tables with width percentages will expand against a percentage of the screen; a width of 100% means the table will take up the whole screen width — or 100% of the container it's in; in this case, the table that "houses" this page. The cell <td> widths do not have to be equal but should add up to 100% always.

A

B

<table width="75%">
<tr>
<td
width="50%">A</td>
<td
width="50%">B</td>
</tr>
</table>

:: Table and Cell Widths in Pixels

Again, pixels are "dots" that make up the computer screen display.
The cell <td> widths do not have to be equal but should add up to the table width:

A

B

<table width="300">
<tr>
<td
width="125">A</td>
<td
width="175">B</td>
</tr>
</table>

:: Cell Padding

Cell padding adds a buffer "margin" between the cell borders and contents:

A

B

<table cellpadding="5">
<tr>
<td>
A</td>
<td>
B</td>
</tr>
</table>

:: Cell Spacing

(This table also has a border, so that you can see the spacing.)

A

B

<table cellspacing="5">
<tr>
<td>
A</td>
<td>
B</td>
</tr>
</table>

:: Border

Specifying a border:

A

B

<table border="5">
<tr>
<td>
A</td>
<td>
B</td>
</tr>
</table>

Or no border — notice how the lined border disappears. (Tip: if you're using a no-border table for a menu and page content, it's good to add some cellpadding.)

A

B

<table border="0">
<tr>
<td>
A</td>
<td>
B</td>
</tr>
</table>

 

NOTE: for best results, the table tag should have width, cellspacing, cellpadding and border. This leaves nothing to chance!

<table width="75%" cellspacing="0" cellpadding="0" border="0">

:: Vertical alignment within cells

A

 

B

<table>
<tr>
<td
valign="top">A</td>
<td
valign="bottom">B</td>
</tr>
</table>

:: Horizontal alignment within cells

Notice that we haven't specified an alignment for "A" below; the browser default is left-alignment.

A B

<table>
<tr>
<td
>A</td>
<td
align="right">B</td>
</tr>
</table>

:: Cell Background Color

A

B

<table>
<tr>
<td
bgcolor="#CCCCCC">A</td>
<td
>B</td>
</tr>
</table>

(Where #CCCCCC is medium gray.)

:: Cell Background Image

Here, we're using our "dot" as an example:

A

B

<table>
<tr>
<td
background="dot.gif">A</td>
<td
>B</td>
</tr>
</table>

:: Spanning Rows & Columns

Cells can be joined together, either vertically or horizontally.

Notice here that Row 1, Cell 1 spans two rows. Row 1 contains two cells, and Row 2 contains only one cell.

<table>
<tr>
<td
rowspan="2">Row 1, Cell 1</td>
<td>
Row 1, Cell 2</td>
</tr>
<tr>
<td>
Row 2, Cell 1</td>
</tr>
</table>
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1


Here, Row 1 has only one cell; Row 2 has two cells.

<table>
<tr>
<td
colspan="2">Row 1, Cell 1</td>
</tr>
<tr>
<td>
Row 2, Cell 1</td>
<td>
Row 2, Cell 2</td>
</tr>
</table>
Row 1, Cell 1
Row 2, Cell 1 Row 2, Cell 2


If you're thinking that this is how many web designs are assembled, you're right!

 

:: Nesting Tables

Nesting Tables. Tables can be "nested" within table cells, but care should be taken to ensure that the nested table is not wider than the outer table ... or that images placed into table cells are not wider than the cell — whether the tables are nested or not.

Nested table
 
 

 

Caveats:

  • Images breaking up in tables: sometimes images are cut up (into pieces) in image programs, and then reassembled in tables. When the reassembled image is "broken up" — that is, spaces appear between the pieces, this is usually caused by the closing </td> tag being shunted to a new line, rather than on the same line as the image. Check those closing </td>'s!
  • Empty Cells: For empty table cells, add &nbsp; — or the cell will "collapse" (disappear) in some browsers.
  • It's generally not so great to nest tables inside tables inside tables. If you need that kind of layout, it's better to go with divs.

Formatting HTML. Some people like to indent various sections of HTML, like tables. While this can make it easier to sort through your coding, bear in mind that every space and indent increases the overall file size of the page, thereby increasing download time.


This covers our basic table formatting. Play with tables, and you'll find you can do a lot with them.

Next, we'll address fonts and the miraculous "CSS"

 

  1. The Learn Basic HTML Series:
    1. Learn Basic HTML and Web Page Construction
    2. What is HTML?
    3. HTML Page Structure
    4. Head Tag, MetaTags & Titles
    5. Adding Page Content
    6. Tables
    7. CSS and Fonts
    8. Putting It All Together
    9. Finale

DianeV Web Design Studio

© 1998- DianeV Web Design Studio. All Rights Reserved. :: Privacy/Legal/Return Policy. Any unauthorized reproduction
or distribution of the contents of this website is a violation of copyright law and may result in severe civil and criminal penalties.
Copyscape.com