::: HTML Survival Kit - Basic Table Tags :::

Basic Table Tags

<TABLE>
     <TR>
         <TD> | <TH>
                  Contents | Data elements
         </TD> | </TH>
     </TR>
</TABLE>

Table is probably one of most frequently used HTML tags ever, either with visible borders that define the perimeter of the table or with invisible borders that are used to neatly stack various HTML elements such as text, graphics, links, etc.

Biggest rationale behind using table is for organization and flow of presentation of page contents in rows and columns, with a full control over content alignments and formatting characteristics.

Frequency of table format with invisible borders far outnumbers the visible borders nowadays -- I'd say 95% of all well-know major websites use the table format with invisible border schemes.

A skeleton <TABLE> tags are explained below.

<TABLE>

	Header	Data cell
<TR> Row	<TH>	<TD>	Row
	Column	Column

<TABLE>...</TABLE> (Table)

This is the main wrapper for all the other table tags, and other table tags will be ignored if they are put outside (by mistake, I presume) of a <TABLE> and </TABLE> container.

By default tables have no borders, borders will be added if the BORDER attribute is specified.

<TR>...</TR> (Row definition)

This stands for table row. The number of rows in a table is exactly specified by how many <TR> tags are contained within it, irregardless of Data cells that may attempt to use the ROWSPAN attribute to span into non-specified rows.

<TR> can have both ALIGN (horizontal alignment of all Data cells in a row defined by a <TR>) and VALIGN (vertical alignment of Data cells in a row defined by a <TR>) attributes.

<TH>...</TH> (Header)

This stands for table header. Header cells are identical to Data cells (= <TD>) in all respects, with the exception that any text put into header cells will be displayed in a bold font, and have a default ALIGN=center.

It's basically equivalent to Data cell (= <TD>) formatted with

Center-aligned and in Bold font <TH> Header

<TABLE BORDER=1>
<TR>
     <TH>
     Center-aligned and in Bold font
     </TH>
</TR>
</TABLE>

Center-aligned and in Bold font

<TD> Data cell

<TABLE BORDER=1>
<TR>
     <TD ALIGN=center>
     <STRONG>
     Center-aligned and in Bold font
     </STRONG>
     </TD>
</TR>
</TABLE>

<TD>...</TD> (Data cell)

This stands for table data, and each <TD>...</TD> container specifies a single standard table Data cell element. This is the very heart of the table. (you wrote a table to put something in there, aren't you?) Table Data cells can only appear within a table row wrapped by <TR>...</TR> (Row definition).

Ideally, each row would have the same number of Data cells, however it is not absolutely required. There are two possible, intentional cases for this "not-having-the-same-number" situation;

Table cells are spanned by either ROWSPAN or COLSPAN attribute. (See more on TABLE Spanning tags)
Data cell(s) does not contain any data. In this case, the particular Data cell(s) will be automatically padded with a blank cell(s) with no boder. To maintain a blank cell(s) with normal border, use   (No Break Blank Space) filler element. (See more on   tag)

The default alignment of table data is ALIGN=left and VALIGN=middle. These alignments are overridden by any alignments specified in the containing <TR> tag, and those alignments in turn are overridden by any ALIGN or VALIGN

Cannot be any facile than this

This is a Data cell element

<TABLE BORDER=1>
<TR>
     <TD>
          This is a Data cell element
     </TD>
</TR>
</TABLE>

Three Data cells listed horizontally, all inside of single row

Data #1

Data #2

Data #3

Combination of Header and Data cell elements

Data #1	Data #2	Data #3
Data #1-1	Data #2-1	Data #3-1

Three Data cells stacked vertically, one Data cell per one row

Data #1

Data #2

Data #3

Combination of Header and Data cell elements

Data #1	Data #1-1
Data #2	Data #2-1
Data #3	Data #3-1

Second Data cell is empty, and it is
without   (No Break Blank Space) filler element

Data #1

Data #3

Second Data cell is empty, and it is
without   (No Break Blank Space) filler element. Putting a number of <Space> won't fix the situation.

Data #1

Data #3

Second Data cell is empty, and now, it is with   (No Break Blank Space) filler element

Data #1

Data #3

Table Spanning

Column Span <TH COLSPAN=n>

This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many columns of the table this cell should span. The default COLSPAN for any cell is 1.

SPARCstation
S20	S10	S5
rhino	witch	maple

<TABLE BORDER=1>
<TR>
     <TH COLSPAN=3>
          SPARCstation</TH>
</TR><TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR><TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TABLE>

S20	S10	S5
SPARCstation
rhino	witch	maple

<TABLE BORDER=1>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR><TR>
     <TH COLSPAN=3>
          SPARCstation</TH>
</TR><TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TABLE>

S20	S10	S5
rhino	witch	maple
SPARCstation

<TABLE BORDER=1>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR><TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR><TR>
     <TH COLSPAN=3>
          SPARCstation</TH>
</TABLE>

SPARCstation
Server	Client
S20	S10	S5
rhino	witch	maple

<TABLE BORDER=1>
<TR>
     <TH COLSPAN=3>
          SPARCstation</TH>
</TR><TR>
     <TH>Server</TH>
     <TH COLSPAN=2>Client</TH>
</TR><TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR><TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TABLE>

Row Span <TH ROWSPAN=n>

This attribute can appear in any table cell (<TH> or <TD>) and it specifies how many rows of the table this cell should span. The default ROWSPAN for any cell is 1.

SPARCstation	S20	rhino
	S10	witch
	S5	maple

<TABLE BORDER=1>
<TR>
     <TH ROWSPAN=3>
          SPARCstation</TH>
     <TH>S20</TH>
     <TD>rhino</TD>
</TR><TR>
     <TH>S10</TH>
     <TD>witch</TD>
</TR><TR>
     <TH>S5</TH>
     <TD>maple</TD>
</TR>
</TABLE>

SPARCstation	S20	S10	S5
SPARCstation	rhino	witch	maple

<TABLE BORDER=1>
<TR>
     <TH ROWSPAN=2>
          SPARCstation</TH>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR><TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5	SPARCstation
rhino	witch	maple	SPARCstation

<TABLE BORDER=1>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
     <TH ROWSPAN=2>
          SPARCstation</TH>
</TR><TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	SPARCstation	S5
rhino	witch	SPARCstation	maple

<TABLE BORDER=1>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH ROWSPAN=2>
          SPARCstation</TH>
     <TH>S5</TH>
</TR><TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Table Sizing

This attribute only appears in the <TABLE> tag, not anywhere else. If present, borders are drawn around all table cells. If absent, there will be no borders. Where n is an absolute thickness in pixels. Depending on the browser, a relative percentage border thickness expression can be also used.

It may sound strange, however the choice -- of whether to use border or not -- could be a delicate one (for both readability and aesthetics of the table), indeed. Use it wisely.

S20	S10	S5
rhino	witch	maple

<TABLE>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER=1>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER=10>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Some browsers can understand relative % border thickness expression

S20	S10	S5
rhino	witch	maple

<TABLE BORDER=40%>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Too apparent -- width and height of a table. Where n is either as an absolute width in pixels, or a percentage of the document width proportional to the browser window. (i.e., if the user increase the browser window by dragging its corner with the mouse, your table width/height will also increase correspondingly)

Assigning 100% would be the apparent approach if you want to assign the maximum width/height display possible, however readability of the table would suffer with 100%. You may consider using 95% instead.

You can also see the content data align left by default as the width of the Data cell <TD> gets larger. For <TH>, content data aligns center regardless of the width of the Data cell.

S20	S10	S5
rhino	witch	maple

<TABLE BORDER WIDTH=170
     HEIGHT=100>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
<TR>
     <TD>Rhino</TD>
     <TD>Witch</TD>
     <TD>Maple</TD>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER WIDTH=70
     HEIGHT=200>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
<TR>
     <TD>Rhino</TD>
     <TD>Witch</TD>
     <TD>Maple</TD>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER WIDTH=95%>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
<TR>
     <TD>Rhino</TD>
     <TD>Witch</TD>
     <TD>Maple</TD>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER=1 WIDTH=50%>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
<TR>
     <TD>Rhino</TD>
     <TD>Witch</TD>
     <TD>Maple</TD>
</TABLE>

A sentence in a table, with a TABLE WIDTH=95%

The bone-chilling scream split the warm summer night in two, the first half being before the scream when it was fairly balmy and calm and pleasant, the second half still balmy and quite pleasant for those who hadn't heard the scream at all, but not calm or balmy or even very nice for those who did hear the scream, discounting the little period of time during the actual scream itself when your ears might have been hearing it but your brain wasn't reacting yet to let you know.

-- Winning sentence, 1986 Bulwer-Lytton bad fiction contest

<TABLE BORDER=0 WIDTH=95%>
<TR>
<TD> The bone-chilling scream split the warm summer night in two, the first half being before the scream when it was fairly balmy and calm and pleasant, the second half still balmy and quite pleasant for those who hadn't heard the scream at all, but not calm or balmy or even very nice for those who did hear the scream, discounting the little period of time during the actual scream itself when your ears might have been hearing it but your brain wasn't reacting yet to let you know.
</P>
-- Winning sentence, 1986 Bulwer-Lytton bad fiction contest </TD>
</TABLE>

The same sentence, with a reduced TABLE WIDTH=45%

-- Winning sentence, 1986 Bulwer-Lytton bad fiction contest

<TABLE BORDER=0 WIDTH=45%>
<TR>
<TD> The bone-chilling scream split the warm summer night in two, the first half being before the scream when it was fairly balmy and calm and pleasant, the second half still balmy and quite pleasant for those who hadn't heard the scream at all, but not calm or balmy or even very nice for those who did hear the scream, discounting the little period of time during the actual scream itself when your ears might have been hearing it but your brain wasn't reacting yet to let you know.
</P>
-- Winning sentence, 1986 Bulwer-Lytton bad fiction contest </TD>
</TABLE>

Table Spacing

Cell spacing or 'fat' is the amount of space inserted between individual cells in a table. where n is an absolute width in pixels.

In contrast to CELLPADDING attribute, try not to use cell spacing any larger than n=3 in this CELLSPACING attribute if you want to create a tight-looking table.

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLSPACING=10>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLSPACING=30>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Cell padding or 'muscle' is the amount of space between the border of the cell and the contents of the cell. Setting a cell padding of zero on a table with borders might look bad because the edges of the text could touch the cell borders.

Hence, <TABLE BORDER=1 CELLPADDING=0 CELLSPACING=0> would give the most compact table possible. n is either as an absolute width in pixels.

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=0>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=7>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=20>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Now, put these two together. Esp., the most compact table (with border) possible --

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=0
     CELLSPACING=0>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=7
     CELLSPACING=0>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=15>
     CELLSPACING=0
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Table Text Alignment

#=left, center, right

Horizontal alignment for cell content. Where to put ALIGN tag can be usually decided by the rule of 'common denominator' and 'deduction.' That is if you have to repeatedly put the same ALIGN tag in <TD> or <TH>, reduce the frequency and put only once at <TR> tag.

For example,

is equal to

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     WIDTH=200>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
   <TD ALIGN=left>rhino</TD>
   <TD ALIGN=center>witch</TD>
   <TD ALIGN=right>maple</TD>
</TR>
</TABLE>

#=top, middle, bottom, baseline

Vertical alignment for cell content. Where to put VALIGN tag can be usually decided by the rule of 'common denominator' and 'deduction.' That is if you have to repeatedly put the same VALIGN tag in <TD> or <TH>, reduce the frequency and put only once at <TR> tag.

For example,

is equal to

S20	S10	S5	S4
rhino	witch	maple	grumpy

<TABLE BORDER
     WIDTH=200 HEIGHT=200>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
     <TH>S4</TH>
</TR>
<TR>
   <TD VALIGN=top>
         rhino</TD>
   <TD VALIGN=middle>
         witch</TD>
   <TD VALIGN=bottom>
         maple</TD>
   <TD VALIGN=baseline>
         grumpy</TD>
</TR>
</TABLE>

S20	S10	S5	S4
rhino	witch	maple	grumpy

<TABLE BORDER
     WIDTH=200 HEIGHT=200
     CELLPADDING=5
     CELLSPACING=0>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
     <TH>S4</TH>
</TR>
<TR>
   <TD VALIGN=top>
         rhino</TD>
   <TD VALIGN=middle>
         witch</TD>
   <TD VALIGN=bottom>
         maple</TD>
   <TD VALIGN=baseline>
         grumpy</TD>
</TR>
</TABLE>

Caption

This represents the caption for a table. <CAPTION> tags should appear inside the <TABLE> but not inside table rows or cells. The caption accepts an alignment attribute that defaults to ALIGN=top but can be explicitly set to ALIGN=bottom.

CAPTION on the top with Data cell aligned left

SOME CAPTION TEXT
Data cell element in a table

<TABLE BORDER=1 WIDTH=75%>
<CAPTION ALIGN=top>
     <FONT COLOR="green">
     <STRONG>
          SOME CAPTION TEXT
     </STRONG>
     </FONT>
</CAPTION>
<TR ALIGN=left>
     <TD>
          Data cell element</BR>
          in a table
     </TD>
</TR>
</TABLE>

CAPTION at the bottom with Data cell aligned right

SOME CAPTION TEXT
Data cell element in a table

<TABLE BORDER=1 WIDTH=75%>
<CAPTION ALIGN=bottom>
     <FONT COLOR="green">
     <STRONG>
          SOME CAPTION TEXT
     </STRONG>
     </FONT>
</CAPTION>
<TR ALIGN=right>
     <TD>
          Data cell element</BR>
          in a table
     </TD>
</TR>
</TABLE>

Table Cell Background Color

<TABLE...BGCOLOR=#rrggbb>...</TABLE>
<TH...BGCOLOR=#rrggbb>...</TH>
<TD...BGCOLOR=#rrggbb>...</TD>

You can assign multiple background color for table cell(s) using BGCOLOR attribute inside of <TABLE> (for whole table background color) or <TH> (for paticular row's background color) or <TD> (for paticular Data cell's background color) tag.

You can use standard red, green and blue (=RGB color) combination in hexadecimal or color alias to assign a background color. Keep in mind that the color background in table is a very effective way of presenting your page, but too much color variation will work exactly reverse way......

(See more on COLOR attribute)

Using a RGB color (i.e., #RRGGBB) specification of #FFDD00

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=7
     CELLSPACING=0
     BGCOLOR=#FFDD00>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Using a color alias, "yellow" instead of RGB color triplet of #FFDD00

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=7
     CELLSPACING=0
     BGCOLOR=yellow>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

For the improved readability -- bold black letters over dark yellow background has an excellent contrast!

S20	S10	S5
rhino	witch	maple

Another frequently used color scheme for readability -- bold black letters over pale gray background

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=7
     CELLSPACING=0>
<TR BGCOLOR=#EEEEEE>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
</TABLE>

Combination of bold black+yellow+pale gray for multiple rows/columns table data presentation.

S20	S10	S5
rhino	witch	maple
Server	Client	Client
QRT626	TMS390Z50	MB86904
1024	512	256
Solaris	Solaris	Solaris

<TABLE BORDER=1
          CELLPADDING=0
          CELLSPACING=0>
          <TR><TD>
<TABLE BORDER=0
          CELLPADDING=5
          CELLSPACING=0
          BGCOLOR=#FFDD00>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR ALIGN=center>
     <TD>rhino</TD>
     <TD>witch</TD>
     <TD>maple</TD>
</TR>
<TR BGCOLOR=#EEEEEE>
     <TH>Server</TH>
     <TH>Client</TH>
     <TH>Client</TH>
</TR>
<TR ALIGN=center>
     <TD><FONT COLOR=red>
          Q-RT626</FONT>
     </TD>
     <TD><FONT COLOR=red>
          TMS390Z50</FONT>
     </TD>
     <TD><FONT COLOR=red>
          MB86904</FONT>
     </TD>
</TR>
<TR ALIGN=center
     BGCOLOR=#EEEEEE>
     <TD>1024</TD>
     <TD>512</TD>
     <TD>256</TD>
</TR>
<TR ALIGN=center>
     <TD>Solaris</TD>
     <TD>Solaris</TD>
     <TD>Solaris</TD>
</TR>
</TABLE>
</TR></TABLE>

Another contrast-based example.

*** However, its coding part gets ridiculously tedious and lengthy, plagued by formatting properties. To obviate this malady, there are three possible suggestion;

Use rule of 'common denominator' and 'deduction.' That is if you have to repeatedly put the same ALIGN|VALIGN tag in <TD> or <TH>, reduce the frequency and put only once at <TR> tag.
Use Cascading Style Sheet (CSS) to define frequently used formatting properties only once, then just refer/reuse these CSS definitions over and over again in your codes. Use of CSS to simplify the code is shown in next example below. (compare the size and readability of code portion)
(See more on Cascading Style Sheet (CSS))
Once finalized, try to use scripts to dynamically generate your HTML codes, not by hand one at a time. Perl, php, python are a few of popular scripting tools.

1	Find This
2	Add That
3	Save to It

The same contrast-based example again. This time, we're using Cascading Style Sheet (CSS) in coding. (See more on Cascading Style Sheet (CSS))

Now, compare the size and readability of the code portion with the same example without CSS listed above.

1	Find This
2	Add That
3	Save to It

<HTML>
<HEAD>
.
.
<STYLE type="text/css">
.example_red { /* Sans-serif-bold-White on Red */
font-family: Sans-Serif;
font-size: 16pt;
font-style: bold;
font-weight: bold;
background-color: #B82222;
color: #FFFFFF
}
.example_gray_number { /* Sans-serif-bold-Black on Gray */
font-family: Sans-Serif;
font-size: 16pt;
font-style: bold;
font-weight: bold;
background-color: #CCCCCC;
color: #000000
}
.example_gray_text { /* Sans-serif-bold-Black on Gray */
font-family: Sans-Serif;
font-size: 10pt;
font-style: normal;
font-weight: bold;
background-color: #CCCCCC;
color: #000000
}
</STYLE>
</HEAD>

Eeeek.. Too loud! Am I reading data or the table?
(Of course, experimentation is always worthy though)

S20	S10	S5
rhino	witch	maple

<TABLE BORDER
     CELLPADDING=7
     CELLSPACING=0>
<TR>
     <TH BGCOLOR=gray>
          <FONT COLOR=white>
               S20
          </FONT>
     </TH>
     <TH>S10</TH>
     <TH BGCOLOR=#EEEEEE>
          S5</TH>
</TR>
<TR>
     <TD ALIGN=left
          VALIGN=bottom
          BGCOLOR=gray>
               rhino</TD>
     <TD BGCOLOR=#CCCCFF>
          witch</TD>
     <TD ALIGN=right
          VALIGN=top
          BGCOLOR=#FFDD00>
          <STRONG>
               maple
          </STRONG>
     </TD>
</TR>
</TABLE>

<TABLE...BACKGROUND=IMG>...</TABLE>
<TH...BACKGROUND=IMG>...</TH>
<TD...BACKGROUND=IMG>...</TD>

You can 'load' or 'paste over' multiple background image files for table cell(s) using BACKGROUND attribute inside of <TABLE> (for whole table background image) or <TH> (for particular row's background image) or <TD> (for particular Data cell's background image) tag.

Again, image background(s) in table is a very effective way of presenting your page, but too many images all over your table will work exactly reverse way......

Let's start with a plain vanilla table

Angular Velocity

Dynamic Viscosity

<TABLE BORDER=1
     CELLPADDING=10
     CELLSPACING=4>
<TR>
     <TD ALIGN=right
          VALIGN=middle>
               Angular Velocity
     </TD>
</TR><TR>
     <TD ALIGN=right
          VALIGN=middle>
               Dynamic Viscosity
     </TD>
</TR>
</TABLE>

Now, let's use two simple image files to 'load' or 'paste over' backgrounds of the same table;

Image file, "/texture/r_bracket_s.gif" for whole table background
Another image file, "/texture/parch_blue_s.jpg" for Data cell background

Now it looks quite different. :-)

Angular Velocity

Dynamic Viscosity

<TABLE BORDER=1
     CELLPADDING=10
     CELLSPACING=4
     BACKGROUND="/texture/
     r_bracket_s.gif">
<TR>
     <TD ALIGN=right
          VALIGN=middle
          BACKGROUND="/texture/
          parch_blue_s.jpg">
               Angular Velocity
     </TD>
</TR><TR>
     <TD ALIGN=right
          VALIGN=middle
          BACKGROUND="/texture/
          parch_blue_s.jpg">
               Dynamic Viscosity
     </TD>
</TR>
</TABLE>

Silly Table Tips & Tricks

Blank Cells With Border: Blank cells which contain no displayable elements are not given borders. If you wish the appearance of an empty cell, but with borders, put either a blank line or a non-breaking space in the cell. (<TD> </TD> or <TD></BR></TD>)

Cell content for S10 is 'missing!'
(and the table looks crappy)

S20	S10	S5
rhino		maple

<TABLE BORDER=2
     CELLPADDING=5
     CELLSPACING=0>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD></TD>
     <TD>maple</TD>
</TR>
</TABLE>

The same absent cell content for
S10. However, the cell now
looks merely 'empty.'

S20	S10	S5
rhino		maple

<TABLE BORDER=2
     CELLPADDING=5
     CELLSPACING=0>
<TR>
     <TH>S20</TH>
     <TH>S10</TH>
     <TH>S5</TH>
</TR>
<TR>
     <TD>rhino</TD>
     <TD> </TD>
     <TD>maple</TD>
</TR>
</TABLE>

Centering an Image Inside of a Cell

You will eventually create a cell containing nothing but an image(s), and you will wonder why your image is not properly centered inside the cell. You probably wrote HTML like:

That extra whitespace inside your cell and around your image gets collapsed into single space characters. And it is these spaces (whose baselines by default align with the bottom of the image) which are making your cell look lopsided. Try this instead:

Not perfectly center/middle aligned

Now we're talking

Jump back to HTML Survival Kit Table of Contents (TOC)