HTML/CSS/Table Style/table footer
Содержание
<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;
} 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>
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| R | T | 1 |
| B | V | 1 |
| Q | Q | 1 |
| M | T | 1 |
| Column 1 | Column 2 | Column 3 |
</body>
</html>
</source>
<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;
} col#album {
background: lightgrey;
} col#artist {
width: 250px;
} col#released {
width: 100px; background: lightgrey;
}
</style> </head> <body>
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| R | T | 1 |
| E | V | 1 |
| Q | Q | 1 |
| S | P | 1 |
| Column 1 | Column 2 | Column 3 |
</body>
</html>
</source>
Selecting cells in foot
<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">
- t1 tfoot td {
font-style: italic;
} </style> </head> <body>
| c1 | c2 | c3 | c4 | c5 | c6 |
| c1 | c2 | c3 | c4 | c5 | c6 |
| r2 c1 | c2 | c3 | c4 | c5 | c6 |
</body> </html>
</source>
<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 tfoot {
background: red; color: white;
} </style> </head> <body>
Row Groups
| thead | 2 | 3 | 4 |
|---|---|---|---|
| tfoot | 10 | 11 | 12 |
| tbody | 6 | 7 | 8 |
</body> </html>
</source>
<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 {
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;
} tfoot {
background-color: #666666; color: #dddddd; font-size: 80%;
} table {
border: 1px solid #666666;
} tfoot td {
border-bottom: 0; border-right: 0;
} </style> </head> <body>
| S | T | A | A | P |
|---|---|---|---|---|
| Music | ||||
| A | 2:35 | A | A | 7 |
| B | 2:35 | B | B | 7 |
| C | 2:35 | C | C | 7 |
| D | 2:35 | D | D | 7 |
| E | 2:35 | E | E | 7 |
| F | 2:35 | F | F | 7 |
| G | 2:35 | G | G | 7 |
| H | 2:35 | H | H | 7 |
| I | 2:35 | I | I | 7 |
| J | 2:35 | J | J | 7 |
| K | 2:35 | K | K | 7 |
| L | 2:35 | L | L | 7 |
</body> </html>
</source>
<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; caption-side: bottom;
} 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>
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| A | T | 1 |
| C | V | 1 |
| S | Q | 1 |
| I | P | 1 |
| Column 1 | Column 2 | Column 3 |
</body>
</html>
</source>
table header foot
<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 an alternate way to create a table</title> </head> <body>
| P | S | M | L |
|---|---|---|---|
| # Pieces | 8 | 12 | 16 |
| 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>
<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>
| Apple | $0.25 |
| Orange | $0.50 |
| Banana | $1.00 |
| Pineapple | $2.00 |
| Total | $3.75 |
|---|
</body>
</html>
</source>
