HTML/CSS/Table Style/table footer

Материал из Web эксперт
Перейти к: навигация, поиск

Add extra row to the footer

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>



Selecting cells in foot

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>



Style for table footer: background, color and font

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>



Table footer style

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>



table header foot

 
<?xml version"1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>



tfoot tag is the last section of a table, which formats the table footer

 

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title>A simple XHTML table</title>
   </head>
   <body>
      <table border = "1" width = "40%" summary = "summary">
         <tbody>
            <tr>
               <td>Apple</td>
               <td>$0.25</td>
            </tr>
            <tr>
               <td>Orange</td>
               <td>$0.50</td>
            </tr>
            <tr>
               <td>Banana</td>
               <td>$1.00</td>
            </tr>
            <tr>
               <td>Pineapple</td>
               <td>$2.00</td>
            </tr>
         </tbody>
         <tfoot>
            <tr>
               <th>Total</th>
               <th>$3.75</th>
            </tr>
         </tfoot>
      </table>
   </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_footer&oldid=5079»