computersmiths - Basic Table Tags

Table Tags

Basic Table Tags

<TABLE>...</TABLE> - table

This is the main wrapper for all the other table tags, and other table tags will be ignored if they aren't wrapped inside of a TABLE tag. 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 cells that may attempt to use the ROWSPAN attribute to span into non-specified rows. TR can have both the ALIGN and VALIGN attributes, which if specified become the default alignments for all cells in this row.

<TH>...</TH> - header

This stands for table header. Header cells are identical to data cells in all respects, with the exception that header cells are in a bold font, and have a default ALIGN=center.

<TD>...</TD> - data cell

This stands for table data, and specifies a standard table data cell. Table data cells must only appear within table rows. Each row need not have the same number of cells specified as short rows will be padded with blank cells on the right. 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 attributes explicitly specified on this cell. By default lines inside of table cells can be broken up to fit within the overall cell width.

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER=1>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>        
</TR>
</TABLE>

Table Span

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.

hex color code
red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER>
<TR><TH COLSPAN=3> hex color code</TH>
</TR>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>
</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.

hex color code	red	#ff0000
	green	#00ff00
	blue	#0000ff

<TABLE BORDER>
<TR><TH ROWSPAN=3> hex color code</TH>
    <TH>red</TH> <TD>A</TD>
</TR>
<TR><TH>green</TH> <TD>B</TD><
</TR>
<TR><TH>blue</TH> <TD>C</TD><
</TR>
</TABLE>

Table Size

<TABLE BORDER=n>

This attribute appears in the TABLE tag. If present, borders are drawn around all table cells. If absent (or BORDER="0") , there will be no borders.

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER=10>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>        
</TR>
</TABLE>

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>        
</TABLE>

<TABLE WIDTH=n HEIGHT=n>

where n is either as an absolute width in pixels, or a percentage of document width

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER WIDTH=170 HEIGHT=100>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>
</TABLE>

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER WIDTH=70 HEIGHT=200>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>        
</TABLE>

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER WIDTH=100%>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>
</TABLE>

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER WIDTH=50%>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>        
</TABLE>

<TABLE CELLSPACING=n>

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

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER CELLSPACING=10>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>        
</TABLE>

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER CELLSPACING=30>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>        
</TABLE>

<TABLE CELLPADDING=n>

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

gives the most compact table possible. n is either as an absolute width in pixels.

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER CELLPADDING=10>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>        
</TABLE>

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER CELLPADDING=30>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR><TD>A</TD>
    <TD>B</TD><TD>C</TD>
</TR>        
</TABLE>

Table Text Alignment

<TR ALIGN=#> <TH ALIGN=#> #=left, center, right <TD ALIGN=#>

Horizontal alignment.

red	green	blue
#ff0000	#00ff00	#0000ff

<TABLE BORDER WIDTH=160>
<TR><TH>red</TH>
    <TH>green</TH><TH>blue</TH>
</TR>
<TR>
    <TD ALIGN=left>#ff0000</TD>
    <TD ALIGN=center>#00ff00</TD>
    <TD ALIGN=right>#0000ff</TD>
</TR>  
</TABLE>

<TR VALIGN=#> <TH VALIGN=#> #=top, middle, bottom, baseline <TD VALIGN=#>

Vertical alignment.

red	green	blue	S4
#ff0000	#00ff00	#0000ff	grumpy

<TABLE BORDER HEIGHT=100>
<TR>
    <TH>red</TH><TH>green</TH>
    <TH>blue</TH><TH>S4</TH>
</TR>
<TR>
    <TD VALIGN=top>#ff0000</TD>
    <TD VALIGN=middle>#00ff00</TD>
    <TD VALIGN=bottom>#0000ff</TD>
    <TD VALIGN=baseline>grumpy</TD>
</TR>
</TABLE>

Caption

<CAPTION>...</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 ALIGN=TOP>

**SOME CAPTION TEXT**
Some text in a table

<TABLE BORDER="1" WIDTH="75%">
<CAPTION ALIGN=TOP><B>SOME CAPTION TEXT</B></CAPTION>
<TR><TD> Some text in a table</TD></TR>
</TABLE>

<CAPTION ALIGN=BOTTOM>

**SOME CAPTION TEXT**
Some text in a table

<TABLE BORDER="1" WIDTH="75%">
<CAPTION ALIGN=BOTTOM><B>SOME CAPTION TEXT</B></CAPTION>
<TR><TD> Some text in a table</TD></TR>
</TABLE>

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><BR></TD> or <TD> </TD>)

Centering an Image Inside of a Cell

You will sometimes create a cell containing nothing but an image, and may wonder why your image is not properly centered inside the cell on some browsers. The HTML code probably looked like this:

<TD>
  <IMG SRC="url">
</TD>

That extra whitespace inside your cell and around your image gets collapsed into single space characters. These spaces (whose baselines by default align with the bottom of the image) are making your cell look lopsided. Trick the code by trying this instead:

<TD><IMG SRC="url"></TD>

Send e-mail to caliber@computersmiths.com

www.computersmiths.com
Return to Top of this page | HTML Rosetta Page | caliber