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
- TR: Table row which begins and ends a row of the table using
<TR> and </TR>
- TD: Table Data. These codes must surround each cell of a table using
<TD> and </TD> and
- TH: Table Header. These are like TD codes but are used for the column headers in a table
(which are usually bolded).
NOTE: Because some browsers do not support tables (an HTML 3.0 standard) yet, I usually
- put a <P> (paragraph) at the end of each row so data is at least in lines, and
- 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>
<TR>
<TH>Column 1
</TH>
<TH>Column 2
</TH>
<TH>Column 3
</TH>
</TR>
<TR>
<TD>Cell A1
</TD>
<TD>Cell A2
</TD>
<TD>Cell A3
</TD>
</TR>
<TR>
<TD>Cell B1
</TD>
<TD>Cell B2
</TD>
<TD>Cell B3
</TD>
</TR>
</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>
<TR>
<TH>Column 1
</TH>
<TH>Column 2
</TH>
<TH>Column 3
</TH>
</TR>
<TR>
<TD>Cell A1
</TD>
<TD>Cell A2
</TD>
<TD>Cell A3
</TD>
</TR>
<TR>
<TD>Cell B1
</TD>
<TD>Cell B2
</TD>
<TD>Cell B3
</TD>
</TR>
</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>
<CAPTION> This is a caption for the table <CAPTION>
<TR>
<TH>Column 1
</TH>
<TH>Column 2
</TH>
<TH>Column 3
</TH>
</TR>
<TR>
<TD>Cell A1
</TD>
<TD>Cell A2
</TD>
<TD>Cell A3
</TD>
</TR>
<TR>
<TD>Cell B1
</TD>
<TD>Cell B2
</TD>
<TD>Cell B3
</TD>
</TR>
</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.
- JUSTIFY will make the TABLE fill the space between the columns or a CELL to fill its own space
- BLEEDRIGHT and BLEEDLEFT allow an entire TABLE to be aligned with the left or right borders.
- TOP or BOTTOM let the CAPTION go at the top or the bottom of the table.
- DECIMAL allows the CELL data to be aligned over decimal points.
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>
<CAPTION Align ="Bottom"> This is a caption for the table
<CAPTION>
<TR>
<TH align="left">Col 1
</TH>
<TH align="center">Col 2
</TH>
<TH align="right">Col 3
</TH>
</TR>
<TR>
<TD>Cell Data A1
</TD>
<TD>Cell Data A2
</TD>
<TD>Cell Data A3
</TD>
</TR>
<TR>
<TD>Cell Data B1
</TD>
<TD>Cell Data B2
</TD>
<TD>Cell Data B3
</TD>
</TR>
</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">
<CAPTION Align ="Bottom">Table using ROW and COL Span<CAPTION>
<TR>
<TH colspan="2">Column heads 1 and 2
</TH>
<TH align="right">Column 3
</TH>
</TR>
<TR>
<TD>Cell A1
</TD>
<TD rowspan="2">Cells A2 and B2
</TD>
<TD>Cell A3
</TD>
</TR>
<TR>
<TD>Cell B1
</TD>
<TD>Cell B3
</TD>
</TR>
</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>
<CAPTION>Fancy Table<CAPTION>
<TR>
<TH>
</TH>
<TH colspan="4" align="center">Brucellosis Tracking System
</TH>
</TR>
<TR>
<TH>
</TH>
<TH colspan="2" align="center">Vaccinated
</TH>
<TH colspan="2" align="center">Infected
</TH>
</TR>
<TR>
<TH>COW ID
</TH>
<TH align="center">Yes
</TH>
<TH align="center">No
</TH>
<TH align="center">Yes
</TH>
<TH align="center">No
</TH>
</TR>
<TR>
<TD>Cow Number 0001
</TD>
<TD>X
</TD>
<TD>
</TD>
</TD>
<TD>X
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>Cow Number 0002
</TD>
<TD>
</TD>
<TD>X
</TD>
</TD>
<TD>
</TD>
<TD>X
</TD>
</TR>
<TR>
<TD>Cow Number 0003
</TD>
<TD>
</TD>
<TD>X
</TD>
</TD>
<TD>X
</TD>
<TD>
</TD>
</TR>
<TR>
<TH>BUFFALO ID
</TH>
<TH colspan="4">====================
</TH>
</TR>
<TR>
<TD>Buffalo Number 0001
</TD>
<TD>X
</TD>
<TD>
</TD>
</TD>
<TD>X
</TD>
<TD>
</TD>
</TR>
<TR>
<TD>Buffalo Number 0002
</TD>
<TD>
</TD>
<TD>X
</TD>
</TD>
<TD>
</TD>
<TD>X
</TD>
</TR>
</TABLE>
| basic layout
| formatting codes
| links to elsewhere
| pictures
| view files
| forms
|
Mike Moxcey May 1996