Creating Tables in HTML

Tables can arrange things in columns for Web Browsers. Since there is no TAB capability, this is the only way to get info arranged neatly without using lots of images and frames and other stuff that isn't supported by most browsers, not that all browsers support tables :-) . Tables can be created with Borders and Captions. Their columns, rows and cells can get quite Fancy using various attributes for Alignment and Spanning of columns and rows.

A Table is created as part of a regular HTML page and is created between the <TABLE> and </TABLE> codes. You can have several forms on the same page (as this page demonstrates).

The main codes used in a table are

NOTE: Because some browsers do not support tables (an HTML 3.0 standard) yet, I usually
  1. put a <P> (paragraph) at the end of each row so data is at least in lines, and
  2. change the look of various cells using <STRONG> and <EM> so the columns can still be distinguished.
If you're only supporting inhouse applications with newer browsers, don't bother doing this. My examples don't use these because I figure if you're wanting to create tables, then you probably have a forms-capable browser unless you're Dilbert's boss.

A Basic Table

A plain vanilla table that arranges data like this:
Column 1 Column 2 Column 3
Cell A1 Cell A2 Cell A3
Cell B1 Cell B2 Cell B3

is built using the following code:

<TABLE> </TABLE>

A Basic Table with Border

The table above is clean and sparse, but usually not pretty enough or organized enough, especially if you have many columns and rows. You can of course add more rows and columns very easily, but you may want a border around each cell much like a spread sheet. To do that, merely add BORDER as part of the initial TABLE tag as in the code below.

Column 1 Column 2 Column 3
Cell A1 Cell A2 Cell A3
Cell B1 Cell B2 Cell B3

Source code:

<TABLE BORDER> </TABLE>

A Basic Table with CAPTION

 <CAPTION> and </CAPTION> allow you to create a caption for a table. The code for the caption must go between the <TABLE> and </TABLE> codes even though the caption goes outside the table!

This is a caption for the table
Column 1 Column 2 Column 3
Cell A1 Cell A2 Cell A3
Cell B1 Cell B2 Cell B3

This is built using the following code:

<TABLE BORDER> </TABLE>

Alignment of Tables, Captions and Cells

Within the <TABLE>, <CAPTION>, <TH>, and <TD>, you can use ALIGN= to align the entire table, the caption or the cell info in various ways. Basic ones are Of course there are other attributes and each means something slightly different depending on the context. Not all of these work well in all browsers however because 1) some browsers don't support them and 2) tables tend to squish things together and align data according to the biggest values in a column so things can get out of whack quickly (and is one of the reasons I have to create extra large Cell data for the alignment to display). There is also a VALIGN for Vertical Alignment but I haven't used it yet.

This is a caption for the table
Col 1 Col 2 Col 3
Cell Data A1 Cell Data A2 Cell Data A3
Cell Data B1 Cell Data B2 Cell Data B3

This is built using the following code:

<TABLE BORDER> </TABLE>

Spanning Rows and Columns

 You can have Cells, Data or Header, span multiple rows or columns using the <ROWSPAN> or <COLSPAN> attributes. Each takes a value of the number of rows or columns to span. Once you begin spanning, make sure you end up with the correct number of cells in the appropriate place in each row.

Table using ROW and COL Span
Column heads 1 and 2 Column 3
Cell A1 Cells A2 and B2 Cell A3
Cell B1 Cell B3

This is built using the following code:

<TABLE BORDER Align ="center"> </TABLE>

More Spanning

 Spanning allows you to get very fancy with your tables. You can also use multiple THeaders to break things up nicely

Fancy Table
Brucellosis Tracking System
Vaccinated Infected
COW ID Yes No Yes No
Cow Number 0001 X X
Cow Number 0002 X X
Cow Number 0003 X X
BUFFALO ID ====================
Buffalo Number 0001 X X
Buffalo Number 0002 X X

This is built using the following code:

<TABLE BORDER> </TABLE>
| basic layout | formatting codes | links to elsewhere | pictures | view files | forms |
Mike Moxcey May 1996