neatComponents: website development system

Previous pageThe neatComponents Guide Next page
H: Table Example 

H: Table Example

Modifying a Table to show fine-line 'borders'.

Top-left

Here is some text.

Bot-right

Switch to HTML view then:

Set Table border to 0
Set Table background to the desired outline color*, then set the cell background to white.
(Cell spacing controls the thickness of the outline 'border').

<TABLE cellSpacing=1 cellPadding=1 width=400 align=center bgColor=#CC0000 border=0>
<TBODY>
<TR>
<TD bgColor=#ffffff align=center>Top-left</TD>
<TD bgColor=#ffffff></TD>
<TD bgColor=#ffffff></TD>
</TR>
<TR>
<TD bgColor=#ffffff><STRONG>Here</STRONG></TD>
<TD bgColor=#ffffff><STRONG>is some</STRONG></TD>
<TD bgColor=#ffffff><STRONG>text.</STRONG></TD>
</TR>
<TR>
<TD bgColor=#ffffff></TD>
<TD bgColor=#ffffff></TD>
<TD bgColor=#ffffff align=center>Bot-right</TD>
</TR>
</TBODY>
</TABLE>

Note on Table Construction

TR = Table Row
TD = Cell (Table Detail)

A Table is made up of Rows <TR> divided into cells <TD>.
The Table is constructed row by row (i.e. not column by column).

A row is the 'space' in the HTML between <TR> and </TR>.
This row is then divided into cells.
The cell is the 'space' in the HTML between <TD> and </TD>.

HTML 4.0 compliance requires changes to the tag-details above.
Tags may generally be replaced following this format example using inline styles:

<td style="background-color: #FFFFFF> replaces <td bgcolor=#FFFFFF>

Reference



* Color Picker

Color Code:

Copyright © 1999-2012 Enstar LLC    All rights reserved                           Print this page