Doc Steve
Web Coding Service

Fully Accessible Web Code, Custom Written by Hand
Specializing in html, xml, css, and U.S.§508

Web Programming Samples and References

[ Sample Pages Index ]

HTML Tables Demonstrations

Page Index
[ Skip Index ]

[ General Notes ] [ rules= attribute ] [ frame= atrribute ] [ cellpadding=/cellspacing= atrributes ] [ References ]

General Notes

If you want no border, no cell padding, or no cell spacing, put in a "0" (zero) for each one. There are no default values for these attributes listed in the DTDs: the defaults used by browsers are generally cellpadding="1" and cellspacing="2" -- but who knows? -- while the default for border is generally based on the absence of a "border" attribute in the start tag of the table element, thus the absence of the attribute implies border="0" while its presence (e.g., the now deprecated usage <table border>) imples border="1" (or some greater value based on the browser's default). Also, border="0" -- either explicit or implicit as the general default -- implies frame="void" and rules="none", while any other value for border implies frame="border" and rules="all".

[ TOP ]

Example One: Table Element with rules= attribute
(none|groups|rows|cols|all)

rules="none"

<table border="3" summary="demonstration of rules attribute" rules="none">
  <caption> rules="none" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

rules="none"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

rules="groups"

<table border="3" summary="demonstration of rules attribute" rules="groups">
  <caption> rules="groups" </caption>
  <colgroup span="3"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="3"></colgroup>
    <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

rules="groups"
test	test	test	test	test	test	test	test	test	test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test	test	test	test	test	test	test	test	test	test

rules="rows"

<table border="3" summary="demonstration of rules attribute" rules="rows">
  <caption> rules="rows" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

rules="rows"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

rules="cols"

<table border="3" summary="demonstration of rules attribute" rules="cols">
  <caption> rules="cols" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

rules="cols"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

rules="all"

<table border="3" summary="demonstration of rules attribute" rules="all">
  <caption> rules="all" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

rules="all"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

[ TOP ]

Example Two: Table Element with frame= attribute
(void|above|below|hsides|lhs|rhs|vsides|box|border)

frame="void"

<table border="3" summary="demonstration of frame attribute" frame="void">
  <caption> frame="void" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="void"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="above"

<table border="3" summary="demonstration of frame attribute" frame="above">
  <caption> frame="above" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="above"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="below"

<table border="3" summary="demonstration of frame attribute" frame="below">
  <caption> frame="below" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="below"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="hsides"

<table border="3" summary="demonstration of frame attribute" frame="hsides">
  <caption> frame="hsides" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="hsides"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="lhs"

<table border="3" summary="demonstration of frame attribute" frame="lhs">
  <caption> frame="lhs" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="lhs"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="rhs"

<table border="3" summary="demonstration of frame attribute" frame="rhs">
  <caption> frame="rhs" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="rhs"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="vsides"

<table border="3" summary="demonstration of frame attribute" frame="vsides">
  <caption> frame="vsides" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="vsides"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="box"

<table border="3" summary="demonstration of frame attribute" frame="box">
  <caption> frame="box" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="box"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

frame="border"

<table border="3" summary="demonstration of frame attribute" frame="border">
  <caption> frame="border" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

frame="border"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

[ TOP ]

Example Three: Table Element with cellpadding and/or cellspacing attributes

cellpadding="0" cellspacing="0"

<table border="3" cellpadding="0" cellspacing="0" 
     summary="demonstration of cellpadding and cellspacing attributes">
  <caption> cellpadding="0" cellspacing="0" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

cellpadding="0" cellspacing="0"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

cellpadding="0" cellspacing="5"

<table border="3" cellpadding="0" cellspacing="5" 
     summary="demonstration of cellpadding and cellspacing attributes">
  <caption> cellpadding="0" cellspacing="5" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

cellpadding="0" cellspacing="5"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

cellpadding="5" cellspacing="0"

<table border="3" cellpadding="5" cellspacing="0" 
     summary="demonstration of cellpadding and cellspacing attributes">
  <caption> cellpadding="5" cellspacing="0" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

cellpadding="5" cellspacing="0"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

cellpadding="5" cellspacing="5"

<table border="3" cellpadding="5" cellspacing="5" 
     summary="demonstration of cellpadding and cellspacing attributes">
  <caption> cellpadding="5" cellspacing="5" </caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

cellpadding="5" cellspacing="5"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

cellpadding= & cellspacing= not specified

<table border="3" 
     summary="demonstration of cellpadding and cellspacing attributes">
  <caption>cellpadding= & cellspacing= not specified</caption>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
  <tr class="demo">
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
    <td>test</td><td>test</td><td>test</td>
  </tr>
</table>

cellpadding= & cellspacing= not specified
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

Appears to default to cellpadding="1" & cellspacing="2" (IE, Mozilla, NS4)

Comparison for cellpadding and cellspacing attributes

cellpadding="1" cellspacing="2"
test	test	test	test	test	test	test	test	test
test	test	test	test	test	test	test	test	test

[ TOP ]

References:

- -World Wide Web Consortium

- -Tables

- -Borders & Rules

Note:

The class "demo" is the style

  <style type="text/css">
    tr.demo {
      font-size: 125% ;
      background-color: #ffffff }
  <style>

Document: http://
Revised:

[ TOP ]
[ HOME ]

Steve Sconfienza, Ph.D.

Web Programming Samples and References

HTML Tables Demonstrations

General Notes

Example One: Table Element with rules= attribute(none|groups|rows|cols|all)

rules="none"

rules="groups"

rules="rows"

rules="cols"

rules="all"

Example Two: Table Element with frame= attribute(void|above|below|hsides|lhs|rhs|vsides|box|border)

frame="void"

frame="above"

frame="below"

frame="hsides"

frame="lhs"

frame="rhs"

frame="vsides"

frame="box"

frame="border"

Example Three: Table Element with cellpadding and/or cellspacing attributes

cellpadding="0" cellspacing="0"

cellpadding="0" cellspacing="5"

cellpadding="5" cellspacing="0"

cellpadding="5" cellspacing="5"

cellpadding= & cellspacing= not specified

Comparison for cellpadding and cellspacing attributes

References:

Note:

Example One: Table Element with rules= attribute
(none|groups|rows|cols|all)

Example Two: Table Element with frame= attribute
(void|above|below|hsides|lhs|rhs|vsides|box|border)