Table Example

A note on design

Modern web design prefers the use of DIVs over the use of Tables for page layout.

neatComponents does not take a position on one method or the other. For many purposes working with structured data naturally leads to the use of Tables - much output is tabular on delivery - and neatComponents manages the CSS for you (you control it via the Behavior Editor), so Tables may seem the natural choice.

If you prefer to work with DIVs then simply switch to 'Source' view.

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

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