HTML/CSS/Table Style/table border
Содержание
- 1 Add border space to column
- 2 Add border spacing
- 3 Add border spacing for only top and bottom
- 4 border-collapse: collapse
- 5 border-collapse: separate
- 6 border-spacing: 0.5em
- 7 Bottom table border
- 8 Boxed Cells
- 9 Collapsed Borders
- 10 Boxed Table and Cells
- 11 Left table border
- 12 Right table border
- 13 Separated Borders
- 14 Boxed Table
- 15 Set table border
- 16 Set table right and bottom border to solid
- 17 table border-color: navy;
- 18 table border groove
- 19 table border-width: medium;
- 20 Top table border
- 21 using border-spacing to create space between cells in a table
- 22 Using the differing precedences of row, column and cell borders to style a table
Add border space to column
<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; border-spacing: 15px 0;
} 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>
a | a | r |
---|---|---|
R | T | 1 |
B | V | 1 |
Q | Q | 1 |
M | T | 1 |
a | a | r |
</body>
</html>
</source>
Add border spacing
<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-spacing: 15px;
} 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>
a | a | r |
---|---|---|
R | T | 1 |
B | V | 1 |
Q | Q | 1 |
M | T | 1 |
a | a | r |
</body>
</html>
</source>
Add border spacing for only top and bottom
<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-spacing: 0 15px;
} 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>
a | a | r |
---|---|---|
R | T | 1 |
B | V | 1 |
Q | Q | 1 |
M | T | 1 |
a | a | r |
</body>
</html>
</source>
border-collapse: collapse
<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" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>The effects of switching to the collapsed table border model</title> <style type="text/css" media="all"> table { font: 1em/1.5em Georgia, serif; border: 1px solid black; margin: 1em; } td { width: 10em; vertical-align: baseline; padding: 0 0.5em; border: 1px dashed black; } table.collapsed { border-collapse: collapse; } </style>
</head> <body>
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
</body> </html>
</source>
border-collapse: separate
<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" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>The effects of switching to the collapsed table border model</title> <style type="text/css" media="all"> table { font: 1em/1.5em Georgia, serif; border: 1px solid black; margin: 1em; } td { width: 10em; vertical-align: baseline; padding: 0 0.5em; border: 1px dashed black; } table.separate { border-collapse: separate; } </style>
</head> <body>
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
</body> </html>
</source>
border-spacing: 0.5em
<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>Mimicking collapsed borders</title> <style type="text/css" media="all"> table { font: 1em/1.5em Georgia, serif; border-width: 1px; border-style: solid solid none none; border-color: black; margin: 1em; border-collapse: separated; border-spacing: 0; } td { vertical-align: baseline; padding: 0 0.5em; border-width: 1px; border-style: none none solid solid; border-color: black; } table.spaced { border-spacing: 0.5em; } </style>
</head> <body>
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
</body> </html>
</source>
Bottom table border
<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 {
border-collapse: collapse;
}
- t1 * .r2 td {
border-bottom: 2px solid black;
}
</style> </head> <body>
1 | 2 |
1 | 2 |
</body> </html>
</source>
Boxed Cells
<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 {
border-collapse: separate;
}
- .boxed-table {
border: 1px solid black;
}
- .boxed-cells td {
border: 1px solid black;
} </style> </head> <body>
1 | 2-3 | |||
7 | 8 | 11 |
</body> </html>
</source>
Collapsed Borders
<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 {
border-collapse: collapse;
}
- .boxed-table {
border: 1px solid black;
}
- .boxed-cells td {
border: 1px solid black;
}
- .boxed-cells td.x {
border: none;
} </style> </head> <body>
Boxed Table and Cells
1 | 2-3 | |||
7 | 8 | 11 |
</body> </html>
</source>
Left table border
<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 {
border-collapse: collapse;
}
- t1 * .c1 {
border-left: 1px solid black;
}
</style> </head> <body>
1 | 2 |
1 | 2 |
</body> </html>
</source>
Right table border
<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 {
border-collapse: collapse;
}
- t1 * .c2 {
border-right: 2px solid black;
}
- t1 * .c1 {
border-right: 1px dotted black;
} </style> </head> <body>
1 | 2 |
1 | 2 |
</body> </html>
</source>
Separated Borders
<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 {
border-collapse: separate;
}
- .boxed-table {
border: 1px solid black;
}
</style> </head> <body>
Boxed Table
1 | 2-3 | |||
7 | 8 | 11 |
</body> </html>
</source>
Set table 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 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>
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>
Set table right and bottom border to solid
<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 th, #divID td { border-right: 1px solid #999; border-bottom: 1px solid #999; } </style>
</head> <body>
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>
<source lang="html4strict">
<html>
<head><title>Tables</title>
<style type="text/css">
table {
border-width: medium; border-color: navy; border-style: groove;
} td {
text-align: center; background-color: gold;
} </style> </head> <body>
CSS | IS |
VERY | COOL! |
</body> </html>
</source>
table border groove
<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 CSS for Borders</title> <style type="text/css"> td, th {border-style: groove;} table {border-style: groove;} </style> </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>
table border-width: medium;
<source lang="html4strict">
<html>
<head><title>Tables</title>
<style type="text/css">
table {
border-width: medium; border-color: navy; border-style: groove;
} td {
text-align: center; background-color: gold;
} </style> </head> <body>
CSS | IS |
VERY | COOL! |
</body> </html>
</source>
Top table border
<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 {
border-collapse: collapse;
}
- t1 * .r1 td {
border-top: 1px solid black;
}
</style> </head> <body>
1 | 2 |
1 | 2 |
</body> </html>
</source>
using border-spacing to create space between cells in a 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" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>using border-spacing to create space between cells in a table</title> <style type="text/css" media="all"> table { font: 1em/1.5em Georgia, serif; border: 1px solid black; margin: 1em; border-collapse: separate; } td { width: 9em; vertical-align: baseline; padding: 0 0.5em; border: 1px dashed black; } table.nospace { border-spacing: 0; } table.space { border-spacing: 0.5em; } </style>
</head> <body>
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
Lorem ipsum dolor | Lorem ipsum dolor | Lorem ipsum dolor |
</body> </html>
</source>
Using the differing precedences of row, column and cell borders to style a 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" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Using the differing precedences of row, column and cell borders to style a table</title> <style type="text/css" media="all"> table { font: 1em/1.5em Georgia, serif; border-style: none hidden; margin: 1em 0 0 0; border-collapse: collapse; } td { width: 6em; vertical-align: baseline; padding: 0 0.5em; border: 1px dashed black; } tbody { border: 2px solid black; } tr { border: 1px solid black; } colgroup { border: 4px solid black; border-style: none solid; } col#col1 { border-color: black; border-width: 1px; border-style: none solid; } </style>
</head> <body>
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum | Lorem ipsum |
</body> </html>
</source>