http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FTable_Style%2Ftable_cell
HTML/CSS/Table Style/table cell - История изменений
2026-04-04T15:57:13Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_cell&diff=5100&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_cell&diff=5101&oldid=prev
Admin: 1 версия
2010-05-26T08:16:26Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Boxed Table and Cells==<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 />
* .boxed-cells td {<br />
border: 1px solid black;<br />
}<br />
<br />
* .boxed-cells td.x {<br />
border: none;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<h2></h2> <br />
<table class="boxed-table 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 />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Cell padding==<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-collapse: collapse;<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></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 />
==Cell with no Border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" encoding="iso-8859-1"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Table Example</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
body {<br />
font-family: arial, verdana, sans-serif;<br />
}<br />
td {<br />
border: solid 1px black;<br />
width: 100px;<br />
empty-cells: hide;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr><br />
<td></td><br />
<th>Race 1</th><br />
<th>Race 2</th><br />
<th>Race 3</th><br />
</tr><br />
<tr><br />
<th>Driver A</th><br />
<td>33s</td><br />
<td>50s</td><br />
<td>45s</td><br />
</tr><br />
<tr><br />
<th>Driver B</th><br />
<td>56s</td><br />
<td>23s</td><br />
<td>11s</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Empty table header cell==<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 xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title>Scope 1</title><br />
</head><br />
<body><br />
<table border="1"><br />
<tr><br />
<td rowspan="2"></td><br />
<th colspan="2">Staff</th><br />
<th rowspan="2">Managers</th><br />
</tr><br />
<tr><br />
<th>Short</th><br />
<th>Tall</th><br />
</tr><br />
<tr><br />
<th>Bitbyte</th><br />
<td>11</td><br />
<td>9</td><br />
<td>1</td><br />
</tr><br />
<tr><br />
<th>UltraHyperMegaCorp</th><br />
<td>2100</td><br />
<td>900</td><br />
<td>1000</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Hidden, Removed Cells and 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,td,th {<br />
border: 1px solid black;<br />
}<br />
* .collapsed {<br />
border-collapse: collapse;<br />
}<br />
* .x {<br />
display: none;<br />
}<br />
* .h {<br />
visibility: hidden;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<table class="collapsed" cellspacing="0"> <br />
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <br />
<tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr><br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Hidden, Removed Cells and 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,td,th {<br />
border: 1px solid black;<br />
}<br />
* .separated {<br />
border-collapse: separate;<br />
}<br />
* .x {<br />
display: none;<br />
}<br />
* .h {<br />
visibility: hidden;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<table class="separated" cellspacing="5"> <br />
<br />
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <br />
<tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr><br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Hide empty cell==<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 xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title>Empty cells 1</title><br />
<style><br />
table {<br />
empty-cells: hide;<br />
}<br />
td, th {<br />
border: 1px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr><br />
<td rowspan="2"></td><br />
<th colspan="2" id="">S</th><br />
<th rowspan="2" id="">M</th><br />
</tr><br />
<tr><br />
<th id="">S</th><br />
<th id="">T</th><br />
</tr><br />
<tr><br />
<th id="">B</th><br />
<td headers="">11</td><br />
<td headers="">9</td><br />
<td headers="">1</td><br />
</tr><br />
<tr><br />
<th id="">U</th><br />
<td headers="">2100</td><br />
<td headers="">900</td><br />
<td headers="">1000</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Line break in a table cell==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<HTML><br />
<HEAD><br />
<TITLE></TITLE><br />
</HEAD><br />
<BODY><br />
<TABLE BORDER=1 WIDTH=500><br />
<TR><br />
<TD><br />
this is a test. <BR><br />
this is a test. <BR><br />
this is a test. <BR><br />
this is a test. <BR><br />
</TD><br />
</TR><br />
</TABLE><br />
</BODY><br />
</HTML><br />
</source><br />
<br />
<br />
<br />
<br />
==Right-offset Shrinkwrapped 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"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
.parent {<br />
width: 600px;<br />
height: 600px;<br />
background: black;<br />
}<br />
* .r-wrap {<br />
width: auto;<br />
margin-left: auto;<br />
margin-right: 20px;<br />
background: pink;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div class="parent"> <br />
<table class="r-wrap"><tr><td>Right-offset Shrinkwrapped Table</td></tr></table> <br />
</div> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Selecting cells in body==<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 />
#t1 tbody td {<br />
font-variant: small-caps;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<thead> <br />
<tr class="r1"> <br />
<td class="c1">c1</td> <br />
<td class="c2">c2</td> <br />
<td class="c3">c3</td> <br />
<td class="c4">c4</td> <br />
<td class="c5">c5</td> <br />
<td class="c6">c6</td> <br />
</tr><br />
</thead> <br />
<tfoot> <br />
<tr class="r3"> <br />
<td class="c1">c1</td> <br />
<td class="c2">c2</td> <br />
<td class="c3">c3</td> <br />
<td class="c4">c4</td> <br />
<td class="c5">c5</td> <br />
<td class="c6">c6</td> <br />
</tr><br />
</tfoot> <br />
<tbody class="b1"> <br />
<tr class="r2"> <br />
<td class="c1">r2 c1</td> <br />
<td class="c2">c2</td> <br />
<td class="c3">c3</td> <br />
<td class="c4">c4</td> <br />
<td class="c5">c5</td> <br />
<td class="c6">c6</td> <br />
</tr><br />
</tbody> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Shading border for table cell==<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 />
div {<br />
padding: 10px;<br />
margin-bottom: 15px;<br />
border: 2px solid black;<br />
}<br />
td {<br />
margin-top: 0px;<br />
margin-bottom: 10px;<br />
padding-right: 5px;<br />
background-color: gold;<br />
padding-top: 5px;<br />
padding-bottom: 5px;<br />
border-left: 1px solid gray;<br />
border-right: 2px solid black;<br />
border-top: 1px solid gray;<br />
border-bottom: 2px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div> <br />
<table><br />
<tr><td>Normal Table</td><td>r1c2</td><td>r1c3</td></tr> <br />
<tr><td>row2</td><td>r2c2</td><td>r2c3</td></tr><br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table cell background and align, indent==<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 />
width: auto;<br />
height: 1px;<br />
table-layout: auto;<br />
border-collapse: collapse;<br />
margin-left: 20px;<br />
border: 1px solid black;<br />
}<br />
td,th {<br />
width: 50px;<br />
height: 1px;<br />
overflow: hidden;<br />
visibility: visible;<br />
border: 1px solid black;<br />
padding: 5px;<br />
background: pink;<br />
text-align: center;<br />
vertical-align: middle;<br />
text-indent: 5px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>Simple Table</h2> <br />
<table> <br />
<tr> <th>1</th> <th>2</th> <th>3</th> <th>4 </th> <th>5 </th> <th>6 </th> </tr> <br />
<tr> <th>7</th> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table cell border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
table {<br />
border-collapse: collapse;<br />
border: 5px solid #444;<br />
}<br />
td {<br />
padding: 4px;<br />
}<br />
th {<br />
color: white;<br />
background-color: black;<br />
}<br />
td, th+th {<br />
border: 5px solid #666;<br />
}<br />
<br />
td+td {<br />
border: 5px solid #ccc;<br />
text-align: center;<br />
}<br />
td#winner {<br />
border: 7px dotted #999;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<table cellspacing="0"><br />
<tbody><br />
<tr><br />
<th colspan="4"><br />
General<br />
</th><br />
</tr><br />
<tr><br />
<th>&nbsp;</th><br />
<th>E</th><br />
<th>L</th><br />
<th>U</th><br />
</tr><br />
<tr><br />
<td><br />
Total <br />
</td><br />
<td><br />
272,091<br />
</td><br />
<td><br />
*****<br />
</td><br />
<td><br />
*****<br />
</td><br />
</tr><br />
<tr><br />
<td colspan="4"><br />
Sex<br />
</td><br />
</tr><br />
<tr><br />
<td width="329">Male</td><br />
<td>2</td><br />
<td>3</td><br />
<td>6</td><br />
</tr><br />
<tr><br />
<td width="329">Female</td><br />
<td id="winner">6</td><br />
<td>4</td><br />
<td>1</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table cell hover==<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>tr 2</title><br />
<style><br />
tr { background: white; } <br />
tr.alt { background: yellow; }<br />
tr:hover {background: pink;}<br />
td:hover {background:red;}<br />
</style><br />
</head><br />
<body><br />
<table border="1"><br />
<tr><br />
<th>Name</th><br />
<th>Place of residence</th><br />
</tr><br />
<tr><br />
<td>P</td><br />
<td>P</td><br />
</tr><br />
<tr class="alt"><br />
<td>B</td><br />
<td>B</td><br />
</tr><br />
<tr><br />
<td>L</td><br />
<td>L</td><br />
</tr><br />
<tr class="alt"><br />
<td>P</td><br />
<td>P</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table cell hover with class==<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></title><br />
<style rel="stylesheet" type="text/css"><br />
body {<br />
padding: 10px;<br />
margin: 10px auto;<br />
min-width: 500px;<br />
max-width: 900px;<br />
}<br />
table.myStyle {<br />
width: 100%;<br />
margin-bottom: 5px;<br />
}<br />
caption {<br />
text-align: left;<br />
margin-bottom: 5px;<br />
text-transform: lowercase;<br />
font-size: 160%;<br />
padding: 5px;<br />
letter-spacing: 10px;<br />
font-weight: bold;<br />
}<br />
table.myStyle thead th {<br />
font-weight: bold;<br />
font-size: 150%;<br />
color: black;<br />
}<br />
table.myStyle thead th, table.myStyle tbody td {<br />
padding: 5px;<br />
text-transform: lowercase;<br />
}<br />
table.myStyle tbody td, table.myStyle tfoot td {<br />
font-size: 130%;<br />
}<br />
table.myStyle tfoot td {<br />
padding: 5px;<br />
}<br />
table.myStyle tbody td:hover,<br />
table.myStyle thead th:hover,<br />
table.myStyle tfoot td ul:hover,<br />
table.myStyle caption:hover,<br />
table.myStyle tfoot td p:hover {<br />
background: black;<br />
color: white;<br />
font-weight: bold;<br />
}<br />
table.myStyle tfoot td p {<br />
padding: 5px; <br />
}<br />
li {<br />
margin-left: 30px;<br />
padding-left: 30px;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table class="myStyle"><br />
<caption><br />
S<br />
</caption><br />
<colgroup><br />
<col/><br />
<col/><br />
<col/><br />
<col/><br />
</colgroup><br />
<thead><br />
<tr><br />
<th> quantity </th><br />
<th> measurement </th><br />
<th> product </th><br />
<th> instructions </th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td> .5 </td><br />
<td> C</td><br />
<td> B</td><br />
<td> </td><br />
</tr><br />
</tbody><br />
<tfoot><br />
<tr><br />
<td colspan="4"><br />
<ul><br />
<li><br />
P<br />
</li><br />
</ul><br />
<p><br />
S <br />
</p><br />
</td><br />
</tr><br />
</tfoot><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table cell overflow hidden==<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: 200px;<br />
border: thin solid black;<br />
table-layout: fixed;<br />
}<br />
th, td {<br />
overflow: hidden;<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 />
<div style="width: 200px;<br />
height: 30px;<br />
background: gray;<br />
color: white;<br />
text-align: center;"><br />
&lt; -- 200 pixels -- &gt;<br />
</div><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></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 />
==Table cell vertical-align: baseline==<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></title><br />
<style type="text/css"><br />
table {<br />
font: 16px sans-serif;<br />
border: 1px solid black;<br />
}<br />
td {<br />
border: 1px solid black;<br />
width: 125px;<br />
}<br />
td#largefont {<br />
font-size: 60px;<br />
vertical-align: baseline;<br />
}<br />
td.baseline {<br />
vertical-align: baseline;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr><br />
<td class="baseline" id="largefont"><br />
L<br />
</td><br />
<td class="baseline"><br />
The contents of this cell <br />
are aligned to the baseline.<br />
</td><br />
</tr> <br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table with Spanned Rows and 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 />
width: auto;<br />
height: 1px;<br />
table-layout: auto;<br />
border-collapse: collapse;<br />
margin-left: 20px;<br />
border: 1px solid black;<br />
}<br />
td,th {<br />
width: 50px;<br />
height: 1px;<br />
overflow: hidden;<br />
visibility: visible;<br />
border: 1px solid black;<br />
padding: 5px;<br />
background: pink;<br />
text-align: center;<br />
vertical-align: middle;<br />
text-indent: 5px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>Table with Spanned Rows and Cells</h2> <br />
<table> <br />
<tr> <td rowspan="2">1</td> <td colspan="2">2-3</td> </tr> <br />
<tr> <td>8</td> <td>9</td> <td> </td> <td>&nbsp;</td> <td>12</td> </tr> <br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==td background-color: gold;==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><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 />
==td font-weight: bold;==<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 />
td {<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
table {<br />
background-color: blue;<br />
color: white;<br />
}<br />
caption {<br />
background-color: red;<br />
color: yellow;<br />
font-weight: bold;<br />
}<br />
th {<br />
background-color: gold;<br />
color: navy<br />
}<br />
td.center {<br />
background-color: white;<br />
color: black;<br />
}<br />
</style></head><br />
<body><br />
<table><br />
<caption>How to Use Tables</caption><br />
<tr><br />
<th>Col 1</th><br />
<th>Col 2</th><br />
<th>Col 3</th><br />
</tr><br />
<tr><br />
<td>X</td><br />
<td>X</td><br />
<td>X</td><br />
</tr><br />
<tr><br />
<td>X</td><br />
<td class="center">X</td><br />
<td>X</td><br />
</tr><br />
<tr><br />
<td>X</td><br />
<td>X</td><br />
<td>X</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==td text-align: center;==<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 />
td {<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
table {<br />
background-color: blue;<br />
color: white;<br />
}<br />
caption {<br />
background-color: red;<br />
color: yellow;<br />
font-weight: bold;<br />
}<br />
th {<br />
background-color: gold;<br />
color: navy<br />
}<br />
td.center {<br />
background-color: white;<br />
color: black;<br />
}<br />
</style></head><br />
<body><br />
<table><br />
<caption>How to Use Tables</caption><br />
<tr><br />
<th>Col 1</th><br />
<th>Col 2</th><br />
<th>Col 3</th><br />
</tr><br />
<tr><br />
<td>X</td><br />
<td>X</td><br />
<td>X</td><br />
</tr><br />
<tr><br />
<td>X</td><br />
<td class="center">X</td><br />
<td>X</td><br />
</tr><br />
<tr><br />
<td>X</td><br />
<td>X</td><br />
<td>X</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==td text-align: center; and border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><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 />
==Text Indent==<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 />
* .myStyle {<br />
text-indent: 60px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr><br />
<td class="myStyle"><code>text-indent</code> <br />
indents the first line of a terminal block element<br />
</td><br />
</tr><br />
</table> <br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==tr and td==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><title>Tables</title></head><br />
<body><br />
<table><br />
<tr> <td>X</td> <td>X</td> <td>X</td> </tr><br />
<tr> <td>X</td> <td>X</td> <td>X</td> </tr><br />
<tr> <td>X</td> <td>X</td> <td>X</td> </tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==use table cell as block==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<style type="text/css" media="all"><br />
table {<br />
margin: auto;<br />
}<br />
td {<br />
background: #ccc;<br />
margin: 10%;<br />
border: 5px solid black;<br />
padding: 10%;<br />
width: 100%;<br />
color: black;<br />
font-size: 200%;<br />
text-align: center;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr><br />
<td><br />
Some content.<br />
</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertically aligned to the bottom of the cell==<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 />
* .align-bottom {<br />
height: 200px;<br />
vertical-align: bottom;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table> <br />
<tr> <br />
<td class="align-bottom">vertically aligned to the bottom of the cell.</td><br />
</tr><br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==vertically aligned to the middle of the cell==<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 />
* .align-middle {<br />
height: 200px;<br />
vertical-align: middle;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table> <br />
<tr> <br />
<td class="align-middle">vertically aligned to the middle of the cell.</td> <br />
</tr><br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Vertically aligned to the top of the cell==<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 />
* .align-top {<br />
height: 200px;<br />
vertical-align: top;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<table> <br />
<tr> <br />
<td class="align-top" >vertically aligned to the top of the cell.</td> <br />
</tr><br />
</table> <br />
</body><br />
</html><br />
</source></div>
Admin