HTML/CSS/Table Style/table caption

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

Caption align to the right

 
<!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">
body {
    margin: 0;
}
table {
    border: thin solid black;
    table-layout: auto;
}
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 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> 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> album            </td>
                    <td> artist           </td>
                    <td> released         </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



caption background-color: red;

 


<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>



caption border-color: #666666;

 

<?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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
caption {
  font-weight: bold;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}

</style>
</head>
<body>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>



caption border-style: solid;

 

<?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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
caption {
  font-weight: bold;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}

</style>
</head>
<body>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>



caption border-width: 1px;

 

<?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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
caption {
  font-weight: bold;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}

</style>
</head>
<body>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>



caption color: yellow;

 
<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>



caption font-weight: bold;

 

<?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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
caption {
  font-weight: bold;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}

</style>
</head>
<body>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>



caption font-weight: bold; / color: yellow;

 


<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>



caption tag summarizes the table"s contents (this helps the visually impaired)

 

<?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">
         <caption><strong>Price of Fruit</strong></caption>
         <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>
      </table>
   </body>
</html>



caption text-align: left;

 

<?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" lang="en" xml:lang="en">
<head>
  <title>CSS Example</title>
  <style rel="stylesheet" type="text/css">
caption {
  font-weight: bold;
  text-align: left;
  border-style: solid;
  border-width: 1px;
  border-color: #666666;
}

</style>
</head>
<body>
<table>
  <caption>Font properties</caption>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic, or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td class="last">Specifies whether the font should be normal, bold, bolder, or lighter.</td>
  </tr>
</table>
</body>
</html>



caption text-align: right

 

<!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;
}
        
        </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>



Set style for table caption

 

<!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></title>
<style type="text/css">
table caption {
    font: 1.5em Georgia, "Times New Roman", Times, serif; 
    padding: 1em;
}
</style>
</head>
<body>
  <table id="shoppingcartTable" summary="List of products">
   <caption>Shopping Cart Listing - <strong>Subtotal: $45.16</strong>; 
  changed quantities? <input type="submit"  value="Update price(s)" /></caption>
  </table>
</body>
</html>



Table caption tag

 
<?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>A Basic Table with Caption</title>
  </head>
  <body>
    <table border="1" summary="Prices for types of pizza by size">
      <caption>Our Pizza Selections</caption>
      <tr>
        <td scope="col">Pizza Type</td>
        <td scope="col">Small</td>
        <td scope="col">Medium</td>
        <td scope="col">Large</td>
      </tr>
      <tr>
        <td>Thin Crust</td>
        <td>3.99</td>
        <td>4.99</td>
        <td>6.99</td>
      </tr>
      <tr>
        <td>Deep Dish</td>
        <td>4.99</td>
        <td>6.99</td>
        <td>8.99</td>
      </tr>
      <tr>
        <td>Stuffed Crust</td>
        <td>5.99</td>
        <td>7.99</td>
        <td>9.99</td>
      </tr>
    </table>
  </body>
</html>



Table with caption and table header

 


<html>
<head><title>Tables</title></head>
<body>
<table border="3">
   <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>X</td><td>X</td></tr>
   <tr><td>X</td><td>X</td><td>X</td></tr>
</table>
</body>
</html>



Table with caption, header, footer and table body

 
<!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>
</head>
<body>
    <table width="90%" border="1" cellpadding="2" cellspacing="0" summary="A playlist">
        <caption>
            A playlist of great music
        </caption>
        <thead>
            <tr>
                <th>Song Name</th>
                <th>Time</th>
                <th>Artist</th>
                <th>Album</th>
                <th>Play Count</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">Music</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>A</td>
                <td>4:26</td>
                <td>S</td>
                <td>D</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_caption&oldid=5105»