Collected by
Elizabeth Janson
Home Page

Tables - basics

One small point - close your tags. Netscape gets upset, and style sheet definitions do not know when to stop, unless the tag that started the action, is also ended. So get a habit - shut the gate!

Remember to close the <P> tag before the TABLE. If you fail to close the P element before the following table, IE4 will treat the table as part of the P element, which is incorrect. (For example, if you have <A NAME="here"></A> at the end of your TABLE, to mark a new section, the LINK opens in the TABLE, instead of after it.)

Netscape treats tables almost like they're completely separate from the main document. Therefore, you may be surprised to find that styles you applied to the BODY section aren't inherited by your tables.
Avoid the problem by including the TR and TD definitions when you define your BODY styles.

Table Elements

We are familiar with the standard TABLE tags, TR, TD, COLSPAN and ROWSPAN to manage the cells in the table grid. TH is used instead of TD to define a Heading

<TABLE border="1" bordercolor=red>
<TR><TH colspan=4>Heading
<TR><TD>1 <TD>2 <TD>3<TD rowspan=3>4
<TR><TD colspan="2">5 <TD>7
<TR><TD>9 <TD>10 <TD>11
</TABLE>

Heading
1	2	3	4
5		7
9	10	11

Same with BORDER=0

Heading
1	2	3	4
5		7
9	10	11

The TABLE tag includes width (may be a percentage of page width, eg 70%), cellspacing="20" (distance between cells) and cellpadding="20" (distance of edge of the cell from the contents of the cell).
Borders can have width and colour added with 'BORDER=2 BORDERCOLOR=red'.

Background colour 'BGCOLOR' can be used in the TABLE, TR and TD tags. A <TD> bgcolor will override a <TR> bgcolor and a <TR> bgcolor will override a <TABLE> bgcolor. Fixing the font used in each cell - Try this in your <table> tag: style="font-family:fixedsys" (or your choice)


<TABLE BORDER=0 BGCOLOR="#FF6633">
    <TR BGCOLOR="#009900">
<TD BGCOLOR="#9999FF">Ann</TD>
<TD>Ben</TD>
<TD>Don</TD>
    </TR><TR>
<TD>Harry</TD>
<TD>Jerry</TD>
<TD>Katy</TD>
    </TR></TABLE>

BORDER=0

Ann	Ben	Don
Harry	Jerry	Katy

Add BORDER width and colour
using BORDER=4 BORDERCOLOR=gold

Ann	Ben	Don
Harry	Jerry	Katy

'cellspacing=0' removes the inner border-line.
<TABLE border="1" bordercolor=green cellspacing="0" cellpadding="5">
<tr bgcolor="#ff9900"><td STYLE="color:#ff9900">.</td></tr>
(font and background are same colour)
.

If your table row is empty, you must put something in a cell, if you want the row and background-color to show:

Contents of the cell are arranged horizontally using ALIGN=center, left or right.
Vertical position uses VALIGN=top, middle or bottom.

BORDERS

The BORDER can have some features - width, colour, and style

<CENTER><TABLE border="20" bordercolor="#6600cc" 
bordercolordark="#6600cc" 
bordercolorlight="#f0a0ff">
<CAPTION><EM>A test table</EM></CAPTION>
<TR><TD>Features - see my colours
</TD></TR></TABLE></CENTER>

*A test table*
Features - see my colours

BORDERCOLORLIGHT and BORDERCOLORDARK
Newer versions of Internet Explorer support bordercolorlight and bordercolordark attributes. With a wider border on a table, you will notice that the top and left sides are a lighter shade, and the right and bottom parts are darker.
Bordercolorlight and bordercolordark are not supported by Netscape, but the basic bordercolor tag is. So, if you wish to use the bordercolorlight and bordercolordark attributes, it is a good idea to also include the basic bordercolor attribute as well.

HTML 4 includes mechanisms to control border styles

Table attributes are id, class (document-wide identifiers),
lang (language information), dir (text direction),
title (element title),
style (inline style information ),
width (may be a percentage of the page available),
bgcolor (background color),
frame, rules, border (borders and rules),
cellspacing, cellpadding (cell margins).

Start by trying a style-sheet table? Sorry, Netscape may not like it.

*A test table with borders*
An inline style addition <TABLE style="border: solid 15px ; border-color: red gold green blue"

*Second test table with borders*
<CENTER><TABLE CLASS=try> <CAPTION><EM>Second test table with borders</EM></CAPTION> <TR><TD>more words words words </TD></TR></TABLE></CENTER> here is - .try {border: dotted 15px; border-color: red gold green blue} and 3 rows are needed to show the side dots.

ROW grouping

CAPTION, THREAD, TBODY and TFOOT are described here

COLUMN grouping

COLGROUP, COL and their ways are described here

BORDER

Cell margins (the spaces between the cells) are handled by 'border-collapse', which solves some problems (and increases the Learning Curve), and is described here
The Separated Borders Model is described here
FRAME and RULE are described here

Real-life examples

A practical example of tables with coloured rows is described here
It looks like a TABLE but has no 'table tags', it used CSS to position each row and column. See it here

Dynamic Activity

New in HTML 4.0 is the ability for a TABLE itself to be active in terms of the mouse and keyboard, shown here
Netscape and IE5 handle mouse events differently. Coping with this is described here

Next is row grouping here

Email
CSS begins here

Back to Shadow text or on to rows.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.