CSS : Html Tags tfoot
tfoot th, tfoot td {border-top: 2px solid #666; color: #363;}
<html> <head> <title></title> <style type="text/css" media="all"> body {margin: 2em 5%;} table {border-collapse: collapse; border-spacing: 0;} th, td {padding: 0.25em 0.75em;} thead th {border-bottom: 1px solid #333; text-align: center; font-weight: bold;} tfoot th, tfoot td {border-top: 2px solid #666; color: #363;} </style> </head> <body> <table> <thead> <tr> <th></th> <th scope="col">Q1</th> <th scope="col">Q2</th> <th scope="col">Q3</th> <th scope="col">Q4</th> </tr> </thead> <tbody> <tr> <th>#207-B34</th> <td>$11,940</td> <td>$12,348</td> <td>$14,301</td> <td>$17,208</td> </tr> <tr> <th>#207-B35</th> <td>$9,345</td> <td>$9,834</td> <td>$10,035</td> <td>$9,672</td> </tr> <tr> <th>#207-B36</th> <td>$2,787</td> <td>$3,123</td> <td>$4,137</td> <td>$3,711</td> </tr> <tr> <th>#208-A07</th> <td>$1,657</td> <td>$3,003</td> <td>$2,882</td> <td>$2,690</td> </tr> <tr> <th>#208-A11</th> <td>$8,947</td> <td>$7,249</td> <td>$8,102</td> <td>$7,821</td> </tr> <tr> <th>#208-A12</th> <td>$9,034</td> <td>$11,027</td> <td>$11,793</td> <td>$10,283</td> </tr> <tr> <th>#208-A13</th> <td>$10,633</td> <td>$12,574</td> <td>$12,834</td> <td>$11,568</td> </tr> <tr> <th>#208-A23</th> <td>$15,856</td> <td>$16,239</td> <td>$16,057</td> <td>$15,712</td> </tr> <tr> <th>#209-C17</th> <td>$8,245</td> <td>$6,929</td> <td>$6,498</td> <td>$5,016</td> </tr> <tr> <th>#209-C55</th> <td>$4,896</td> <td>$4,869</td> <td>$4,383</td> <td>$6,808</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>$83,340</td> <td>$87,195</td> <td>$91,022</td> <td>$90,489</td> </tr> </tfoot> </table> </body> </html>
tfoot td border: thin solid black;text-align: center;font-weight: bold;
<html>
<head>
<title> My favorite records </title>
<style>
* {
font-family: monospace;
}
body {
margin: 0;
}
table {
width: 200px;
border: thin solid black;
}
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;'>
< -- 200 pixels -- >
</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> This is a test. </td>
<td> This is a test. </td>
<td> 1965 </td>
</tr>
<tr>
<td> This is a test. </td>
<td> This is a test. </td>
<td> 1967 </td>
</tr>
<tr>
<td> Queen II </td>
<td> Queen </td>
<td> 1974 </td>
</tr>
<tr>
<td> Sone </td>
<td> Music </td>
<td> 1995 </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> album </td>
<td> artist </td>
<td> released </td>
</tr>
</tfoot>
</table>
</body>
</html>Selecting cells in foot
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
#t1 tfoot td {
font-style: italic;
}
</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>
Style for table footer: background, color and font
<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"> table { border-top: 1px solid #c9c9c9; border-left: 1px solid #c9c9c9; } caption { padding: 0 0 10px; font: bold 120% Arial, sans-serif; text-transform: uppercase; } th { text-align: left; font-weight: bold; } th,td { border-bottom: 1px solid #c9c9c9; border-right: 1px solid #c9c9c9; font: 80% Verdana, Arial, sans-serif; padding: 2px 5px; } tfoot { background-color: #666666; color: #dddddd; font-size: 80%; } table { border: 1px solid #666666; } tfoot td { border-bottom: 0; border-right: 0; } </style> </head> <body> <table width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist"> <caption> A list </caption> <thead> <tr> <th>S</th> <th>T</th> <th>A</th> <th>A</th> <th>P</th> </tr> </thead> <tfoot> <tr> <td colspan="5">Music</td> </tr> </tfoot> <tbody> <tr><td>A</td><td>2:35</td><td>A</td><td>A</td><td>7</td></tr> <tr><td>B</td><td>2:35</td><td>B</td><td>B</td><td>7</td></tr> <tr><td>C</td><td>2:35</td><td>C</td><td>C</td><td>7</td></tr> <tr><td>D</td><td>2:35</td><td>D</td><td>D</td><td>7</td></tr> <tr><td>E</td><td>2:35</td><td>E</td><td>E</td><td>7</td></tr> <tr><td>F</td><td>2:35</td><td>F</td><td>F</td><td>7</td></tr> <tr><td>G</td><td>2:35</td><td>G</td><td>G</td><td>7</td></tr> <tr><td>H</td><td>2:35</td><td>H</td><td>H</td><td>7</td></tr> <tr><td>I</td><td>2:35</td><td>I</td><td>I</td><td>7</td></tr> <tr><td>J</td><td>2:35</td><td>J</td><td>J</td><td>7</td></tr> <tr><td>K</td><td>2:35</td><td>K</td><td>K</td><td>7</td></tr> <tr><td>L</td><td>2:35</td><td>L</td><td>L</td><td>7</td></tr> </tbody> </table> </body> </html>
Add extra row to the footer
<html>
<head>
<title> My favorite records </title>
<style rel='stylesheet' type='text/css'>
table {
width: 100%;
border: thin solid black;
}
td {
border: thin solid black;
}
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>Only header and footer have border
<html>
<head>
<title> My favorite records </title>
<style rel='stylesheet' type='text/css'>
table {
width: 100%;
border: thin solid black;
}
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;
}
col#album {
background: lightgrey;
}
col#artist {
width: 250px;
}
col#released {
width: 100px;
background: lightgrey;
}
</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> E</td>
<td> V</td>
<td> 1</td>
</tr>
<tr>
<td> Q</td>
<td> Q</td>
<td> 1</td>
</tr>
<tr>
<td> S</td>
<td> P</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 footer style
<html>
<head>
<title> My favorite records </title>
<style rel='stylesheet' type='text/css' >
table {
width: 100%;
border: thin solid black;
caption-side: bottom;
}
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> A</td>
<td> T</td>
<td> 1</td>
</tr>
<tr>
<td> C</td>
<td> V</td>
<td> 1</td>
</tr>
<tr>
<td> S</td>
<td> Q</td>
<td> 1</td>
</tr>
<tr>
<td> I</td>
<td> P</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>
Style for table footer
<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.example1 tfoot { background: red; color: white; } </style> </head> <body> <h2>Row Groups</h2> <table class="example1"> <thead> <tr> <th>thead</th> <th>2 </th> <th>3 </th> <th>4 </th> </tr> </thead> <tfoot> <tr> <th>tfoot</th> <td>10</td> <td>11</td> <td>12</td> </tr> </tfoot> <tbody> <tr> <th>tbody</th> <td>6 </td> <td>7 </td> <td>8 </td> </tr> </tbody> </table> </body> </html>
table header foot
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using an alternate way to create a table</title> </head> <body> <table border="1" summary="This table provides the pricing information"> <thead> <tr> <th>P</th> <th>S</th> <th>M</th> <th>L</th> </tr> </thead> <tfoot> <tr> <td scope="row"># Pieces</td> <td>8</td> <td>12</td> <td>16</td> </tr> </tfoot> <tbody> <tr> <td scope="row">Thin Crust</td> <td>3.99</td> <td>4.99</td> <td>6.99</td> </tr> <tr> <td scope="row">Deep Dish</td> <td>4.99</td> <td>6.99</td> <td>8.99</td> </tr> <tr> <td scope="row">Stuffed Crust</td> <td>5.99</td> <td>7.99</td> <td>9.99</td> </tr> </tbody> </table> </body> </html>