http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FTable_Style%2Ftable_border
HTML/CSS/Table Style/table border - История изменений
2026-04-04T22:14:51Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_border&diff=5072&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_border&diff=5073&oldid=prev
Admin: 1 версия
2010-05-26T08:16:21Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add border space to column==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title> My favorite records </title><br />
<style rel="stylesheet" type="text/css"><br />
table {<br />
width: 100%;<br />
border: thin solid black;<br />
border-spacing: 15px 0;<br />
}<br />
td {<br />
border: thin solid black;<br />
}<br />
th, tfoot td {<br />
border: thin solid black;<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
tbody td {<br />
font-size: 120%;<br />
}<br />
caption {<br />
font-size: 90%;<br />
text-align: right;<br />
}<br />
td, th, caption {<br />
padding: 5px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<caption><br />
Table: My favorite records.<br />
</caption><br />
<colgroup><br />
<col/><br />
<col/><br />
<col/><br />
</colgroup><br />
<thead><br />
<tr><br />
<th> a</th><br />
<th> a</th><br />
<th> r</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td> R</td><br />
<td> T</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> B</td><br />
<td> V</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> Q</td><br />
<td> Q</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> M</td><br />
<td> T</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
</tbody><br />
<tfoot><br />
<tr><br />
<td> a</td><br />
<td> a</td><br />
<td> r</td><br />
</tr><br />
</tfoot><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Add border spacing==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title> My favorite records </title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 0;<br />
}<br />
table {<br />
width: 100%;<br />
border: thin solid black;<br />
border-spacing: 15px;<br />
}<br />
td {<br />
border: thin solid black;<br />
}<br />
th, tfoot td {<br />
border: thin solid black;<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
tbody td {<br />
font-size: 120%;<br />
}<br />
caption {<br />
font-size: 90%;<br />
text-align: right;<br />
}<br />
td, th, caption {<br />
padding: 5px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<caption><br />
Table: My favorite records.<br />
</caption><br />
<colgroup><br />
<col/><br />
<col/><br />
<col/><br />
</colgroup><br />
<thead><br />
<tr><br />
<th> a</th><br />
<th> a</th><br />
<th> r</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td> R</td><br />
<td> T</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> B</td><br />
<td> V</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> Q</td><br />
<td> Q</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> M</td><br />
<td> T</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
</tbody><br />
<tfoot><br />
<tr><br />
<td> a</td><br />
<td> a</td><br />
<td> r</td><br />
</tr><br />
</tfoot><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Add border spacing for only top and bottom==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title> My favorite records </title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
margin: 0;<br />
}<br />
table {<br />
width: 100%;<br />
border: thin solid black;<br />
border-spacing: 0 15px;<br />
}<br />
td {<br />
border: thin solid black;<br />
}<br />
th, tfoot td {<br />
border: thin solid black;<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
tbody td {<br />
font-size: 120%;<br />
}<br />
caption {<br />
font-size: 90%;<br />
text-align: right;<br />
}<br />
td, th, caption {<br />
padding: 5px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<caption><br />
My favorite records.<br />
</caption><br />
<colgroup><br />
<col/><br />
<col/><br />
<col/><br />
</colgroup><br />
<thead><br />
<tr><br />
<th> a</th><br />
<th> a</th><br />
<th> r</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td> R</td><br />
<td> T</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> B</td><br />
<td> V</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> Q</td><br />
<td> Q</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td> M</td><br />
<td> T</td><br />
<td> 1</td><br />
</tr><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
</tbody><br />
<tfoot><br />
<tr><br />
<td> a</td><br />
<td> a</td><br />
<td> r</td><br />
</tr><br />
</tfoot><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==border-collapse: collapse==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>The effects of switching to the collapsed table border model</title><br />
<style type="text/css" media="all"><br />
table {<br />
font: 1em/1.5em Georgia, serif;<br />
border: 1px solid black;<br />
margin: 1em;<br />
}<br />
td {<br />
width: 10em;<br />
vertical-align: baseline;<br />
padding: 0 0.5em;<br />
border: 1px dashed black;<br />
}<br />
table.collapsed {<br />
border-collapse: collapse;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table class="separate"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
<table class="collapsed"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==border-collapse: separate==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="utf-8"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>The effects of switching to the collapsed table border model</title><br />
<style type="text/css" media="all"><br />
table {<br />
font: 1em/1.5em Georgia, serif;<br />
border: 1px solid black;<br />
margin: 1em;<br />
}<br />
td {<br />
width: 10em;<br />
vertical-align: baseline;<br />
padding: 0 0.5em;<br />
border: 1px dashed black;<br />
}<br />
table.separate {<br />
border-collapse: separate;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table class="separate"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
<table class="collapsed"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==border-spacing: 0.5em==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Mimicking collapsed borders</title><br />
<style type="text/css" media="all"><br />
table {<br />
font: 1em/1.5em Georgia, serif;<br />
border-width: 1px;<br />
border-style: solid solid none none; <br />
border-color: black;<br />
margin: 1em;<br />
border-collapse: separated;<br />
border-spacing: 0;<br />
}<br />
td {<br />
vertical-align: baseline;<br />
padding: 0 0.5em;<br />
border-width: 1px;<br />
border-style: none none solid solid; <br />
border-color: black;<br />
}<br />
table.spaced {<br />
border-spacing: 0.5em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table class="spaced" cellspacing="0"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
<table cellspacing="0"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Bottom table border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: collapse;<br />
} <br />
#t1 * .r2 td {<br />
border-bottom: 2px solid black;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
<br />
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Boxed Cells==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: separate;<br />
}<br />
* .boxed-table {<br />
border: 1px solid black;<br />
}<br />
* .boxed-cells td {<br />
border: 1px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<table class="boxed-cells" cellspacing="5"> <br />
<tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> <br />
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr><br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Collapsed Borders==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: collapse;<br />
}<br />
* .boxed-table {<br />
border: 1px solid black;<br />
}<br />
* .boxed-cells td {<br />
border: 1px solid black;<br />
}<br />
* .boxed-cells td.x {<br />
border: none;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>Boxed Table and Cells</h2> <br />
<table class="boxed-table boxed-cells" cellspacing="0"> <br />
<tr><td rowspan="2">1</td><td colspan="2">2-3</td> </tr> <br />
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr><br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Left table border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: collapse;<br />
} <br />
<br />
#t1 * .c1 {<br />
border-left: 1px solid black;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
<br />
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Right table border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: collapse;<br />
} <br />
#t1 * .c2 {<br />
border-right: 2px solid black;<br />
}<br />
#t1 * .c1 {<br />
border-right: 1px dotted black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
<br />
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Separated Borders==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: separate;<br />
}<br />
* .boxed-table {<br />
border: 1px solid black;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<h2>Boxed Table</h2> <br />
<br />
<table class="boxed-table" cellspacing="5"> <br />
<tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> <br />
<tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr><br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set table border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title>Colgroup 2</title><br />
<style><br />
td, th {<br />
border: 1px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<caption>Personal details</caption><br />
<colgroup style="background-color: #ccc;"></colgroup><br />
<colgroup></colgroup><br />
<colgroup span="3"></colgroup><br />
<tr><br />
<th rowspan="2">Name</th><br />
<th rowspan="2">Place of residence</th><br />
<th colspan="3">Date of birth </th><br />
</tr><br />
<tr><br />
<th>dd</th><br />
<th>mm</th><br />
<th>yyyy</th><br />
</tr><br />
<tr><br />
<td>P</td><br />
<td>O</td><br />
<td>14</td><br />
<td>06</td><br />
<td>1978</td><br />
</tr><br />
<tr><br />
<td>V</td><br />
<td>B</td><br />
<td>12</td><br />
<td>01</td><br />
<td>1985</td><br />
</tr><br />
<tr><br />
<td>L</td><br />
<td>L</td><br />
<td>01</td><br />
<td>03</td><br />
<td>1956</td><br />
</tr><br />
<tr><br />
<td>E</td><br />
<td>P</td><br />
<td>28</td><br />
<td>02</td><br />
<td>1979</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set table right and bottom border to solid==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Chater 3 - Tables are Evil?</title><br />
<style type="text/css" media="screen"><br />
<br />
div {<br />
margin-bottom: 30px;<br />
}<br />
<br />
#divID th, #divID td {<br />
border-right: 1px solid #999;<br />
border-bottom: 1px solid #999;<br />
} <br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<div id="divID"><br />
<table summary="Summary goes here"><br />
<caption>This is the title of the table</caption><br />
<tr><br />
<th>Year</th><br />
<th>Opponent</th><br />
<th>Item 3</th><br />
</tr><br />
<tr><br />
<td>1918</td><br />
<td>Item A</td><br />
<td>75-51</td><br />
</tr><br />
<tr><br />
<td>1916</td><br />
<td>Item B</td><br />
<td>91-63</td><br />
</tr><br />
<tr><br />
<td>1915</td><br />
<td>Item C</td><br />
<td>101-50</td><br />
</tr><br />
<tr><br />
<td>1912</td><br />
<td>Item D</td><br />
<td>105-47</td><br />
</tr><br />
</table><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table border-color: navy;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html><br />
<head><title>Tables</title><br />
<style type="text/css"><br />
table {<br />
border-width: medium;<br />
border-color: navy;<br />
border-style: groove;<br />
}<br />
td {<br />
text-align: center;<br />
background-color: gold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<center><br />
<table><br />
<tr><br />
<td>CSS</td><td>IS</td><br />
</tr><br />
<tr><br />
<td>VERY</td><td>COOL!</td><br />
</tr><br />
</table><br />
</center><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table border groove==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version"1.0" encoding="UTF-8"?><br />
<!DOCTYPE html<br />
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Using CSS for Borders</title><br />
<style type="text/css"><br />
td, th {border-style: groove;}<br />
table {border-style: groove;}<br />
</style><br />
</head><br />
<body><br />
<table summary="Prices for types"><br />
<thead><br />
<tr><br />
<th scope="col">Pizza Type</th><br />
<th scope="col">Small</th><br />
<th scope="col">Medium</th><br />
<th scope="col">Large</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td scope="row">Thin Crust</td><br />
<td>3.99</td><br />
<td>4.99</td><br />
<td>6.99</td><br />
</tr><br />
<tr><br />
<td scope="row">Deep Dish</td><br />
<td>4.99</td><br />
<td>6.99</td><br />
<td>8.99</td><br />
</tr><br />
<tr><br />
<td scope="row">Stuffed Crust</td><br />
<td>5.99</td><br />
<td>7.99</td><br />
<td>9.99</td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table border-width: medium;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<html><br />
<head><title>Tables</title><br />
<style type="text/css"><br />
table {<br />
border-width: medium;<br />
border-color: navy;<br />
border-style: groove;<br />
}<br />
td {<br />
text-align: center;<br />
background-color: gold;<br />
}<br />
</style><br />
</head><br />
<body><br />
<center><br />
<table><br />
<tr><br />
<td>CSS</td><td>IS</td><br />
</tr><br />
<tr><br />
<td>VERY</td><td>COOL!</td><br />
</tr><br />
</table><br />
</center><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Top table border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="Screen"><br />
table {<br />
border-collapse: collapse;<br />
} <br />
#t1 * .r1 td {<br />
border-top: 1px solid black;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<tr class="r1"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
<br />
<tr class="r2"> <td class="c1">1</td> <td class="c2">2</td> </tr> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==using border-spacing to create space between cells in a table==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>using border-spacing to create space between cells in a table</title><br />
<style type="text/css" media="all"><br />
table {<br />
font: 1em/1.5em Georgia, serif;<br />
border: 1px solid black;<br />
margin: 1em;<br />
border-collapse: separate;<br />
}<br />
td {<br />
width: 9em;<br />
vertical-align: baseline;<br />
padding: 0 0.5em;<br />
border: 1px dashed black;<br />
}<br />
table.nospace {<br />
border-spacing: 0;<br />
}<br />
table.space {<br />
border-spacing: 0.5em;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table class="nospace"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
<table class="space"><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
<td>Lorem ipsum dolor</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Using the differing precedences of row, column and cell borders to style a table==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Using the differing precedences of row, column and cell borders to style a table</title><br />
<style type="text/css" media="all"><br />
table {<br />
font: 1em/1.5em Georgia, serif;<br />
border-style: none hidden;<br />
margin: 1em 0 0 0;<br />
border-collapse: collapse;<br />
}<br />
td {<br />
width: 6em;<br />
vertical-align: baseline;<br />
padding: 0 0.5em;<br />
border: 1px dashed black;<br />
}<br />
tbody {<br />
border: 2px solid black;<br />
}<br />
tr {<br />
border: 1px solid black;<br />
}<br />
colgroup {<br />
border: 4px solid black;<br />
border-style: none solid;<br />
}<br />
col#col1 {<br />
border-color: black;<br />
border-width: 1px;<br />
border-style: none solid;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<colgroup><br />
<col id="col1"/><br />
<col /><br />
</colgroup><br />
<colgroup><br />
<col /><br />
<col /><br />
<col /><br />
</colgroup><br />
<tbody><br />
<tr><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
</tr><br />
</tbody><br />
<tbody><br />
<tr><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
</tr><br />
<tr><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
<td>Lorem ipsum</td><br />
</tr><br />
</tbody><br />
</table><br />
</body><br />
</html><br />
</source></div>
Admin