CSS: Html Tags td

Column highlight

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Styling table columns</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<style>

.datatable {
  border: 1px solid #D6DDE6;
  border-collapse: collapse;
  width: 80%;
}

.datatable col.odd {
  background-color: #80C9FF;
  color: #000000;
}

.datatable col.even {
  background-color: #BFE4FF;
  color: #000000;  
}

.datatable td {
  border:2px solid #ffffff;
  padding: 0.3em;
}

.datatable th {
  border:2px solid #ffffff;
  background-color: #00487D;
    color: #FFFFFF;
  font-weight: bold;
  text-align: left;
  padding: 0.3em;
}

    </style>
</head>
<body>

<table class="datatable">

  <col class="odd" />
  <col class="even" />
  <col class="odd" />
  <col class="even" />

  <tr>
    <th>Pool A</th>
    <th>Pool B</th>
    <th>Pool C</th>
    <th>Pool D</th>
  </tr>
  <tr>
    <td>Title</td>
    <td>Title</td>
    <td>New Zealand</td>
    <td>Title</td>
  </tr>
  <tr class="even">
    <td>South Africa</td>
    <td>Wales</td>
    <td>Scotland</td>
    <td>Ireland</td>
  </tr>
  <tr>
    <td>Samoa</td>
    <td>Fiji</td>
    <td>Italy</td>
    <td>Argentina</td>
  </tr>
  <tr class="even">
    <td>USA</td>
    <td>Canada</td>
    <td>Romania</td>
    <td>Europe 3</td>
  </tr>
  <tr>
    <td>Repechage 2</td>
    <td>Asia</td>
    <td>Repechage 1</td>
    <td>Namibia</td>
  </tr>
</table>

</body>
</html> 

col color: crimson;

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>columns</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
}
th {
    background: lightyellow;
}
th, td {
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
}
col#album {
    width: 200px;
    background: rgb(244, 244, 244);
    color: crimson;
}
col#released {
    width: 1%;
    background: rgb(244, 244, 244);
}
</style>


    </head>
    <body>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col id='album' />
                <col id='artist' />
                <col id='released' />
            </colgroup>
            <thead>
                <tr>
                    <th> album            </th>
                    <th> artist           </th>
                    <th> released         </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> D      </td>
                    <td> C      </td>
                    <td> 1965             </td>
                </tr>
                <tr>
                    <td> A  </td>
                    <td> B     </td>
                    <td> 1967             </td>
                </tr>
                <tr>
                    <td> N </td>
                    <td> M                  </td>
                    <td> 1995                                   </td>
                </tr>
            </tbody>
        </table>
    </body>
</html> 

col width: 200px;

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>columns</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 100%;
}
th {
    background: lightyellow;
}
th, td {
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
}
col#album {
    width: 200px;
    background: rgb(244, 244, 244);
    color: crimson;
}
col#released {
    width: 1%;
    background: rgb(244, 244, 244);
}
</style>


    </head>
    <body>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col id='album' />
                <col id='artist' />
                <col id='released' />
            </colgroup>
            <thead>
                <tr>
                    <th> album            </th>
                    <th> artist           </th>
                    <th> released         </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> D      </td>
                    <td> C      </td>
                    <td> 1965             </td>
                </tr>
                <tr>
                    <td> A  </td>
                    <td> B     </td>
                    <td> 1967             </td>
                </tr>
                <tr>
                    <td> N </td>
                    <td> M                  </td>
                    <td> 1995                                   </td>
                </tr>
            </tbody>
        </table>
    </body>
</html> 

Hiding column

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">

#t1 * .c3 {
  visibility: hidden;
} 
</style>
</head>
<body>

<table id="t1"> 
    
    <tbody class="b1"> 
        <tr class="r1"> 
            <td class="c1">r1 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r1 c3</td> 
            <td class="c4">4</td> 
        </tr> 
        
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r2 c3</td> 
            <td class="c4">4</td> 
        </tr>
    </tbody> 
    
    <tbody class="b2"> 
        <tr class="r3"> 
            <td class="c1">r3 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r3 c3</td> 
            <td class="c4">4</td> 
        </tr> 
        <tr class="r4"> 
            <td class="c1">r4 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r4 c3</td> 
            <td class="c4">4</td> 
        </tr>
    </tbody> 
    
    <tbody class="b3"> 
        <tr class="r5"> 
            <td class="c1">r5 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r5 c3</td> 
            <td class="c4">4</td> 
        </tr>
    </tbody> 
</table> 
</body> 

</html>

Column widths

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
  <title>Column widths</title>
  <style rel="stylesheet" type="text/css">
body {
  background-color: #ffffff;
  font-family: arial, verdana, sans-serif;
  font-size: 12px;
}

p.narrow {
  width: 200px;
}

p.wide {
  width: 700px;
}
</style>
</head>
<body>
<p class="narrow">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id 
           commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam 
           semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. 
           Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam 
           ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus 
           ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. 
           Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus 
           ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, 
           sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. 
           Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. 
           Proin erat. Donec sem. 
</p>
<p class="wide">
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend, erat id 
           commodo placerat, nulla purus bibendum justo, in dictum orci mi vitae nulla. Nullam 
           semper viverra nulla. Sed lacinia feugiat eros. Maecenas ullamcorper ligula quis odio. 
           Donec pede massa, pharetra sit amet, accumsan a, iaculis egestas, lectus. Etiam 
           ullamcorper elementum wisi. Etiam et felis aliquet dui tempus sagittis. Donec dapibus 
           ipsum id leo. Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. 
           Integer lobortis wisi id erat. Nullam aliquet augue ac elit. Nulla facilisi. Vivamus 
           ligula tortor, molestie at, accumsan quis, semper vitae, augue. Praesent pede neque, 
           sollicitudin non, facilisis sed, viverra a, pede. Cras nec urna. Curabitur ut metus. 
           Curabitur erat lacus, tempus vitae, elementum nec, pulvinar vel, leo. Sed a velit. 
           Proin erat. Donec sem. 
</p>
</body>
</html> 

Selecting cells in column

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">


#t1 * .c3 {
  display: none;
}  
</style>
</head>
<body>
<table id="t1"> 
    <thead> 
        <tr class="r1"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </thead> 
    <tfoot> 
        <tr class="r3"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tfoot> 
    <tbody class="b1"> 
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tbody> 
</table> 

</body> 

</html>

rowspans and colspans merge the specified number of cells vertically or horizontally

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title> - Tables</title>
   </head>

   <body>
      <table border = "1">
         <thead>
            <tr>
               <!-- merge two rows -->
               <th rowspan = "2">
                  Picture
               </th>
               <!-- merge four columns -->
               <th colspan = "4" valign = "top">
                  <h1>this is a test. </h1><br />
               </th>
            </tr>

            <tr valign = "bottom">
               <th>#</th>
               <th>I</th>
               <th>S</th>
               <th>P</th>
            </tr>

         </thead>

         <tbody>

            <tr>
               <th>C</th>
               <td>2</td>
               <td>A</td>
               <td rowspan = "2">L</td>
               <td rowspan = "2">L</td>
            </tr>

            <tr>
               <th>L</th>
               <td>1</td>
               <td>A</td>
            </tr>

         </tbody>

      </table>

   </body> 

</html>

css is for the table layout

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

table {  width:100%;margin-top:25px;clear:both;}
.column1, .column2, .column3, .column4 {width:25%;border-bottom:1px solid #fff;vertical-align:top;}
.column1 {background:pink}
.column2 {background:yellow}
.column3 {background:red}
.column4 {background:blue;}

</style>
</head>
<body>
<table cellspacing="0" cellpadding="2" summary="This is an example equalising layout">
  <tr> 
    <td class="column1">This is cell 1 : This is cell 1 :</td>
    <td class="column2">This is cell 2 : This is cell 2</td>
    <td class="column3">This is Cell 3 : This is Cell 3 :</td>
    <td class="column4">This is cell 4 with the most text: This is cell 4 with 
      the most text: </td>

  </tr>
  <tr> 
    <td class="column1">This is Cell 1 : This is Cell 1 :</td>
    <td class="column2">This is cell 2 : This is cell 2</td>
    <td class="column3">This is cell 3 with the most text: This is cell 3 with 
      the most text:</td>
    <td class="column4">This is cell 4 : This is cell 4 : </td>
  </tr>

  <tr> 
    <td class="column1">This is cell 1 : This is cell 1</td>
    <td class="column2">This is cell 2 with the most text: This is cell 2 with 
      the most text</td>
    <td class="column3">This is Cell 3 : This is Cell 3 :</td>
    <td class="column4">This is cell 4 : This is cell 4 : </td>
  </tr>
  <tr> 
    <td class="column1">This is cell 1 with the most text: This is cell 1 with 
      the most text</td>

    <td class="column2">This is cell 2 : This is cell 2</td>
    <td class="column3">This is Cell 3 : This is Cell 3 :</td>
    <td class="column4">This is cell 4 : This is cell 4 : </td>
  </tr>
</table>

</body>
</html>

 Table with number column

 <html>
        <head>
            <title>Hummus</title>
            <style type='text/css' media='all'>
                table {
                    border-width: 0px;
                    width: 500px;
                }
                th {
                    background: #ccc;
                    color: white;
                }
                tfoot td {
                    background: #808080;
                    color: white;
                }
            </style>
        </head>
        <body>
            <table>
                <thead>
                    <tr>
                        <th colspan='4'>
                            H
                        </th>
                    </tr>
                    <tr>
                        <th>
                            #
                        </th>
                        <th>
                            M
                        </th>
                        <th>
                            P
                        </th>
                        <th>
                            I
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>#</td>
                        <td>C</td>
                        <td>D</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>C</td>
                        <td colspan='2'>F</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>T</td>
                        <td colspan='2'>S</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>T</td>
                        <td colspan='2'>R</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>C</td>
                        <td colspan='2'>T</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>T</td>
                        <td>P</td>
                        <td>C</td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan='4'>
                             this is a test. 
                        </td>
                    </tr>
                </tfoot>
            </table>
      </body>
   </html>
td line-height:1.5; line-height:1.5em; line-height:75%;}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
td {
  width:200px;
  font:12pt arial;
}

td.number {font-size: 12pt; line-height:1.5;}
td.length {font-size: 12pt; line-height:1.5em;}
td.percentage {font-size: 12pt; line-height:75%;}
</style>

</head>

<body>
<table>
  <tr>
    <td class="number">The text here uses a  number, in this case 1.5, to specify the line-height. The text here uses a  number, in this case 1.5, to specify the line-height.</td>
    <td class="length">The text here uses a length of 1.5em to specify the line-height. The text here uses a length of 1.5em to specify the line-height.</td>
    <td class="percentage">The text here uses a percentage, in this case 75%, to specify the line-height. The text here uses a percentage, in this case 75%,, to specify the line-height.</td>
  </tr>
</table>
</body>
</html>
td font-size: 0.9em;
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">

table {
  border: 1px solid #d8d8d8;
  border-collapse: collapse;
  line-height: 1.3em;
  width: 95%;
  margin: 0 0 16px;
  padding: 0;
}

caption {
  font-size: 1.5em;
  font-weight: 400;
  margin: 0;
  padding: 6px 0 8px;
  text-align: left;
}

th {
  background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
  color: #505050;
  padding: 7px;
  text-align: left;
}

td {
  background: url(img/menubg.gif) repeat-x bottom left #f4f4f4;
  color: #303030;
  font-size: 0.9em;
  padding: 7px;
  text-align: left;
}


</style>

</head>
<body>
  <div id="footer">
    <table><caption>caption</caption><tr><td>this is a test</td></tr></table>
    
  </div>

</body>
</html>

td color: #303030;

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">

table {
  border: 1px solid #d8d8d8;
  border-collapse: collapse;
  line-height: 1.3em;
  width: 95%;
  margin: 0 0 16px;
  padding: 0;
}

caption {
  font-size: 1.5em;
  font-weight: 400;
  margin: 0;
  padding: 6px 0 8px;
  text-align: left;
}

th {
  background: url(img/menubg2.gif) repeat-x bottom left #eaeaea;
  color: #505050;
  padding: 7px;
  text-align: left;
}

td {
  background: url(img/menubg.gif) repeat-x bottom left #f4f4f4;
  color: #303030;
  font-size: 0.9em;
  padding: 7px;
  text-align: left;
}


</style>

</head>
<body>
  <div id="footer">
    <table><caption>caption</caption><tr><td>this is a test</td></tr></table>
    
  </div>

</body>
</html>
td font-size: 130%;
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title></title>
<style type='text/css'>
body {
    font-family: monospace;
    padding: 10px;
    margin: 10px;
}
table.recipe {
    width: 100%;
    margin-bottom: 5px;
}
caption {
    text-align: left;
    margin-bottom: 5px;
    text-transform: lowercase;
    font-size: 160%;
    padding: 5px;
    letter-spacing: 10px;
    font-weight: bold;
}
table.recipe thead th {
    font-weight: bold;
    font-size: 150%;
    color: black;
}
table.recipe thead th, table.recipe tbody td {
    padding: 5px;
    text-transform: lowercase;
}
table.recipe tbody td, table.recipe tfoot td {
    font-size: 130%;
}
table.recipe tfoot td {
    padding: 5px;
}
table.recipe tfoot td p {
    padding: 5px;
}
li {
    margin-left: 30px;
    padding-left: 30px;
}
</style>


    </head>
    <body>
        <table class='recipe'>
            <caption>
                Spicy Thai Peanut Sauce
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> quantity     </th>
                    <th> measurement  </th>
                    <th> product      </th>
                    <th> instructions </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Peanut Oil       </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 12               </td>
                    <td> Each             </td>
                    <td> Serrano Peppers  </td>
                    <td> Sliced           </td>
                </tr>
                <tr>
                    <td> 16               </td>
                    <td> Each             </td>
                    <td> Garlic Cloves    </td>
                    <td> Minced           </td>
                </tr>
                <tr>
                    <td> 2                </td>
                    <td> CUPS             </td>
                    <td> Peanut Butter    </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 1                </td>
                    <td> CUPS             </td>
                    <td> Soy Sauce        </td>
                    <td></td>
                </tr>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Lime Juice       </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 4                </td>
                    <td> TABLESPOONS      </td>
                    <td> Sesame Oil       </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 4                </td>
                    <td> CUPS             </td>
                    <td> Coconut Milk     </td>
                    <td></td>
                </tr>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Honey            </td>
                    <td></td>
                </tr>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Brown Sugar      </td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='4'>
                        <ul>
                            <li>
                                Saut&eacute; sliced serranos and garlic in peanut
                                oil til lightly browned.
                            </li>
                            <li>
                                Add all other ingredients and stir till dissolved.
                            </li>
                            <li>
                                Simmer for 5 minutes.
                            </li>
                            <li>
                                Pur&eacute;e all in blender.
                            </li>
                        </ul>
                        <p>
                            Saut&eacute; your favorite vegetables; onions,
                            mushrooms, green peppers, and squash work best. Sprinkle
                            with allspice, salt, and pepper. Optionally add walnuts
                            or pine nuts. Add browned chicken or tofu and glaze
                            with sauce. Serve with jasmine rice.
                        </p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

td overflow: hidden;

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>table-layout</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
table {
    border: 1px solid rgb(200, 200, 200);
    caption-side: bottom;
    width: 200px;
    table-layout: fixed;
}
th {
    background: lightyellow;
}
th, td {
    border: 1px solid rgb(200, 200, 200);
    padding: 5px;
    overflow: hidden;
}
col#album {
    width: 200px;
    background: rgb(244, 244, 244);
    color: crimson;
}
col#released {
    width: 1%;
    background: rgb(244, 244, 244);
}
div#control {
    width: 200px;
    background: crimson;
    color: white;
    text-align: center;
    font-family: monospace;
    margin-bottom: 5px;
    padding: 3px 0;
}
</style>


    </head>
    <body>
        <div id='control'>
            &lt; -- 200 pixels -- &gt;
        </div>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col id='album' />
                <col id='artist' />
                <col id='released' />
            </colgroup>
            <thead>
                <tr>
                    <th> album            </th>
                    <th> artist           </th>
                    <th> released         </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> D      </td>
                    <td> C      </td>
                    <td> 1965             </td>
                </tr>
                <tr>
                    <td> A  </td>
                    <td> B     </td>
                    <td> 1967             </td>
                </tr>
                <tr>
                    <td> N </td>
                    <td> M                  </td>
                    <td> 1995                                   </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
td width:6em;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
table {
 border-collapse: collapse;
 border: 1px solid black;
}

th {
 border: 1px solid black;
 width: 6em;
}
td {
 width:6em;
 border: 1px solid black;
}

th {
 border: 1px solid black;
 width: 6em;
}
td {
 width:6em;
 border: 1px solid black;
 padding: 0;
 margin: 0;
}

input {
 width: 100%;
 border: none;
 margin: 0;
}

.save {
 margin-top: 1em;
 width: 5em;
}

input {
 width: 100%;
 border: none;
 margin: 0;
 text-align: right;  
}
</style>
</head>

<body>
    <form method="get" name="copresentations">
   <table cellspacing="0">
    <caption>
     Summary of Financial Data
    </caption>
    <tr>
     <th scope="col">Fiscal Year </th>
     <th scope="col">Worksite<br />
      Presentations </th>
     <th scope="col">ing Grades </th>
     <th scope="col">Number of Presentators </th>
    </tr>
    <tr>
     <th scope="row">1999</th>
     <td><input type="text" name="1999" /></td>
     <td><input type="text" name="1999" /></td>
     <td><input type="text" name="1999" /></td>
    </tr>
    <tr>
     <th scope="row">2000</th>
     <td><input type="text" name="2000" /></td>
     <td><input type="text" name="2000" /></td>
     <td><input type="text" name="2000" /></td>
    </tr>
    <tr>
     <th scope="row">2001</th>
     <td><input type="text" name="2001" /></td>
     <td><input type="text" name="2001" /></td>
     <td><input type="text" name="2001" /></td>
    </tr>
    <tr>
     <th scope="row">2002</th>
     <td><input type="text" name="2002" /></td>
     <td><input type="text" name="2002" /></td>
     <td><input type="text" name="2002" /></td>
    </tr>
    <tr>
     <th scope="row">2003</th>
     <td><input type="text" name="2003" /></td>
     <td><input type="text" name="2003" /></td>
     <td><input type="text" name="2003" /></td>
    </tr>
    <tr>
     <th scope="row">2004</th>
     <td><input type="text" name="2004" /></td>
     <td><input type="text" name="2004" /></td>
     <td><input type="text" name="2004" /></td>
    </tr>
   </table>
   <input type="submit" class="save" value="Save" />
  </form>
</body>

</html>

empty-cells: hide

<html>
    <head>
        <title> My favorite records  </title>
        <style rel='stylesheet' type='text/css'>
table {
    width: 100%;
    border: thin solid black;
    empty-cells: hide;
}
td:empty {
    background: gray;
}
th, tfoot td {
    border: thin solid black;
    text-align: center;
    font-weight: bold;
}
tbody td {
    font-size: 120%;
}
caption {
    font-size: 90%;
    text-align: right;
}
td, th, caption {
    padding: 5px;
}
        </style>
    </head>
    <body>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> Column 1</th>
                    <th> Column 2</th>
                    <th> Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> B</td>
                    <td> V</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> Q</td>
                    <td> Q</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td> M</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> Column 1</td>
                    <td> Column 2</td>
                    <td> Column 3</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
Table cell with line height setting
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    td {
      width: 10em;
      line-height: 1.5em;
      padding: 0.25em;
      border: 1px dashed black;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
</body>
</html>
Table cell with different class
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
</body>
</html>
Set style for an anchor in table cell
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
td a {
 display: block;
 background-color: #333;
 color: white;
 text-decoration: none;
 padding: 4px;
}
</style>
</head>

<body>
     <table cellspacing="15">
   <tr>
     <th colspan="2">
      General 
     </th>
   </tr>
   <tr>
     <th>
     </th>
     <th>
      Estimate
     </th>
   </tr>
   <tr>
     <td>
      <a href=" ">Total population</a>
     </td>
     <td>
      272,091
     </td>
   </tr>
  </table>
</body>

</html>
Selecting cells in body
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">

#t1 tbody td {
  font-variant: small-caps;
}
</style>
</head>
<body>
<table id="t1"> 
    <thead> 
        <tr class="r1"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </thead> 
    <tfoot> 
        <tr class="r3"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tfoot> 
    <tbody class="b1"> 
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tbody> 
</table> 

</body>
</html>
table cell overflow hidden
<html>
    <head>
        <title> My favorite records  </title>
        <style rel='stylesheet' type='text/css'>
table {
    width: 200px;
    border: thin solid black;
    table-layout: fixed;
}
th, td {
    overflow: hidden;
}
th, tfoot td {
    border: thin solid black;
    text-align: center;
    font-weight: bold;
}
tbody td {
    font-size: 120%;
}
caption {
    font-size: 90%;
    text-align: right;
}
td, th, caption {
    padding: 5px;
}        
        </style>
    </head>
    <body>
        <div style='width: 200px;
                     height: 30px;
                     background: gray;
                     color: white;
                     text-align: center;'>
        &lt; -- 200 pixels -- &gt;
      </div>
        <table>
            <caption>
                My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> r</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> a</td>
                    <td> a</td>
                    <td> r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
td:empty
<html>
    <head>
        <title> My favorite records  </title>
        <style rel='stylesheet' type='text/css'>
table {
    width: 100%;
    border: thin solid black;
}
td:empty {
    background: gray;
}
th, tfoot td {
    border: thin solid black;
    text-align: center;
    font-weight: bold;
}
tbody td {
    font-size: 120%;
}
caption {
    font-size: 90%;
    text-align: right;
}
td, th, caption {
    padding: 5px;
}        
        </style>
    </head>
    <body>
        <table>
            <caption>
                Table: My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> r</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> a</td>
                    <td> a</td>
                    <td> r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
table cell hover with class
<html>
    <head>
        <title></title>
        <style rel='stylesheet' type='text/css'>
body {
    padding: 10px;
    margin: 10px auto;
    min-width: 500px;
    max-width: 900px;
}
table.myStyle {
    width: 100%;
    margin-bottom: 5px;
}
caption {
    text-align: left;
    margin-bottom: 5px;
    text-transform: lowercase;
    font-size: 160%;
    padding: 5px;
    letter-spacing: 10px;
    font-weight: bold;
}
table.myStyle thead th {
    font-weight: bold;
    font-size: 150%;
    color: black;
}
table.myStyle thead th, table.myStyle tbody td {
    padding: 5px;
    text-transform: lowercase;
}
table.myStyle tbody td, table.myStyle tfoot td {
    font-size: 130%;
}
table.myStyle tfoot td {
    padding: 5px;
}
table.myStyle tbody td:hover,
table.myStyle thead th:hover,
table.myStyle tfoot td ul:hover,
table.myStyle caption:hover,
table.myStyle tfoot td p:hover {
    background: black;
    color: white;
    font-weight: bold;
}
table.myStyle tfoot td p {
    padding: 5px;   
}
li {
    margin-left: 30px;
    padding-left: 30px;
}        
        </style>
    </head>
    <body>
        <table class='myStyle'>
            <caption>
                S
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> quantity     </th>
                    <th> measurement  </th>
                    <th> product      </th>
                    <th> instructions </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>  .5              </td>
                    <td>  C</td>
                    <td>  B</td>
                    <td>  </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='4'>
                        <ul>
                            <li>
                                P
                            </li>
                        </ul>
                        <p>
                            S 
                        </p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
td font-weight: bold;
<html>
<head><title>Tables</title>
<style type="text/css">
td {
  text-align: center;
  font-weight: bold;
}

table {
  background-color: blue;
  color: white;
}

caption {
  background-color: red;
  color: yellow;
  font-weight: bold;
}

th {
  background-color: gold;
  color: navy
}

td.center {
  background-color: white;
  color: black;
}
</style></head>

<body>
<table>
    <caption>How to Use Tables</caption>
  <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
  </tr>
  <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
  </tr>
  <tr>
      <td>X</td>
      <td class="center">X</td>
      <td>X</td>
  </tr>
  <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
  </tr>
</table>
</body>
</html>

Boxed Table and Cells

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  border-collapse: separate;
}

* .boxed-table {
  border: 1px solid black;
}

* .boxed-cells td {
  border: 1px solid black;
}


* .boxed-cells td.x {
  border: none;
}
</style>
</head>
<body>


<h2></h2> 

<table class="boxed-table boxed-cells" cellspacing="5"> 

    <tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> 
    <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>
</table> 


</body>
</html>
Table with Spanned Rows and Cells
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  width: auto;
  height: 1px;
  table-layout: auto;
  border-collapse: collapse;
  margin-left: 20px;
  border: 1px solid black;
}

td,th {
  width: 50px;
  height: 1px;
  overflow: hidden;
  visibility: visible;
  border: 1px solid black;
  padding: 5px;
  background: pink;
  text-align: center;
  vertical-align: middle;
  text-indent: 5px;
}
</style>
</head>
<body>

<h2>Table with Spanned Rows and Cells</h2> 

<table> 
    <tr> <td rowspan="2">1</td> <td colspan="2">2-3</td> </tr> 
    <tr> <td>8</td> <td>9</td> <td> </td> <td>&nbsp;</td> <td>12</td> </tr> 

</table> 


</body>
</html>
Right-offset Shrinkwrapped Table
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.parent {
  width: 600px;
  height: 600px;
  background: black;
}

* .r-wrap {
  width: auto;
  margin-left: auto;
  margin-right: 20px;
  background: pink;
}
</style>
</head>
<body>

<div class="parent"> 
  <table class="r-wrap"><tr><td>Right-offset Shrinkwrapped Table</td></tr></table> 
</div> 


</body>
</html>
Table cell hover
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>tr 2</title>
<style>
tr { background: white; } 
tr.alt { background: yellow; }

tr:hover {background: pink;}
td:hover {background:red;}

</style>

</head>

<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Place of residence</th>
  </tr>
  <tr>
    <td>P</td>
    <td>P</td>
  </tr>
  <tr class="alt">
    <td>B</td>
    <td>B</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
  </tr>
  <tr class="alt">
    <td>P</td>
    <td>P</td>
  </tr>
</table>
</body>
</html>
Empty table header cell
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Scope 1</title>
</head>

<body>
<table border="1">
  <tr>
    <td rowspan="2"></td>
    <th colspan="2">Staff</th>
    <th rowspan="2">Managers</th>
  </tr>
  <tr>
    <th>Short</th>
    <th>Tall</th>
  </tr>
  <tr>
    <th>Bitbyte</th>
    <td>11</td>
    <td>9</td>
    <td>1</td>
  </tr>
  <tr>
    <th>UltraHyperMegaCorp</th>
    <td>2100</td>
    <td>900</td>
    <td>1000</td>
  </tr>
</table>

</body>
</html>
Hide empty cell
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Empty cells 1</title>
<style>
table {
  empty-cells: hide;
}

td, th {
  border: 1px solid black;
}

</style>
</head>

<body>
<table>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" id="">S</th>
    <th rowspan="2" id="">M</th>
  </tr>
  <tr>
    <th id="">S</th>
    <th id="">T</th>
  </tr>
  <tr>
    <th id="">B</th>
    <td headers="">11</td>
    <td headers="">9</td>
    <td headers="">1</td>
  </tr>
  <tr>
    <th id="">U</th>
    <td headers="">2100</td>
    <td headers="">900</td>
    <td headers="">1000</td>
  </tr>
</table>

</body>
</html>
use table cell as block
<html>
    <head>
         <style type='text/css' media='all'>
            table {
                margin: auto;
            }
            td {
                background: #ccc;
                margin: 10%;
                border: 5px solid black;
                padding: 10%;
                width: 100%;
                color: black;
                font-size: 200%;
                text-align: center;
            }


        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    Some content.
                </td>
            </tr>
        </table>

    </body>
</html>