HTML/CSS/Table Style/table row

Материал из Web эксперт
Перейти к: навигация, поиск

Alternating Row Background

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  1. ts td {
 background: white;

}

  1. t1 * .odd td {
 background: palegreen;

} </style> </head> <body>

r1 c1 c2 c3 c4
r2 c1 c2 c3 c4
r3 c1 c2 c3 c4
r4 c1 c2 c3 c4
r5 c1 c2 c3 c4

</body> </html> 

</source>


Alternating row colors

   <source lang="html4strict">

<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionalt//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> 

 <title>Alternating row colors</title>
 <style rel="stylesheet" type="text/css">

th { 

 font-weight: bold;
 text-align: left;
 background-color: #fff336;

} td { 

 padding: 3px;

} .odd { 

 background-color: #efefef;

} .even { 

 background-color: #ffffff;

} </style> </head> <body>

Alternating Row Colors

Item Description Cost Subtotal
I B 1 1
B B .2 1
E 2 2 1
P 1 1 2
V 5 2 2
B L 1 2
E 1 0 2

</body> </html> 

</source>


Coloring Rows in a Table

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

 <title></title>
 <meta http-equiv="Content-Type"
   content="text/html; charset=iso-8859-1" />
 <style type="text/css">
 .odd {
   background-color: lightgrey;
 }
 
 .even {
   background-color: yellow;
 }
 
 table {
   border: 1px solid black;
   border-spacing: 0;
 }
 
 td {
   padding: 4px 6px;
   border: 1px solid black;
 }
 </style>

</head> <body>

Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 1 Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1 Row 3 Cell 2 Row 3 Cell 3
Row 4 Cell 1 Row 4 Cell 2 Row 4 Cell 3
Row 5 Cell 1 Row 5 Cell 2 Row 5 Cell 3
Row 6 Cell 1 Row 6 Cell 2 Row 6 Cell 3
Row 7 Cell 1 Row 7 Cell 2 Row 7 Cell 3

</body> </html> 

</source>


Hiding row

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  1. t1 * .r2 {
 visibility: hidden;

} </style> </head> <body>

<tbody class="b1"> </tbody> <tbody class="b2"> </tbody> <tbody class="b3"> </tbody>
r1 c1 2 r1 c3 4
r2 c1 2 r2 c3 4
r3 c1 2 r3 c3 4
r4 c1 2 r4 c3 4
r5 c1 2 r5 c3 4

</body> </html> 

</source>


Selecting cells in row

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>

<style type="text/css" media="Screen">

  1. t1 * .r2 td {
 background-color: gold;
 color: black;

} </style> </head> <body>

<thead> </thead> <tfoot> </tfoot> <tbody class="b1"> </tbody>
c1 c2 c3 c4 c5 c6
c1 c2 c3 c4 c5 c6
r2 c1 c2 c3 c4 c5 c6

</body> </html> 

</source>


Set different colors for even and odd table row

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> td { 

 background-color: #FFFFCC;

} table { 

 width:25%;
 border-collapse:collapse;

} tr.grey td { 

 background-color: #CCCCCC;

} </style> </head> <body>

Some text Some more text  
Hello    
     
     
     

</body> </html> 

</source>


stripe table with Javascript

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head> 

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title></title>
   <style type="text/css" title="text/css">

table { 

 border-top: 1px solid #c9c9c9;
 border-left: 1px solid #c9c9c9;

} caption { 

 padding: 0 0 10px;
 font: bold 120% Arial, sans-serif;
 text-transform: uppercase;

} th { 

 background: red;
 text-align: left;
 padding: 2px 5px;
 font-weight: bold;
 border-bottom: 1px solid #666666;

} th,td { 

 border-right: 1px solid #c9c9c9;
 font: 80% Verdana, Arial, sans-serif;

} tfoot { 

 background-color: #666666;
 color: #dddddd;
 font-size: 80%;

} table { 

 border: 1px solid #666666;

} tfoot td { 

 border-bottom: 0;
 border-right: 0;

} </style> 

   <script type="text/javascript">
 function hasClass(obj) {
    var result = false;
    if (obj.getAttributeNode("class") != null) {
        result = obj.getAttributeNode("class").value;
    }
    return result;
 }   
function stripe(id) {
   var even = false;
   var evenColor = "#fff";
   var oddColor = "#eee";
 
   var table = document.getElementById(id);
  
   var tbodies = table.getElementsByTagName("tbody");
   for (var j = 0; j < tbodies.length; j++) {
     var trs = tbodies[j].getElementsByTagName("tr");
     for (var i = 0; i < trs.length; i++) {
     if (!hasClass(trs[i]) && ! trs[i].style.backgroundColor) {
         var tds = trs[i].getElementsByTagName("td");
         for (var j = 0; j < tds.length; j++) {
           var mytd = tds[j];
         if (! hasClass(mytd) && ! mytd.style.backgroundColor) {
         mytd.style.backgroundColor = even ? evenColor : oddColor;
           }
         }
       }
       even =  ! even;
     }
   }
 }
   
   </script>

</head> <body onload="stripe("playlist");">

<thead> </thead> <tfoot> </tfoot> <tbody> 
       </tbody>
A playlist of great music
Song Name Time Artist Album Play Count
Music selection
A2:35AA7
B2:35BB7
C2:35CC7
D2:35DD7
E2:35EE7
F2:35FF7
G2:35GG7
H2:35HH7
I2:35II7
J2:35JJ7
K2:35KK7
L2:35LL7

</body> </html> 

</source>


table row background

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>tr 1</title> <style> tr { background: white; } tr.alt { background: yellow; } </style> </head> <body>

Name Place of residence
P O
V B
L L
E P

</body> </html> 

</source>


table row hover

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>tr 2</title> <style> tr { background: white; } tr.alt { background: yellow; } tr:hover {background: pink;} </style> </head> <body>

Name Place of residence
P O
V B
L L
E P

</body> </html> 

</source>


table row with class

   <source lang="html4strict">

<?xml version"1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> 

 <head>
   <title>Using CSS for Backgrounds</title>
   <style type="text/css">
     td, th {border-style: groove;}
     table {border-style: groove;border-collapse: collapse;}
     tr.hlRow td, th {background-color: #eee;}
     tr.regRow td {background-color: #fff;}
   </style>
 </head>
 <body>
<thead> </thead> <tbody> </tbody>
Pizza Type Small Medium Large
Thin Crust 3.99 4.99 6.99
Deep Dish 4.99 6.99 8.99
Stuffed Crust 5.99 7.99 9.99 
 </body>

</html> 

</source>


Table style for even rows

   <source lang="html4strict">


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> <style type="text/css"> body { 

 font-size: 62.5%;
 margin: 5% 10% 20% 10%;

} img { 

 border: none;

} img.prod { 

 background: white; 
 float: left;
 margin: 0 7px 7px 0;
 border: 2px solid #FFCC00;
 padding: 1px;

}

.dltprod { 

 text-align: right;

} .dltprod p { 

 margin: 0;
 padding: 0;
 font-size: .9em;
 color: #333333;

}

td, th { 

 padding: 0.1em 1em;
 border-right: 1px solid #666;

}

td { 

 padding: 7px;

} caption { 

 padding: 1em;

}

  1. shoppingcartTable {
 border-collapse: collapse;
 width: 100%;
 border: 1px solid #666;

}

  1. shoppingcartTable th { 
 background: #888 url(th_bkgd.jpg) repeat-x; 
 font: italic 1.5em Georgia, "Times New Roman", Times, serif; 
 padding: .5em 0 .5em 7px;
 text-align: left;
 border-top: 1px solid #666;
 border-bottom: 1px solid #666;
 text-shadow: #ccc -2px 2px -2px;

}

  1. shoppingcartTable td {
 vertical-align: top;

}

  1. shoppingcartTable input[type=text] {
 border: 1px solid black;

}

  1. shoppingcartTable .prodcell {
 width: 70%;

}

  1. shoppingcartTable .prodcell a {
 font-size: 1.2em;

}

  1. shoppingcartTable .prodtitle {
 text-overflow: ellipsis;
 overflow: hidden;
 padding: 2px 0;
 font-weight: bold;
 width: 35em;
 white-space: nowrap;

}

  1. shoppingcartTable #iteminfo {
 text-indent: -1000em;
 width: 5em;

} .dltitem { 

 margin-top: 1em;

} tr { background: #eee; } tr.odd { background: #ccc; }

</style> </head> <body>

<form method="get" action="">

<thead> </thead>
Shopping Cart Listing - Subtotal: $99.16; changed quantities? <input type="submit" value="Update price(s)" />
Item info Product Qty. Price

Item added on March 22, 2008.

   <a href="" title="Delete this product">delete"</a>

   <img class="prod" alt="product image" src="u.jpg" />
<a href="">this is a text</a>
   U2

   <input type="text" value="1" name="qty" size="2" />

   $9.66

Item added on March 22, 2006.

      <a href="" title="Delete this product">delete</a>

   <img class="prod" alt="product image" src="a.jpg" />
<a href="">this is a text</a>
Apple 		<input type="text" value="1" name="qty" size="2" /> $7.97

Item added on March 22, 2006.

     <a href="" title="Delete this product">delete</a>
 

   <img class="prod" alt="product image" src="a.jpg" />
<a href=""></a>
this is a text 		<input type="text" value="1" name="qty" size="2" /> $9.66

Item added on March 22, 2006.

     <a href="" title="Delete this product">delete</a>

   <img class="prod" alt="product image" src="f.jpg" />
<a href="">The Other Side</a>
this is a test. 		<input type="text" value="1" name="qty" size="2" /> $15.98

</form> </body> </html> 

</source>


Table with subtotoal row

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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> <title>Table Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { 

 font-family: arial, verdana, sans-serif;

} td { 

 border: solid 1px black;
 width: 100px;
 empty-cells: hide;

} </style> </head> <body>

Receipts tax Costs Balance
Quarter 1
Store A 12,585 2,202 4,155 6,228
Store B 15,221 2,663 5,320 7,238
Subtotal 42,806 4,865 9,475 13,466
Quarter 2
Store A 14,682 2,569 4,650 7,463
Store B 21,166 6,704 6,240 11,222
Subtotal 35,848 6,273 10,890 18,685

</body> </html> 

</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_row&oldid=5077»