HTML/CSS/Table Style/table caption

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

Caption align to the right

   <source lang="html4strict">

<!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>
<colgroup> <col id="album" /> <col id="artist" /> <col id="released" /> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
album artist released
R T 1
B V 1
Q Q/td> 1
M T 1
album artist released 
   </body>

</html> 

</source>


caption background-color: red;

   <source lang="html4strict">


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

How to Use Tables
Col 1 Col 2 Col 3
X X X
X X X
X X X

</body> </html> 

</source>


caption border-color: #666666;

   <source lang="html4strict">

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

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html> 

</source>


caption border-style: solid;

   <source lang="html4strict">

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

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html> 

</source>


caption border-width: 1px;

   <source lang="html4strict">

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

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html> 

</source>


caption color: yellow;

   <source lang="html4strict">

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

How to Use Tables
Col 1 Col 2 Col 3
X X X
X X X
X X X

</body> </html> 

</source>


caption font-weight: bold;

   <source lang="html4strict">

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

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html> 

</source>


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

   <source lang="html4strict">


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

How to Use Tables
Col 1 Col 2 Col 3
X X X
X X X
X X X

</body> </html> 

</source>


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

   <source lang="html4strict">

<?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>
<tbody> </tbody>
Price of Fruit
Apple $0.25
Orange $0.50
Banana $1.00
Pineapple $2.00 
  </body>

</html> 

</source>


caption text-align: left;

   <source lang="html4strict">

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

Font properties
Property Purpose
font-family Specifies the font used.
font-size Specifies the size of the font used.
font-style Specifies whether the font should be normal, italic, or oblique.
font-weight Specifies whether the font should be normal, bold, bolder, or lighter.

</body> </html> 

</source>


caption text-align: right

   <source lang="html4strict">

<!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>
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
a a r
R T 1
a a r 
   </body>

</html> 

</source>


Set style for table caption

   <source lang="html4strict">

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

Shopping Cart Listing - Subtotal: $45.16; changed quantities? <input type="submit" value="Update price(s)" />

</body> </html> 

</source>


Table caption tag

   <source lang="html4strict">

<?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>
Our Pizza Selections
Pizza Type Small Medium Large
Thin Crust 3.99 4.99 6.99
Deep Dish 4.99 6.99 8.99
Stuffed Crust 5.99 7.99 9.99 
 </body>

</html> 

</source>


Table with caption and table header

   <source lang="html4strict">


<html> <head><title>Tables</title></head> <body>

How to Use Tables
Col 1Col 2Col 3
XXX
XXX
XXX

</body> </html> 

</source>


Table with caption, header, footer and table body

   <source lang="html4strict">

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

<thead> </thead> <tfoot> </tfoot> <tbody> </tbody>
A playlist of great music
Song Name Time Artist Album Play Count
Music
A 4:26 S D 4

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_caption&oldid=5105»