HTML/CSS/Table Style/table header

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

Add background for table header

   <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" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css" media="screen">
 div {
   margin-bottom: 30px;
   }
 #divID table { 
   border-top: 1px solid #999;
   border-left: 1px solid #999;
   border-collapse: collapse;
 } 
 
 #divID th, #divID td { 
   padding: 10px;
   border-right: 1px solid #999;
   border-bottom: 1px solid #999;
 } 
   #divID caption {
   font-family: Arial, sans-serif;
   color: #993333;
   padding-bottom: 6px;
 }
 #divID th {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   background: #ccc;
 }
 </style>

</head> <body>

This is the title of the table
Year Opponent Item 3
1918 Item A 75-51
1916 Item B 91-63
1915 Item C 101-50
1912 Item D 105-47

</body> </html> 

</source>


Add background image for table header

   <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" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css" media="screen">
 #divID th {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   background: url(image/th_stripe.gif);
   }
 
 </style>

</head> <body>

This is the title of the table
Year Opponent Item 3
1918 Item A 75-51
1916 Item B 91-63
1915 Item C 101-50
1912 Item D 105-47

</body> </html> 

</source>


Add different background images for each table column header

   <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" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css" media="screen">
 #divID th {
   font-family: Verdana, sans-serif;
   font-size: 12px;
   background: url(image/th_stripe.gif);
 }
 #divID #year {
   padding-left: 26px;
   background: #ccc url(img/icon_year.gif) no-repeat 10px 50%;
 }
 
 #divID #opponent {
   padding-left: 26px;
   background: #ccc url(img/icon_opp.gif) no-repeat 10px 50%;
 }
 
 #divID #record {
   padding-left: 26px;
   background: #ccc url(img/icon_rec.gif) no-repeat 10px 50%;
 }
 </style>

</head> <body>

This is the title of the table
Year Opponent Season Record (W-L)
1918 Item A 75-51
1916 Item B 91-63
1915 Item C 101-50
1912 Item D 105-47

</body> </html> 

</source>


Add padding for table header and table cell

   <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" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title></title>
 <style type="text/css" media="screen">
 div {
   margin-bottom: 30px;
 }
 #divID table { 
   border-top: 1px solid #999;
   border-left: 1px solid #999;
   border-collapse: collapse;
 } 
 #divID th, #divID td { 
   padding: 10px;
   border-right: 1px solid #999;
   border-bottom: 1px solid #999;
 } 
 </style>

</head> <body>

This is the title of the table
Year Opponent Item 3
1918 Item A 75-51
1916 Item B 91-63
1915 Item C 101-50
1912 Item D 105-47

</body> </html> 

</source>


Background for table header row

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

 background: #bababa url(stripe.gif) 0 50% repeat-x;
 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;

} </style> </head> <body>

<thead> </thead> <tfoot> </tfoot> <tbody> 
       </tbody>
A playlist of great music
S T A A P
Music
A2:35AA7
B2:35BB7
C2:35CC7
D2:35DD7
E2:35EE7
F2:35FF7
G2:35GG7
H2:35HH7
I2:35II7
J2:35JJ7
K2:35KK7
L2:35LL7

</body> </html> 

</source>


Basic table with th tag

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Basic Table 2</title> </head> <body>

N P
P O
V B
L L
E P

</body> </html> 

</source>


Grouped table header

   <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 Movies</title>
           <style type="text/css" media="all">
             table {
                 border-width: 0px;
                 width: 500px;
             }
             th {
                 background: black;
                 color: white;
             }
          </style>
       </head>
       <body>

                       My Favorite Movies

                       Title

                       Actor/Actress

                       Genre
W R D
S K H
G B C 
     </body>
  </html>
</source>


Nested table header

   <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> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Colgroup 2</title> <style> td, th { 

 border: 1px solid black;

} </style> </head> <body>

<colgroup style="background-color: #ccc;"></colgroup> <colgroup></colgroup> <colgroup span="3"></colgroup>
Personal details
Name Place of residence Date of birth
dd mm yyyy
P O 14 06 1978
V B 12 01 1985
L L 01 03 1956
E P 28 02 1979

</body> </html> 

</source>


Selecting cells in head

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

<style type="text/css" media="Screen">

  1. t1 thead td {
 font-weight: bold;

} </style> </head> <body>

<thead> </thead> <tfoot> </tfoot> <tbody class="b1"> </tbody>
c1 c2 c3 c4 c5 c6
c1 c2 c3 c4 c5 c6
r2 c1 c2 c3 c4 c5 c6

</body> </html> 

</source>


Set table border for table header

   <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" xml:lang="en" lang="en"> <head> 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Chater 3 - Tables are Evil?</title>
 <style type="text/css" media="screen">
 div {
   margin-bottom: 30px;
 }
   
 #divID table {
   border-top: 1px solid #999;
   border-left: 1px solid #999;
 }
 
 #divID th, #divID td {
   border-right: 1px solid #999;
   border-bottom: 1px solid #999;
 }  
 
 </style>

</head> <body>

This is the title of the table
Year Opponent Item 3
1918 Item A 75-51
1916 Item B 91-63
1915 Item C 101-50
1912 Item D 105-47

</body> </html> 

</source>


Set table header border to be 1px solid black, its width to 6em

   <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"> th { 

border: 1px solid black;
width: 6em;

} </style> </head> <body> 

   <form method="get" name="copresentations">
Summary of Financial Data
F W P N
2003 <input type="text" name="w2003" /> <input type="text" name="p2003" /> <input type="text" name="n2003" />
2004 <input type="text" name="w2004" /> <input type="text" name="p2004" /> <input type="text" name="n2004" /> 
  <input type="submit" class="save" value="Save" />
 </form>

</body> </html> 

</source>


Style for table header

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

<style type="text/css" media="Screen"> table.example1 thead { 

 background: red;
 color: black;

}

</style> </head> <body>

Row Groups

<thead> </thead> <tfoot> </tfoot> <tbody> </tbody>
thead 2 3 4
tfoot 10 11 12
tbody 6 7 8

</body> </html> 

</source>


Table header and cell overflow hidden

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

   width: 200px;
   border: thin solid black;
   table-layout: fixed;

} th, td { 

   overflow: hidden;

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

       < -- 200 pixels -- >
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
records.
a a r
R T 1
B V 1
Q Q 1
M T 1
a a r 
   </body>

</html> 

</source>


table header background-color: #cccccc;

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

th { 

 height: 50px;
 font-weight: bold;
 text-align: left;
 background-color: #cccccc;

}

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


Table header column span

   <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> </head> <body> 

     General 

     Estimate

     Total population

     272,091

</body> </html> 

</source>


Table header font, background and padding

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

border-collapse: collapse;
width: 100%;
border: 1px solid #666;

} 

th { 
background: #888; 
padding: .5em 0 .5em 7px;
text-align: left;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
text-shadow: #ccc -2px 2px -2px;

} </style> </head> <body> 

  General Characteristics
E L U
T 272,091 **** ****
Sex
Male 1 1 1
Female 1 1 1

</body> </html> 

</source>


table header 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">

th { 

 height: 50px;
 font-weight: bold;
 text-align: left;
 background-color: #cccccc;

}

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


Table header format

   <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> HTML tables </title>
       <style type="text/css">
           table {
               width: 300px;
               caption-side: bottom;
               border: thin solid black;
               table-layout: fixed;
               border-spacing: 0;
               margin: 5px;
           }
           th, td {
               border: thin solid black;
               text-align: center;
               font-weight: bold;
               overflow: hidden;
           }
           th {
               background: lightgrey;
           }
           td {
               vertical-align: top;
           }
           caption {
               font-size: 90%;
               text-align: right;
           }
           td, th, caption {
               padding: 5px;
           }
       </style>        
   </head>
   <body>
<colgroup> <col id="movie" /> <col id="cast" /> <col id="genre" /> <col id="year" /> </colgroup> <thead> </thead> <tbody> </tbody>
Table
movie stars genre year
t F C 2
t F A 2
N C D 2 
   </body>

</html> 

</source>


table header height: 50px;

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

th { 

 height: 50px;
 font-weight: bold;
 text-align: left;
 background-color: #cccccc;

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


Table header style

   <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"> th { 

text-align: left;
padding: 1em 1.5em 0.1em 0.5em;
color: white;
background-color: blue;
border-right: 2px solid blue;

} .secondrow th { 

background-color: #009;

} </style> </head> <body> 

  Table 1. General Characteristics
Item 
   Estimate

   Lower Bound

   Upper Bound
Total population 272,091 **** ****
Sex
Male 129,179 127,670 131,908
Female 142,302 140,183 144,421

</body> </html> 

</source>


table header 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>Using the table header attribute</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 header 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">

th { 

 height: 50px;
 font-weight: bold;
 text-align: left;
 background-color: #cccccc;

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


Table header with border

   <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> HTML tables </title>
       <style type="text/css">
           table {
               width: 300px;
               caption-side: bottom;
               border: thin solid black;
               table-layout: fixed;
               border-spacing: 0;
               margin: 5px;
           }
           th, td {
               border: thin solid black;
               text-align: center;
               font-weight: bold;
               overflow: hidden;
           }
           th {
               background: lightgrey;
           }
           td {
               vertical-align: top;
           }
           caption {
               font-size: 90%;
               text-align: right;
           }
           td, th, caption {
               padding: 5px;
           }
       </style>        
   </head>
   <body>
<colgroup> <col id="movie" /> <col id="cast" /> <col id="genre" /> <col id="year" /> </colgroup> <thead> </thead> <tbody> </tbody>
My favorite movies.
movie stars genre year
B J C 2
T E A 2
T K A 2 
   </body>

</html> 

</source>


th background-color: gold;

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


th color: navy

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


thead is the first section of a table. It formats the table header area.

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

</html> 

</source>


Three row header

   <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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { 

 margin: 10px 40px;
 padding: 0;
 text-align: center;
 font-size: 62.5%;

}

  1. wrapper {
 text-align: left;
 border: 1px solid #033;
 position: relative;
 font-size: 1.4em;

}

  1. header {
 background: #033;
 color: #fff;
 height: 55px;
 position: relative;

}

  1. header h1,#header h2 {
 position: absolute;
 padding: 0;
 margin: 0;

}

  1. header h1 {
 top: 5px;
 left: 8px;
 height: 50px;

}

  1. header h2 {
 top: 20px;
 left: 193px;

}

  1. headerlinks {
 float: right;
 font-size: 0.8em;
 padding: 6px 6px 8px 10px;

}

  1. headerlinks a:link,#headerlinks a:visited,#headerlinks a:hover,#headerlinks a:active{
 color: #fff;

}

  1. headersearch form {
 padding: 0;
 margin: 0;

}

  1. headersearch {
 position: absolute;
 top: 2em;
 right: 5px;

}

  1. headersearch form input {
 padding: 0;
 margin: 0;
 vertical-align: middle;

}

  1. txtSearch {
 height: 17px;
 width: 115px;
 border: 1px solid black;

}

  1. tablinks {
 background: #336868;

}

  1. tablinks div {
 float: left;
 border-right: 1px solid #094747;

}

  1. tablinks a {
 display: block;
 padding: 5px 10px;

}

  1. tablinks a:link,#tablinks a:visited,#tablinks a:hover,#tablinks a:active
 {
 color: white;
 text-decoration: none;

}

  1. tablinks a.current {
 background: #047070;

}

  1. breadcrumb {
 background: #009f9f;
 color: #fff;
 padding: 5px 10px;

}

  1. breadcrumb a {
 color: #fff;

}

  1. breadcrumb ul,#breadcrumb li {
 display: inline;
 padding: 0;
 margin: 0;

}

  1. breadcrumb ul li {
 padding-left: 0;

}

  1. breadcrumb ul li ul li {
 padding-left: 14px;

} .clearfix:after { 

 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;

} .clearfix { 

 display: inline-table;

} </style> </head> <body id="cols3">

</body> </html> 

</source>


Two level of table header

   <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 Movies</title>
           <style type="text/css" media="all">
             table {
                 border-width: 1px;
                 width: 500px;
             }
             th {
                 background: #ddd;
                 color: white;
             }
             #footer {
                 background: #ccc;
                 color: white;
             }
          </style>
       </head>
       <body>

                       My Favorite Movies

                       Title

                       Actor/Actress

                       Genre
W R D
S K H
G B C 
     </body>
  </html>
</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_header&oldid=5093»