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 Left table border
- 11 Right table border
- 12 Separated Borders
- 13 Set table border
- 14 Set table right and bottom border to solid
- 15 table border-color: navy;
- 16 table border groove
- 17 table border-width: medium;
- 18 Top table border
- 19 using border-spacing to create space between cells in a table
- 20 Using the differing precedences of row, column and cell borders to style a table
Add border space to column
<!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>
<table>
<caption>
Table: My favorite 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>
Add border spacing
<!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>
<table>
<caption>
Table: My favorite 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>
Add border spacing for only top and bottom
<!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>
<table>
<caption>
My favorite 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>
border-collapse: collapse
<?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>
<table class="separate">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
<table class="collapsed">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
</body>
</html>
border-collapse: separate
<?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>
<table class="separate">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
<table class="collapsed">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
</body>
</html>
border-spacing: 0.5em
<!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>
<table class="spaced" cellspacing="0">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
<table cellspacing="0">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
</body>
</html>
Bottom table border
<!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>
<table id="t1">
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr>
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr>
</table>
</body>
</html>
Boxed Cells
<!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>
<table class="boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr>
</table>
</body>
</html>
Collapsed Borders
<!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>
<h2>Boxed Table and Cells</h2>
<table class="boxed-table boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</td> </tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr>
</table>
</body>
</html>
Left table border
<!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>
<table id="t1">
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr>
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr>
</table>
</body>
</html>
Right table border
<!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>
<table id="t1">
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr>
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr>
</table>
</body>
</html>
Separated Borders
<!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>
<h2>Boxed Table</h2>
<table class="boxed-table" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr>
</table>
</body>
</html>
Set table border
<!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>
Set table right and bottom border to solid
<!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>
<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>
<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>
<center>
<table>
<tr>
<td>CSS</td><td>IS</td>
</tr>
<tr>
<td>VERY</td><td>COOL!</td>
</tr>
</table>
</center>
</body>
</html>
table border groove
<?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>
<table summary="Prices for types">
<thead>
<tr>
<th scope="col">Pizza Type</th>
<th scope="col">Small</th>
<th scope="col">Medium</th>
<th scope="col">Large</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
</body>
</html>
table border-width: medium;
<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>
<center>
<table>
<tr>
<td>CSS</td><td>IS</td>
</tr>
<tr>
<td>VERY</td><td>COOL!</td>
</tr>
</table>
</center>
</body>
</html>
Top table border
<!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>
<table id="t1">
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr>
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr>
</table>
</body>
</html>
using border-spacing to create space between cells in a 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" 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>
<table class="nospace">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
<table class="space">
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
<tr>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor</td>
</tr>
</table>
</body>
</html>
Using the differing precedences of row, column and cell borders to style a 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" 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>
<table>
<colgroup>
<col id="col1"/>
<col />
</colgroup>
<colgroup>
<col />
<col />
<col />
</colgroup>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
<td>Lorem ipsum</td>
</tr>
</tbody>
</table>
</body>
</html>