|
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.
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
|