HTML/CSS/Table Style/table — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Версия 09:21, 26 мая 2010
Содержание
- 1 A simple XHTML table
- 2 A table with auto width only expands enough to accomodate its content
- 3 basic table
- 4 Basic table with tr, td
- 5 Calendar table
- 6 Fixed table first column
- 7 Make table font bold
- 8 Set table border to collapse, 1px solid black
- 9 Set table width, margin and text align
- 10 Table background
- 11 table background-color: #efefef;
- 12 Table body font size
- 13 table border-color: #999999;
- 14 table border-style: solid;
- 15 table border-width: 1px;
- 16 table font-family: arial, verdana, sans-serif;
- 17 Table inline style
- 18 table tag opens a table
- 19 Table width 200px
- 20 table width: 350px;
A simple XHTML table
<?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>
<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>
<tfoot>
<tr>
<th>Total</th>
<th>$3.75</th>
</tr>
</tfoot>
</table>
</body>
</html>
A table with auto width only expands enough to accomodate its content
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> table with auto width </title>
<style type="text/css" media="all">
table {
width: auto;
border: thin solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>
A table with auto width only expands enough to accomodate its content.
</td>
</tr>
</table>
</body>
</html>
basic table
<?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</title>
</head>
<body>
<table border="1" summary="Prices for types of pizza by size">
<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 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>
Basic table with tr, td
<!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 1</title>
</head>
<body>
<table border="1">
<tr>
<td>N</td>
<td>P</td>
</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>
Calendar table
<!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=utf-8" />
<title></title>
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
#year {
font-family: monospace;
font-size: 1.5em;
padding: 0;
margin: 0;
}
#month {
font-family: monospace;
font-size: 2em;
padding: 0;
margin: 0;
}
#days {
background-color: #00B3FF;
color: white;
font-family: monospace;
width: 75px;
}
.date {
border-right: 1px solid black;
border-bottom: 1px solid black;
font-family: monospace;
text-decoration: none;
float: left;
width: 1.5em;
height: 1.5em;
background-color: white;
text-align: center;
}
.addevent {
display: block;
float: left;
width: 1em;
height: 1em;
text-align: center;
background-color: #666;
color: white;
font-weight: bold;
text-decoration: none;
}
.event {
padding-left: 1em;
padding-bottom: .75em;
}
td {
width: 14%;
background-color: #ccc;
border: 1px solid white;
vertical-align: top;
}
.weekend {
background-color: #999;
}
.emptydate {
border-right: 1px solid #666;
border-bottom: 1px solid #666;
font-family: monospace;
float: left;
width: 1.5em;
height: 1.5em;
}
#today {
border: 2px solid black;
}
</style>
</head>
<body>
<table cellspacing="0">
<tr><th colspan="7" id="year"><a href=""><</a> 2000 <a href="">></a></th></tr>
<tr><th colspan="7" id="month"><a href=""><</a> October <a href="">></a></th></tr>
<tr id="days">
<th>Sunday</th><th>Monday</th><th>Tuesday</th><th>Wednesday</th><th>Thursday</th><th>Friday</th><th>Saturday</th>
</tr>
<tr>
<td class="weekend">
<div>
<a href="1.html" class="date">1</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="2.html" class="date">2</a> <a href="add.html" class="addevent">+</a>
</div><a href="" class="event">Event 1</a>
</td>
<td>
<div>
<a href="3.html" class="date">3</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="4.html" class="date">4</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td>
<div>
<a href="5.html" class="date">5</a> <a href="add.html" class="addevent">+</a>
</div><a href="" class="event">Event 2</a>
</td>
<td>
<div>
<a href="6.html" class="date">6</a> <a href="add.html" class="addevent">+</a>
</div>
</td>
<td class="weekend">
<div>
<a href="7.html" class="date">7</a> <a href="add.html" class="addevent">+</a>
</div><a href="" class="event">Event 4</a>
</td>
</tr>
<tr>
<td class="weekend">
<div>
<a href="29.html" class="date">29</a> <a href="add.html" class="addevent">+</a>
</div>
<div class="event">Event 5</div>
</td>
<td>
<div>
<a href="30.html" class="date">30</a> <a href="add.html" class="addevent">+</a>
</div><a href="" class="event">Event 6</a>
</td>
<td>
<div>
<a href="31.html" class="date">31</a> <a href="add.html" class="addevent">+</a>
</div><a href="" class="event">Event 7</a> <a href="31.html?id=2" class="event">Event 8</a>
</td>
<td>
<div class="emptydate">
</div>
</td>
<td>
<div class="emptydate">
</div>
</td>
<td>
<div class="emptydate">
</div>
</td>
<td class="weekend">
<div class="emptydate">
</div>
</td>
</tr>
</table>
</body>
</html>
Fixed table first column
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {margin:0;padding:0}
#container {width:605px}
table#name {
width:100px;
background:#ffffcc;
float:left;
}
table#data {
background:#ffffcc;
width:900px;
}
td {
border:1px solid red;
}
#data td {width:100px;}
#wrap{
width:500px;
overflow:auto;
overflow-y:hidden;
border-right:1px solid red;
float:left;
}
.bottom {background:#ccc}
</style>
</head>
<body>
<div id="container">
<table id="name" cellspacing="0" cellpadding="0">
<tr><td> </td></tr>
<tr><td>A</td></tr>
<tr><td>A</td></tr>
<tr><td>A</td></tr>
<tr>
<td class="bottom"> </td>
</tr>
</table>
<div id="wrap">
<table id="data" cellspacing="0" cellpadding="0">
<tr>
<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td><td>G</td><td>H</td><td>I</td>
</tr>
<tr>
<td>1</td><td>3</td><td>5</td><td>1</td><td>1</td><td>3</td><td>1</td><td>5</td><td>7</td>
</tr>
<tr>
<td>2</td><td>4</td><td>6</td><td>1</td><td>2</td><td>4</td><td>1</td><td>6</td><td>6</td>
</tr>
<tr>
<td>2</td><td>4</td><td>6</td><td>1</td><td>2</td><td>4</td><td>1</td><td>6</td><td>6</td>
</tr>
<tr>
<td class="bottom" colspan="9"> </td>
</tr>
</table>
</div>
</div>
</body>
</html>
Make table font bold
<!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: 100%;
border: thin solid black;
border-collapse: collapse;
}
td {
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 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>
Set table border to collapse, 1px solid black
<!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;
border: 1px solid black;
}
</style>
</head>
<body>
<form method="get" name="copresentations">
<table cellspacing="0">
<caption>
Summary of Financial Data
</caption>
<tr>
<th scope="col">Fiscal Year </th>
<th scope="col">Worksite<br />
Presentations </th>
<th scope="col">Passing Grades </th>
<th scope="col">Number of Presentators </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>
Set table width, margin and text align
<!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">
.center {
text-align: center;
}
.center table {
width: 50%;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body>
<h2 id="warning">Lorem ipsum dolor sit amet</h2>
<div class="center">
<table width="50%" border="1" cellpadding="30">
<tr>
<td>This is the first cell</td>
<td>This is the second cell</td>
</tr>
<tr>
<td>This is the third cell, it"s under the first cell</td>
<td>This is the fourth cell, it"s under the second cell.</td>
</tr>
</table>
</div>
</body>
</html>
Table background
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
table {
width: 90%;
margin: 0 auto;
font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
font-size: .9em;
line-height: 1.4em;
border-collapse: collapse;
}
caption {
caption-side: bottom;
line-height: 4em;
font-family: Georgia, "Times New Roman", serif;
font-size: .85em;
font-style: italic;
}
tr {
border-bottom: 1px solid #999;
}
tr.odd {
background-color: #dfdfdf;
}
th {
text-align: left;
background-color: #666;
color: #fff;
font-weight: normal;
border: 1px solid #666;
padding: 0 .5em;
}
td {
color: #333;
border-left: 1px solid #999;
border-right: 1px solid #999;
padding: 0 .5em;
}
</style>
</head>
<body>
<table summary="">
<caption>editors</caption>
<colgroup>
<col class="odd" id="name" />
<col id="affiliation" />
<col class="odd" id="url" />
<col id="role" />
</colgroup>
<thead>
<tr>
<th scope="col">N</th>
<th scope="col">A</th>
<th scope="col" abbr="URL">W</th>
<th scope="col">R</th>
</tr>
</thead>
<tbody id="authors">
<tr class="odd">
<td scope="row">J</td>
<td>W</td>
<td>h</td>
<td>A</td>
</tr>
<tr>
<td scope="row">I</td>
<td>A</td>
<td>h</td>
<td>A</td>
</tr>
<tr class="odd">
<td scope="row">D</td>
<td>W</td>
<td>h/</td>
<td>A</td>
</tr>
</tbody>
<tbody id="editors">
<tr>
<td scope="row">C</td>
<td>A</td>
<td>h</td>
<td>E</td>
</tr>
<tr class="odd">
<td scope="row">W</td>
<td>A</td>
<td>h</td>
<td>T</td>
</tr>
</tbody>
</table>
</body>
</html>
table background-color: #efefef;
<?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">
table {
background-color: #efefef;
width: 350px;
border-style: solid;
border-width: 1px;
border-color: #999999;
font-family: arial, verdana, sans-serif;
}
</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 body font size
<!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;
}
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>
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>
table border-color: #999999;
<?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">
table {
background-color: #efefef;
width: 350px;
border-style: solid;
border-width: 1px;
border-color: #999999;
font-family: arial, verdana, sans-serif;
}
</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 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">
table {
background-color: #efefef;
width: 350px;
border-style: solid;
border-width: 1px;
border-color: #999999;
font-family: arial, verdana, sans-serif;
}
</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 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">
table {
background-color: #efefef;
width: 350px;
border-style: solid;
border-width: 1px;
border-color: #999999;
font-family: arial, verdana, sans-serif;
}
</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 font-family: arial, verdana, sans-serif;
<?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">
table {
background-color: #efefef;
width: 350px;
border-style: solid;
border-width: 1px;
border-color: #999999;
font-family: arial, verdana, sans-serif;
}
</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 inline style
<html>
<head><title>Tables</title></head>
<body>
<table border="10"
style="background-color: aqua; border-color: red blue gold teal;">
<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 tag opens a table
<?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">
<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>
Table width 200px
<!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, 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>
Table: My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> a</th>
<th> a</th>
<th> a</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> a</td>
</tr>
</tfoot>
</table>
</body>
</html>
table width: 350px;
<?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">
table {
background-color: #efefef;
width: 350px;
border-style: solid;
border-width: 1px;
border-color: #999999;
font-family: arial, verdana, sans-serif;
}
</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>