HTML/CSS/Table Style/table
Содержание
- 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 Lorem ipsum dolor sit amet
- 11 Table background
- 12 table background-color: #efefef;
- 13 Table body font size
- 14 table border-color: #999999;
- 15 table border-style: solid;
- 16 table border-width: 1px;
- 17 table font-family: arial, verdana, sans-serif;
- 18 Table inline style
- 19 table tag opens a table
- 20 Table width 200px
- 21 table width: 350px;
A simple XHTML table
<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>
Fruit | Price |
---|---|
Apple | $0.25 |
Orange | $0.50 |
Banana | $1.00 |
Pineapple | $2.00 |
Total | $3.75 |
</body>
</html>
</source>
A table with auto width only expands enough to accomodate its content
<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> table with auto width </title> <style type="text/css" media="all"> table { width: auto; border: thin solid black; } </style> </head> <body>
A table with auto width only expands enough to accomodate its content. |
</body>
</html>
</source>
basic table
<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</title> </head> <body>
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>
Basic table with tr, td
<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 1</title> </head> <body>
N | P |
P | O |
V | B |
L | L |
E | P |
</body> </html>
</source>
Calendar table
<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=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>
<a href=""><</a> 2000 <a href="">></a> | ||||||
---|---|---|---|---|---|---|
<a href=""><</a> October <a href="">></a> | ||||||
Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday |
<a href="1.html" class="date">1</a> <a href="add.html" class="addevent">+</a> |
<a href="2.html" class="date">2</a> <a href="add.html" class="addevent">+</a> |
<a href="3.html" class="date">3</a> <a href="add.html" class="addevent">+</a> |
<a href="4.html" class="date">4</a> <a href="add.html" class="addevent">+</a> |
<a href="5.html" class="date">5</a> <a href="add.html" class="addevent">+</a> |
<a href="6.html" class="date">6</a> <a href="add.html" class="addevent">+</a> |
<a href="7.html" class="date">7</a> <a href="add.html" class="addevent">+</a> |
<a href="29.html" class="date">29</a> <a href="add.html" class="addevent">+</a> Event 5
|
<a href="30.html" class="date">30</a> <a href="add.html" class="addevent">+</a> |
<a href="31.html" class="date">31</a> <a href="add.html" class="addevent">+</a> |
|
|
|
|
</body> </html>
</source>
Fixed table first column
<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> <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>
A |
A |
A |
A | B | C | D | E | F | G | H | I |
1 | 3 | 5 | 1 | 1 | 3 | 1 | 5 | 7 |
2 | 4 | 6 | 1 | 2 | 4 | 1 | 6 | 6 |
2 | 4 | 6 | 1 | 2 | 4 | 1 | 6 | 6 |
</body> </html>
</source>
Make table font bold
<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: 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>
album | artist | released |
---|---|---|
R | T | 1 |
B | V | 1 |
Q | Q | 1 |
M | T | 1 |
album | artist | released |
</body>
</html>
</source>
Set table border to collapse, 1px solid black
<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; border: 1px solid black;
} </style> </head> <body>
<form method="get" name="copresentations">
Fiscal Year | Worksite Presentations |
Passing Grades | Number of Presentators |
---|---|---|---|
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>
Set table width, margin and text align
<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"> .center {
text-align: center;
} .center table {
width: 50%; margin: 0 auto; text-align: left;
} </style> </head> <body>
Lorem ipsum dolor sit amet
This is the first cell | This is the second cell |
This is the third cell, it"s under the first cell | This is the fourth cell, it"s under the second cell. |
</body> </html>
</source>
Table background
<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" 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>
N | A | W | R |
---|---|---|---|
J | W | h | A |
I | A | h | A |
D | W | h/ | A |
C | A | h | E |
W | A | h | T |
</body> </html>
</source>
table background-color: #efefef;
<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">
table {
background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;
}
</style> </head> <body>
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 body font size
<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;
} 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 -- >
album | artist | released |
---|---|---|
R | T | 1 |
B | V | 1 |
Q | Q | 1 |
M | T | 1 |
album | artist | released |
</body>
</html>
</source>
table border-color: #999999;
<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">
table {
background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;
}
</style> </head> <body>
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 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">
table {
background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;
}
</style> </head> <body>
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 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">
table {
background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;
}
</style> </head> <body>
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 font-family: arial, verdana, sans-serif;
<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">
table {
background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;
}
</style> </head> <body>
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 inline style
<source lang="html4strict">
<html> <head><title>Tables</title></head> <body>
X | X | X |
X | X | X |
X | X | X |
</body> </html>
</source>
table tag opens a table
<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 |
</body>
</html>
</source>
Table width 200px
<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, 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 -- >
a | a | a |
---|---|---|
R | T | 1 |
B | V | 1 |
Q | Q | 1 |
M | T | 1 |
a | a | a |
</body>
</html>
</source>
table width: 350px;
<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">
table {
background-color: #efefef; width: 350px; border-style: solid; border-width: 1px; border-color: #999999; font-family: arial, verdana, sans-serif;
}
</style> </head> <body>
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>