http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FTable_Style%2Ftable_row
HTML/CSS/Table Style/table row - История изменений
2026-04-04T22:15:56Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_row&diff=5076&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_row&diff=5077&oldid=prev
Admin: 1 версия
2010-05-26T08:16:22Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Alternating Row Background==<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 />
#ts td {<br />
background: white;<br />
} <br />
#t1 * .odd td {<br />
background: palegreen;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<tr class="r1 odd"> <td class="c1">r1 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r3 odd"> <td class="c1">r3 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r4"> <td class="c1">r4 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
<tr class="r5 odd"> <td class="c1">r5 c1</td> <td class="c2">c2</td> <br />
<td class="c3"> c3</td> <td class="c4">c4</td> </tr> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Alternating row colors==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version="1.0" ?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<title>Alternating row colors</title><br />
<style rel="stylesheet" type="text/css"><br />
th {<br />
font-weight: bold;<br />
text-align: left;<br />
background-color: #fff336;<br />
}<br />
td {<br />
padding: 3px;<br />
}<br />
.odd {<br />
background-color: #efefef;<br />
}<br />
.even {<br />
background-color: #ffffff;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h2>Alternating Row Colors</h2><br />
<table><br />
<tr><br />
<th>Item</th><br />
<th>Description</th><br />
<th>Cost</th><br />
<th>Subtotal</th><br />
</tr><br />
<tr class="even"><br />
<td>I</td><br />
<td>B</td><br />
<td>1</td><br />
<td>1</td><br />
</tr><br />
<tr class="odd"><br />
<td>B</td><br />
<td>B</td><br />
<td>.2</td><br />
<td>1</td><br />
</tr><br />
<tr class="even"><br />
<td>E</td><br />
<td>2</td><br />
<td>2</td><br />
<td>1</td><br />
</tr><br />
<tr class="odd"><br />
<td>P</td><br />
<td>1</td><br />
<td>1</td><br />
<td>2</td><br />
</tr><br />
<tr class="even"><br />
<td>V</td><br />
<td>5</td><br />
<td>2</td><br />
<td>2</td><br />
</tr><br />
<tr class="odd"><br />
<td>B</td><br />
<td>L</td><br />
<td>1</td><br />
<td>2</td><br />
</tr><br />
<tr class="even"><br />
<td>E</td><br />
<td>1</td><br />
<td>0</td><br />
<td>2</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Coloring Rows 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 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 />
<title></title><br />
<meta http-equiv="Content-Type"<br />
content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
.odd {<br />
background-color: lightgrey;<br />
}<br />
<br />
.even {<br />
background-color: yellow;<br />
}<br />
<br />
table {<br />
border: 1px solid black;<br />
border-spacing: 0;<br />
}<br />
<br />
td {<br />
padding: 4px 6px;<br />
border: 1px solid black;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr class="odd"><br />
<td> Row 1 Cell 1 </td><br />
<td> Row 1 Cell 2 </td><br />
<td> Row 1 Cell 3 </td><br />
</tr><br />
<tr class="even"><br />
<td> Row 2 Cell 1 </td><br />
<td> Row 2 Cell 2 </td><br />
<td> Row 2 Cell 3 </td><br />
</tr><br />
<tr class="odd"><br />
<td> Row 3 Cell 1 </td><br />
<td> Row 3 Cell 2 </td><br />
<td> Row 3 Cell 3 </td><br />
</tr><br />
<tr class="even"><br />
<td> Row 4 Cell 1 </td><br />
<td> Row 4 Cell 2 </td><br />
<td> Row 4 Cell 3 </td><br />
</tr><br />
<tr class="odd"><br />
<td> Row 5 Cell 1 </td><br />
<td> Row 5 Cell 2 </td><br />
<td> Row 5 Cell 3 </td><br />
</tr><br />
<tr class="even"><br />
<td> Row 6 Cell 1 </td><br />
<td> Row 6 Cell 2 </td><br />
<td> Row 6 Cell 3 </td><br />
</tr><br />
<tr class="odd"><br />
<td> Row 7 Cell 1 </td><br />
<td> Row 7 Cell 2 </td><br />
<td> Row 7 Cell 3 </td><br />
</tr><br />
</table><br />
</body><br />
</html> <br />
</source><br />
<br />
<br />
<br />
<br />
==Hiding row==<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 * .r2 {<br />
visibility: hidden;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table id="t1"> <br />
<br />
<tbody class="b1"> <br />
<tr class="r1"> <br />
<td class="c1">r1 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r1 c3</td> <br />
<td class="c4">4</td> <br />
</tr> <br />
<br />
<tr class="r2"> <br />
<td class="c1">r2 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r2 c3</td> <br />
<td class="c4">4</td> <br />
</tr><br />
</tbody> <br />
<br />
<tbody class="b2"> <br />
<tr class="r3"> <br />
<td class="c1">r3 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r3 c3</td> <br />
<td class="c4">4</td> <br />
</tr> <br />
<tr class="r4"> <br />
<td class="c1">r4 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r4 c3</td> <br />
<td class="c4">4</td> <br />
</tr><br />
</tbody> <br />
<br />
<tbody class="b3"> <br />
<tr class="r5"> <br />
<td class="c1">r5 c1</td> <br />
<td class="c2">2</td> <br />
<td class="c3">r5 c3</td> <br />
<td class="c4">4</td> <br />
</tr><br />
</tbody> <br />
</table> <br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Selecting cells in row==<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 * .r2 td {<br />
background-color: gold;<br />
color: black;<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 />
==Set different colors for even and odd table row==<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Untitled Document</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
td {<br />
background-color: #FFFFCC;<br />
}<br />
table {<br />
width:25%;<br />
border-collapse:collapse;<br />
}<br />
tr.grey td {<br />
background-color: #CCCCCC;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr> <br />
<td>Some text</td><br />
<td>Some more text</td><br />
<td>&nbsp;</td><br />
</tr><br />
<tr class="grey"> <br />
<td>Hello</td><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
</tr><br />
<tr> <br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
</tr><br />
<tr class="grey"> <br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
</tr><br />
<tr> <br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==stripe table with Javascript==<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" title="text/css"><br />
table {<br />
border-top: 1px solid #c9c9c9;<br />
border-left: 1px solid #c9c9c9;<br />
}<br />
caption {<br />
padding: 0 0 10px;<br />
font: bold 120% Arial, sans-serif;<br />
text-transform: uppercase;<br />
}<br />
th {<br />
background: red;<br />
text-align: left;<br />
padding: 2px 5px;<br />
font-weight: bold;<br />
border-bottom: 1px solid #666666;<br />
}<br />
th,td {<br />
border-right: 1px solid #c9c9c9;<br />
font: 80% Verdana, Arial, sans-serif;<br />
}<br />
tfoot {<br />
background-color: #666666;<br />
color: #dddddd;<br />
font-size: 80%;<br />
}<br />
table {<br />
border: 1px solid #666666;<br />
}<br />
tfoot td {<br />
border-bottom: 0;<br />
border-right: 0;<br />
}<br />
</style><br />
<script type="text/javascript"><br />
function hasClass(obj) {<br />
var result = false;<br />
if (obj.getAttributeNode("class") != null) {<br />
result = obj.getAttributeNode("class").value;<br />
}<br />
return result;<br />
} <br />
function stripe(id) {<br />
var even = false;<br />
var evenColor = "#fff";<br />
var oddColor = "#eee";<br />
<br />
var table = document.getElementById(id);<br />
<br />
var tbodies = table.getElementsByTagName("tbody");<br />
for (var j = 0; j < tbodies.length; j++) {<br />
var trs = tbodies[j].getElementsByTagName("tr");<br />
for (var i = 0; i < trs.length; i++) {<br />
if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {<br />
var tds = trs[i].getElementsByTagName("td");<br />
for (var j = 0; j < tds.length; j++) {<br />
var mytd = tds[j];<br />
if (! hasClass(mytd) && ! mytd.style.backgroundColor) {<br />
mytd.style.backgroundColor = even ? evenColor : oddColor;<br />
}<br />
}<br />
}<br />
even = ! even;<br />
}<br />
}<br />
}<br />
<br />
</script><br />
</head><br />
<body onload="stripe("playlist");"><br />
<table id="playlist" width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist"><br />
<caption><br />
A playlist of great music<br />
</caption><br />
<thead><br />
<tr><br />
<th>Song Name</th><br />
<th>Time</th><br />
<th>Artist</th><br />
<th>Album</th><br />
<th>Play Count</th><br />
</tr><br />
</thead><br />
<tfoot><br />
<tr><br />
<td colspan="5">Music selection</td><br />
</tr><br />
</tfoot><br />
<tbody><br />
<tr><td>A</td><td>2:35</td><td>A</td><td>A</td><td>7</td></tr><br />
<tr><td>B</td><td>2:35</td><td>B</td><td>B</td><td>7</td></tr><br />
<tr><td>C</td><td>2:35</td><td>C</td><td>C</td><td>7</td></tr><br />
<tr><td>D</td><td>2:35</td><td>D</td><td>D</td><td>7</td></tr> <br />
<tr><td>E</td><td>2:35</td><td>E</td><td>E</td><td>7</td></tr><br />
<tr><td>F</td><td>2:35</td><td>F</td><td>F</td><td>7</td></tr><br />
<tr><td>G</td><td>2:35</td><td>G</td><td>G</td><td>7</td></tr><br />
<tr><td>H</td><td>2:35</td><td>H</td><td>H</td><td>7</td></tr><br />
<tr><td>I</td><td>2:35</td><td>I</td><td>I</td><td>7</td></tr><br />
<tr><td>J</td><td>2:35</td><td>J</td><td>J</td><td>7</td></tr><br />
<tr><td>K</td><td>2:35</td><td>K</td><td>K</td><td>7</td></tr><br />
<tr><td>L</td><td>2:35</td><td>L</td><td>L</td><td>7</td></tr><br />
</tbody><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table row background==<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>tr 1</title><br />
<style><br />
tr { background: white; } <br />
tr.alt { background: yellow; }<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>O</td><br />
</tr><br />
<tr class="alt"><br />
<td>V</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>E</td><br />
<td>P</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table row hover==<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>tr 2</title><br />
<style><br />
tr { background: white; } <br />
tr.alt { background: yellow; }<br />
tr:hover {background: pink;}<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>O</td><br />
</tr><br />
<tr class="alt"><br />
<td>V</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>E</td><br />
<td>P</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==table row with class==<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 Backgrounds</title><br />
<style type="text/css"><br />
td, th {border-style: groove;}<br />
table {border-style: groove;border-collapse: collapse;}<br />
tr.hlRow td, th {background-color: #eee;}<br />
tr.regRow td {background-color: #fff;}<br />
</style><br />
</head><br />
<body><br />
<table summary="This table provides the pricing information for pizzas"><br />
<thead><br />
<tr class="hlRow"><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 class="regRow"><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 class="hlRow"><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 class="regRow"><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 style for even rows==<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 Transitional//EN" "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=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
body {<br />
font-size: 62.5%;<br />
margin: 5% 10% 20% 10%;<br />
}<br />
img {<br />
border: none;<br />
}<br />
img.prod {<br />
background: white; <br />
float: left;<br />
margin: 0 7px 7px 0;<br />
border: 2px solid #FFCC00;<br />
padding: 1px;<br />
}<br />
<br />
.dltprod {<br />
text-align: right;<br />
}<br />
.dltprod p {<br />
margin: 0;<br />
padding: 0;<br />
font-size: .9em;<br />
color: #333333;<br />
}<br />
<br />
td, th {<br />
padding: 0.1em 1em;<br />
border-right: 1px solid #666;<br />
}<br />
<br />
td {<br />
padding: 7px;<br />
}<br />
caption {<br />
padding: 1em;<br />
}<br />
#shoppingcartTable {<br />
border-collapse: collapse;<br />
width: 100%;<br />
border: 1px solid #666;<br />
}<br />
#shoppingcartTable th { <br />
background: #888 url(th_bkgd.jpg) repeat-x; <br />
font: italic 1.5em Georgia, "Times New Roman", Times, serif; <br />
padding: .5em 0 .5em 7px;<br />
text-align: left;<br />
border-top: 1px solid #666;<br />
border-bottom: 1px solid #666;<br />
text-shadow: #ccc -2px 2px -2px;<br />
<br />
}<br />
#shoppingcartTable td {<br />
vertical-align: top;<br />
}<br />
#shoppingcartTable input[type=text] {<br />
border: 1px solid black;<br />
}<br />
#shoppingcartTable .prodcell {<br />
width: 70%;<br />
}<br />
#shoppingcartTable .prodcell a {<br />
font-size: 1.2em;<br />
}<br />
#shoppingcartTable .prodtitle {<br />
text-overflow: ellipsis;<br />
overflow: hidden;<br />
padding: 2px 0;<br />
font-weight: bold;<br />
width: 35em;<br />
white-space: nowrap; <br />
}<br />
#shoppingcartTable #iteminfo {<br />
text-indent: -1000em;<br />
width: 5em;<br />
}<br />
.dltitem {<br />
margin-top: 1em;<br />
}<br />
tr {<br />
background: #eee; <br />
}<br />
tr.odd {<br />
background: #ccc; <br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<form method="get" action=""><br />
<table id="shoppingcartTable" summary="List of products."><br />
<caption>Shopping Cart Listing - <strong>Subtotal: $99.16</strong>; changed quantities? <input type="submit" value="Update price(s)" /> </caption><br />
<thead><br />
<tr><br />
<th id="iteminfo" scope="col">Item info</th><br />
<th scope="col">Product</th><br />
<th scope="col">Qty.</th><br />
<th scope="col">Price</th><br />
</tr><br />
</thead><br />
<tr><br />
<td class="dltprod"><br />
<p>Item added on March 22, 2008.</p><br />
<a href="" title="Delete this product">delete"</a><br />
</td><br />
<td class="prodcell"><br />
<img class="prod" alt="product image" src="u.jpg" /><br />
<div class="prodtitle"><a href="">this is a text</a></div><br />
<strong>U2</strong><br />
</td><br />
<td><br />
<input type="text" value="1" name="qty" size="2" /><br />
</td><br />
<td><br />
$9.66<br />
</td><br />
</tr><br />
<tr class="odd"><br />
<td class="dltprod"><br />
<p>Item added on March 22, 2006.</p><br />
<a href="" title="Delete this product">delete</a><br />
</td><br />
<td class="prodcell"><br />
<img class="prod" alt="product image" src="a.jpg" /><br />
<div class="prodtitle"><a href="">this is a text</a></div><strong>Apple</strong><br />
</td><br />
<td><input type="text" value="1" name="qty" size="2" /></td><br />
<td>$7.97</td><br />
</tr><br />
<tr><br />
<td class="dltprod"><br />
<p>Item added on March 22, 2006.</p><br />
<br />
<a href="" title="Delete this product">delete</a><br />
<br />
</td><br />
<td class="prodcell"><br />
<img class="prod" alt="product image" src="a.jpg" /><br />
<div class="prodtitle"><a href=""></a></div><strong>this is a text</strong><br />
</td><br />
<td><input type="text" value="1" name="qty" size="2" /></td><br />
<td>$9.66</td><br />
</tr><br />
<tr class="odd"><br />
<td class="dltprod"><br />
<p>Item added on March 22, 2006.</p><br />
<a href="" title="Delete this product">delete</a><br />
</td><br />
<td class="prodcell"><br />
<img class="prod" alt="product image" src="f.jpg" /><br />
<div class="prodtitle"><a href="">The Other Side</a></div><strong>this is a test. </strong><br />
</td><br />
<td><input type="text" value="1" name="qty" size="2" /></td><br />
<td>$15.98</td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table with subtotoal row==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<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 id="">Receipts</th><br />
<th id="">tax</th><br />
<th id="">Costs</th><br />
<th id="">Balance</th><br />
</tr><tr><br />
<td id="Q1">Quarter 1</td><td></td><td></td><td></td><td></td><br />
</tr><tr><br />
<th id="">Store A</th><br />
<td headers="">12,585</td><br />
<td headers="">2,202</td><br />
<td headers="">4,155</td><br />
<td headers="">6,228</td><br />
</tr><tr><br />
<th id="">Store B</th><br />
<td headers="">15,221</td><br />
<td headers="">2,663</td><br />
<td headers="">5,320</td><br />
<td headers="">7,238</td><br />
</tr><tr><br />
<th id="">Subtotal</th><br />
<td headers="">42,806</td><br />
<td headers="">4,865</td><br />
<td headers="">9,475</td><br />
<td headers="">13,466</td><br />
</tr><tr><br />
<td id="Q2">Quarter 2</td><td></td><td></td><td></td><td></td><br />
</tr><tr><br />
<th id="StoreAQ2">Store A</th><br />
<td headers="">14,682</td><br />
<td headers="">2,569</td><br />
<td headers="">4,650</td><br />
<td headers="">7,463</td><br />
</tr><tr><br />
<th id="">Store B</th><br />
<td headers="">21,166</td><br />
<td headers="">6,704</td><br />
<td headers="">6,240</td><br />
<td headers="">11,222</td><br />
</tr><tr><br />
<th id="">Subtotal</th><br />
<td headers="">35,848</td><br />
<td headers="">6,273</td><br />
<td headers="">10,890</td><br />
<td headers="">18,685</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source></div>
Admin