Table Tag Attribute Samples

<table> tag, align attribute

This is a demonstration of text flowing around a table when the align attribute is set. In both cases, the table is contained in the same paragraph element as the text, with the text following the definition of the table. Please note that the align attribute is deprecated in favor of stylesheets, but it is still well supported.

<p><table border="1">
  <tr><td>This</td><td>is</td></tr>
  <tr><td>my</td><td>table</td></tr>
</table>
This is text which is placed after the definition of
 a table in HTML where the align attribute is not set.</p>

<p><table border="1" align="left">
  <tr><td>This</td><td>is</td></tr>
  <tr><td>my</td><td>table</td></tr>
</table>
This is text which is placed after the definition of
 a table in HTML where the align attribute is set to "left".</p>

<p><table border="1" align="center">
  <tr><td>This</td><td>is</td></tr>
  <tr><td>my</td><td>table</td></tr>
</table>
This is text which is placed after the definition of
 a table in HTML where the align attribute is set to "center".</p>

<p><table border="1" align="right">
  <tr><td>This</td><td>is</td></tr>
  <tr><td>my</td><td>table</td></tr>
</table>
This is text which is placed after the definition of
 a table in HTML where the align attribute is set to "right".</p>

Thisis
mytable
This is text which is placed after the definition of a table in HTML where the align attribute is not set.

Thisis
mytable
This is text which is placed after the definition of a table in HTML where the align attribute is set to "left".

Thisis
mytable
This is text which is placed after the definition of a table in HTML where the align attribute is set to "center".

Thisis
mytable
This is text which is placed after the definition of a table in HTML where the align attribute is set to "right".

<table> tag, bgcolor attribute

This is an example of tables with a background color set.

<p><table border="1" align="left" bgcolor="lime">
  <tr><td>This</td><td>is</td></tr>
  <tr><td>my</td><td>table</td></tr>
</table>
<table border="1" align="right" bgcolor="yellow">
  <tr><td>This</td><td>is</td></tr>
  <tr><td>my</td><td>table</td></tr>
</table>
If text is included after the tables in the same paragraph,
and the tables are aligned to the left and right, then
the text should appear between the tables.</p>

Thisis
mytable
Thisis
mytable
If text is included after the tables in the same paragraph, and the tables are aligned to the left and right, then the text should appear between the tables.

<table> tag, background attribute

Although non-standard, you can also specify a background image for the table in many browsers.

<table border="1" background="../Image8.jpg">
  <tr><td>This</td><td>is</td></tr>
  <tr><td>my</td><td>table</td></tr>
</table>
Thisis
mytable

<table> tag, border attribute

The border attribute can be used alone to draw a default border, or you can supply the width of the border in pixels. Setting the border to 0 eliminates it (which is usually the default).

<table>
  <tr><td>table with no border</td></tr>
</table><br clear="all" />
<table border="border">
  <tr><td>table with default border</td></tr>
</table><br clear="all" />
<table border="7">
  <tr><td>table with border="7"</td></tr>
</table><br clear="all" />
<table border="0">
  <tr><td>table with border="0"</td></tr>
</table><br clear="all" />
table with no border

table with default border

table with border="7"

table with border="0"

<table> tag, bordercolor attribute

The bordercolor attribute is nonstandard, but it is included here because of its usefulness.

<table border="7" bordercolor="blue">
  <tr><td>table with border="7" bordercolor="blue"</td></tr>
</table><br clear="all" />
table with border="7" bordercolor="blue"


<table> tag, cellpadding, cellspacing attributes

You can specify the space between cells with the cellspacing attribute.

<table border="3" bordercolor="blue" bgcolor="yellow" cellspacing="15">
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
  <tr><td>Cell 3</td><td>Cell 4</td></tr>
</table><br clear="all">
Cell 1Cell 2
Cell 3Cell 4

The cellpadding attribute specifies how much space is placed between the contents of the cell and the edge of the cell.

<table border="3" bordercolor="blue" bgcolor="yellow" cellpadding="15">
  <tr><td>Cell 1</td><td>Cell 2</td></tr>
  <tr><td>Cell 3</td><td>Cell 4</td></tr>
</table><br clear="all">
Cell 1Cell 2
Cell 3Cell 4


<table> tag, height, width attributes

Height and width can be set to a specific number of pixels or to a percentage of the window's height or width.

<table border="1" height="150">
   <tr><td>height="150"</td></tr></table>
   <br clear="all" />
<table  border="1" width="250"><tr>
   <td>width="250"</td></tr></table>
   <br clear="all" />
<table  border="1" width="75%"><tr>
   <td>width="75%"</td></tr></table>
   <br clear="all" />
height="150"

width="250"

width="75%"

<table> tag, frame attribute

The frame attribute determines how lines are drawn around the table. The possible values are box, void, above, below, lhs, rhs, hsides, and vsides. The default is box which draws lines on all sides. Void will omit all lines. The others will draw a lines/lines on the left hand side (lhs), right hand side (rhs), top (above), bottom (below), left and right sides (vsides), or top and bottom (hsides).

Uncharacteristically for me, I suggest not bothering with Netscape for this attribute. Internet Explorer is the only browser to get it right that I've seen so far.

<table width="100%" cellspacing="5">
    <tr><td align="center"><table frame="box">
          <tr><td>box</td></tr></table></td>
        <td align="center"><table frame="above">
          <tr><td>above</td></tr></table></td>
        <td align="center"><table frame="below">
          <tr><td>below</td></tr></table></td>
        <td align="center"><table frame="void">
          <tr><td>void</td></tr></table></td></tr>
    <tr><td colspan="4">&nbsp;</td></tr>
    <tr><td align="center"><table frame="lhs">
          <tr><td>lhs</td></tr></table></td>
        <td align="center"><table frame="rhs">
          <tr><td>rhs</td></tr></table></td>
        <td align="center"><table frame="vsides">
          <tr><td>vsides</td></tr></table></td>
        <td align="center"><table frame="hsides">
          <tr><td>hsides</td></tr></table></td></tr>
  </table>
box
above
below
void
 
lhs
rhs
vsides
hsides

<table> tag, rules attribute

The rules attribute determines how lines are drawn inside the table. The possible values are all, groups, rows, cols, and none. This is another attribute that I suggest using only with Internet Explorer for now. The "groups" value works with something we haven't seen yet, so there is no sample shown.

<table width="100%" cellspacing="5">
    <tr><td align="center"><table rules="all">
          <caption align="bottom">all</caption>
          <tr><td>1</td>
          <td>2</td></tr>
          <tr><td>3</td>
          <td>4</td></tr>
          </table></td>
        <td align="center"><table rules="rows">
          <caption align="bottom">rows</caption>
          <tr><td>1</td>
          <td>2</td></tr>
          <tr><td>3</td>
          <td>4</td></tr>
          </table></td>
        <td align="center"><table rules="cols">
          <caption align="bottom">cols</caption>
          <tr><td>1</td>
          <td>2</td></tr>
          <tr><td>3</td>
          <td>4</td></tr>
          </table></td>
        <td align="center"><table rules="none">
          <caption align="bottom">none</caption>
          <tr><td>1</td>
          <td>2</td></tr>
          <tr><td>3</td>
          <td>4</td></tr>
          </table></td>
  </table>
all
12
34
rows
12
34
cols
12
34
none
12
34