HTML/CSS/Table Style/table caption — различия между версиями

Версия 09:21, 26 мая 2010

Содержание

1 Caption align to the right
2 caption background-color: red;
3 caption border-color: #666666;
4 caption border-style: solid;
5 caption border-width: 1px;
6 caption color: yellow;
7 caption font-weight: bold;
8 caption font-weight: bold; / color: yellow;
9 caption tag summarizes the table"s contents (this helps the visually impaired)
10 caption text-align: left;
11 caption text-align: right
12 Set style for table caption
13 Table caption tag
14 Table with caption and table header
15 Table with caption, header, footer and table body

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>

HTML/CSS/Table Style/table caption — различия между версиями

Версия 09:21, 26 мая 2010

Содержание

Caption align to the right

caption background-color: red;

caption border-color: #666666;

caption border-style: solid;

caption border-width: 1px;

caption color: yellow;

caption font-weight: bold;

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

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

caption text-align: left;

caption text-align: right

Set style for table caption

Table caption tag

Table with caption and table header

Table with caption, header, footer and table body

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 08:16, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 09:21, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)