HTML/CSS/Table Style/table header — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 08:16, 26 мая 2010
Содержание
- 1 Add background for table header
- 2 Add background image for table header
- 3 Add different background images for each table column header
- 4 Add padding for table header and table cell
- 5 Background for table header row
- 6 Basic table with th tag
- 7 Grouped table header
- 8 Nested table header
- 9 Selecting cells in head
- 10 Set table border for table header
- 11 Set table header border to be 1px solid black, its width to 6em
- 12 Style for table header
- 13 Table header and cell overflow hidden
- 14 table header background-color: #cccccc;
- 15 Table header column span
- 16 Table header font, background and padding
- 17 table header font-weight: bold;
- 18 Table header format
- 19 table header height: 50px;
- 20 Table header style
- 21 table header tag
- 22 table header text-align: left;
- 23 Table header with border
- 24 th background-color: gold;
- 25 th color: navy
- 26 thead is the first section of a table. It formats the table header area.
- 27 Three row header
- 28 Two level of table header
Add background for table header
<!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>
<div id="divID">
<table summary="Summary goes here">
<caption>This is the title of the table</caption>
<tr>
<th>Year</th>
<th>Opponent</th>
<th>Item 3</th>
</tr>
<tr>
<td>1918</td>
<td>Item A</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Item B</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Item C</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>Item D</td>
<td>105-47</td>
</tr>
</table>
</div>
</body>
</html>
Add background image for table header
<!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>
<div id="divID">
<table summary="Summary goes here">
<caption>This is the title of the table</caption>
<tr>
<th>Year</th>
<th>Opponent</th>
<th>Item 3</th>
</tr>
<tr>
<td>1918</td>
<td>Item A</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Item B</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Item C</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>Item D</td>
<td>105-47</td>
</tr>
</table>
</div>
</body>
</html>
Add different background images for each table column header
<!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>
<div id="divID">
<table summary="Summary goes here">
<caption>This is the title of the table</caption>
<tr>
<th id="year">Year</th>
<th id="opponent">Opponent</th>
<th id="record">Season Record (W-L)</th>
</tr>
<tr>
<td>1918</td>
<td>Item A</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Item B</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Item C</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>Item D</td>
<td>105-47</td>
</tr>
</table>
</div>
</body>
</html>
Add padding for table header and table cell
<!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>
<div id="divID">
<table summary="Summary goes here">
<caption>This is the title of the table</caption>
<tr>
<th>Year</th>
<th>Opponent</th>
<th>Item 3</th>
</tr>
<tr>
<td>1918</td>
<td>Item A</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Item B</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Item C</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>Item D</td>
<td>105-47</td>
</tr>
</table>
</div>
</body>
</html>
Background for table header row
<!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>
<table width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist">
<caption>
A playlist of great music
</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>
Basic table with th tag
<!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>
<table border="1">
<tr>
<th>N</th>
<th>P</th>
</tr>
<tr>
<td>P</td>
<td>O</td>
</tr>
<tr>
<td>V</td>
<td>B</td>
</tr>
<tr>
<td>L</td>
<td>L</td>
</tr>
<tr>
<td>E</td>
<td>P</td>
</tr>
</table>
</body>
</html>
Grouped table header
<!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>
<table>
<tr>
<th colspan="3">
My Favorite Movies
</th>
</tr>
<tr>
<th>
Title
</th>
<th>
Actor/Actress
</th>
<th>
Genre
</th>
</tr>
<tr>
<td>W</td>
<td>R</td>
<td>D</td>
</tr>
<tr>
<td>S</td>
<td>K</td>
<td>H</td>
</tr>
<tr>
<td>G</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
Nested table header
<!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>
<table>
<caption>Personal details</caption>
<colgroup style="background-color: #ccc;"></colgroup>
<colgroup></colgroup>
<colgroup span="3"></colgroup>
<tr>
<th rowspan="2">Name</th>
<th rowspan="2">Place of residence</th>
<th colspan="3">Date of birth </th>
</tr>
<tr>
<th>dd</th>
<th>mm</th>
<th>yyyy</th>
</tr>
<tr>
<td>P</td>
<td>O</td>
<td>14</td>
<td>06</td>
<td>1978</td>
</tr>
<tr>
<td>V</td>
<td>B</td>
<td>12</td>
<td>01</td>
<td>1985</td>
</tr>
<tr>
<td>L</td>
<td>L</td>
<td>01</td>
<td>03</td>
<td>1956</td>
</tr>
<tr>
<td>E</td>
<td>P</td>
<td>28</td>
<td>02</td>
<td>1979</td>
</tr>
</table>
</body>
</html>
Selecting cells in head
<!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 thead td {
font-weight: bold;
}
</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>
Set table border for table header
<!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>
<div id="divID">
<table summary="Summary goes here">
<caption>This is the title of the table</caption>
<tr>
<th>Year</th>
<th>Opponent</th>
<th>Item 3</th>
</tr>
<tr>
<td>1918</td>
<td>Item A</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>Item B</td>
<td>91-63</td>
</tr>
<tr>
<td>1915</td>
<td>Item C</td>
<td>101-50</td>
</tr>
<tr>
<td>1912</td>
<td>Item D</td>
<td>105-47</td>
</tr>
</table>
</div>
</body>
</html>
Set table header border to be 1px solid black, its width to 6em
<!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">
<table cellspacing="0">
<caption>
Summary of Financial Data
</caption>
<tr>
<th scope="col">F</th>
<th scope="col">W</th>
<th scope="col">P</th>
<th scope="col">N</th>
</tr>
<tr>
<th scope="row">2003</th>
<td><input type="text" name="w2003" /></td>
<td><input type="text" name="p2003" /></td>
<td><input type="text" name="n2003" /></td>
</tr>
<tr>
<th scope="row">2004</th>
<td><input type="text" name="w2004" /></td>
<td><input type="text" name="p2004" /></td>
<td><input type="text" name="n2004" /></td>
</tr>
</table>
<input type="submit" class="save" value="Save" />
</form>
</body>
</html>
Style for table header
<!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>
<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>
<!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>
<div style="width: 200px;
height: 30px;
background: gray;
color: white;
text-align: center;">
< -- 200 pixels -- >
</div>
<table>
<caption>
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> 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>a</td>
<td>a</td>
<td>r</td>
</tr>
</tfoot>
</table>
</body>
</html>
table header background-color: #cccccc;
<?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>
<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>
Table header column span
<!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>
<table cellspacing="15">
<tr>
<th colspan="2">
General
</th>
</tr>
<tr>
<th>
</th>
<th>
Estimate
</th>
</tr>
<tr>
<td>
Total population
</td>
<td>
272,091
</td>
</tr>
</table>
</body>
</html>
Table header font, background and padding
<!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>
<table>
<tr>
<th colspan="4">
General Characteristics
</th>
</tr>
<tr class="secondrow">
<th></th>
<th>E</th>
<th>L</th>
<th>U</th>
</tr>
<tr>
<td>T</td>
<td>272,091</td>
<td>****</td>
<td>****</td>
</tr>
<tr>
<td colspan="4">Sex</td>
</tr>
<tr>
<td>Male</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Female</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
table header 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">
th {
height: 50px;
font-weight: bold;
text-align: left;
background-color: #cccccc;
}
</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>
Table header format
<!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>
<table>
<caption>
Table
</caption>
<colgroup>
<col id="movie" />
<col id="cast" />
<col id="genre" />
<col id="year" />
</colgroup>
<thead>
<tr>
<th> movie </th>
<th> stars </th>
<th> genre </th>
<th> year </th>
</tr>
</thead>
<tbody>
<tr>
<td> t</td>
<td> F</td>
<td> C</td>
<td> 2</td>
</tr>
<tr>
<td> t</td>
<td> F</td>
<td> A</td>
<td> 2</td>
</tr>
<tr>
<td> N</td>
<td> C</td>
<td> D</td>
<td> 2</td>
</tr>
</tbody>
</table>
</body>
</html>
table header height: 50px;
<?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>
<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>
Table header style
<!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>
<tr>
<th colspan="4">
Table 1. General Characteristics
</th>
</tr>
<tr class="secondrow">
<th>Item
</th>
<th>
Estimate
</th>
<th>
Lower Bound
</th>
<th>
Upper Bound
</th>
</tr>
<tr>
<td>Total population</td>
<td>272,091</td>
<td>****</td>
<td>****</td>
</tr>
<tr>
<td colspan="4">Sex</td>
</tr>
<tr>
<td>Male</td>
<td>129,179</td>
<td>127,670</td>
<td>131,908</td>
</tr>
<tr>
<td>Female</td>
<td>142,302</td>
<td>140,183</td>
<td>144,421</td>
</tr>
</table>
</body>
</html>
table header 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>Using the table header attribute</title>
</head>
<body>
<table border="1" summary="Prices for types">
<caption>Our Pizza Selections</caption>
<tr>
<th scope="col">Pizza Type</th>
<th scope="col">Small</th>
<th scope="col">Medium</th>
<th scope="col">Large</th>
</tr>
<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>
</table>
</body>
</html>
table header 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">
th {
height: 50px;
font-weight: bold;
text-align: left;
background-color: #cccccc;
}
</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>
Table header with border
<!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>
<table>
<caption>
My favorite movies.
</caption>
<colgroup>
<col id="movie" />
<col id="cast" />
<col id="genre" />
<col id="year" />
</colgroup>
<thead>
<tr>
<th> movie </th>
<th> stars </th>
<th> genre </th>
<th> year </th>
</tr>
</thead>
<tbody>
<tr>
<td> B</td>
<td> J</td>
<td> C</td>
<td> 2</td>
</tr>
<tr>
<td> T</td>
<td> E</td>
<td> A</td>
<td> 2</td>
</tr>
<tr>
<td> T</td>
<td> K</td>
<td> A</td>
<td> 2</td>
</tr>
</tbody>
</table>
</body>
</html>
th background-color: gold;
<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>
<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>
thead is the first section of a table. It formats the table header area.
<?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">
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<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>
Three row header
<!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%;
}
#wrapper {
text-align: left;
border: 1px solid #033;
position: relative;
font-size: 1.4em;
}
#header {
background: #033;
color: #fff;
height: 55px;
position: relative;
}
#header h1,#header h2 {
position: absolute;
padding: 0;
margin: 0;
}
#header h1 {
top: 5px;
left: 8px;
height: 50px;
}
#header h2 {
top: 20px;
left: 193px;
}
#headerlinks {
float: right;
font-size: 0.8em;
padding: 6px 6px 8px 10px;
}
#headerlinks a:link,#headerlinks a:visited,#headerlinks a:hover,#headerlinks a:active{
color: #fff;
}
#headersearch form {
padding: 0;
margin: 0;
}
#headersearch {
position: absolute;
top: 2em;
right: 5px;
}
#headersearch form input {
padding: 0;
margin: 0;
vertical-align: middle;
}
#txtSearch {
height: 17px;
width: 115px;
border: 1px solid black;
}
#tablinks {
background: #336868;
}
#tablinks div {
float: left;
border-right: 1px solid #094747;
}
#tablinks a {
display: block;
padding: 5px 10px;
}
#tablinks a:link,#tablinks a:visited,#tablinks a:hover,#tablinks a:active
{
color: white;
text-decoration: none;
}
#tablinks a.current {
background: #047070;
}
#breadcrumb {
background: #009f9f;
color: #fff;
padding: 5px 10px;
}
#breadcrumb a {
color: #fff;
}
#breadcrumb ul,#breadcrumb li {
display: inline;
padding: 0;
margin: 0;
}
#breadcrumb ul li {
padding-left: 0;
}
#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">
<div id="wrapper">
<div id="header">
<h1>header 1</h1>
<h2>header 2</h2>
<div id="headerlinks">
<a href="">Contact Us</a> |
<a href="">Site Map</a> |
<a href="">Store Locator</a></div>
<div id="headersearch">
<form>
<input type="text" name="txtSearch" id="txtSearch" />
<input type="image" src="searchbutton.gif" alt="Search" /></form></div>
</div>
<div id="tablinks" class="clearfix">
<div><a href="">Home</a></div>
<div><a href="" class="current">Travel</a></div>
<div><a href="">Flights</a></div>
<div><a href="">Hotels</a></div>
<div><a href="">Late Deals</a></div>
</div>
<div id="breadcrumb">
<ul>
<li><a href="">A</a>
<ul>
<li><a href="">B</a>
<ul>
<li>C</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Two level of table header
<!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>
<table>
<tr>
<th colspan="3">
My Favorite Movies
</th>
</tr>
<tr>
<th>
Title
</th>
<th>
Actor/Actress
</th>
<th>
Genre
</th>
</tr>
<tr>
<td>W</td>
<td>R</td>
<td>D</td>
</tr>
<tr>
<td>S</td>
<td>K</td>
<td>H</td>
</tr>
<tr>
<td>G</td>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>