HTML/CSS/Table Style/table row

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

Alternating Row Background

 
<!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">
#ts td {
  background: white;
}  
#t1 * .odd td {
  background: palegreen;
}  
</style>
</head>
<body>
<table id="t1"> 
    <tr class="r1 odd"> <td class="c1">r1 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r2"> <td class="c1">r2 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r3 odd"> <td class="c1">r3 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r4"> <td class="c1">r4 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
    <tr class="r5 odd"> <td class="c1">r5 c1</td> <td class="c2">c2</td> 
    <td class="c3"> c3</td> <td class="c4">c4</td> </tr> 
</table> 
</body>
</html>



Alternating row colors

 
<?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>
<h2>Alternating Row Colors</h2>
<table>
  <tr>
    <th>Item</th>
    <th>Description</th>
    <th>Cost</th>
    <th>Subtotal</th>
  </tr>
  <tr class="even">
    <td>I</td>
    <td>B</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr class="odd">
    <td>B</td>
    <td>B</td>
    <td>.2</td>
    <td>1</td>
  </tr>
  <tr class="even">
    <td>E</td>
    <td>2</td>
    <td>2</td>
    <td>1</td>
  </tr>
  <tr class="odd">
    <td>P</td>
    <td>1</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="even">
    <td>V</td>
    <td>5</td>
    <td>2</td>
    <td>2</td>
  </tr>
  <tr class="odd">
    <td>B</td>
    <td>L</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr class="even">
    <td>E</td>
    <td>1</td>
    <td>0</td>
    <td>2</td>
  </tr>
</table>
</body>
</html>



Coloring Rows in a Table

 
<!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>
  <table>
    <tr class="odd">
      <td> Row 1 Cell 1 </td>
      <td> Row 1 Cell 2 </td>
      <td> Row 1 Cell 3 </td>
    </tr>
    <tr class="even">
      <td> Row 2 Cell 1 </td>
      <td> Row 2 Cell 2 </td>
      <td> Row 2 Cell 3 </td>
    </tr>
    <tr class="odd">
      <td> Row 3 Cell 1 </td>
      <td> Row 3 Cell 2 </td>
      <td> Row 3 Cell 3 </td>
    </tr>
    <tr class="even">
      <td> Row 4 Cell 1 </td>
      <td> Row 4 Cell 2 </td>
      <td> Row 4 Cell 3 </td>
    </tr>
    <tr class="odd">
      <td> Row 5 Cell 1 </td>
      <td> Row 5 Cell 2 </td>
      <td> Row 5 Cell 3 </td>
    </tr>
    <tr class="even">
      <td> Row 6 Cell 1 </td>
      <td> Row 6 Cell 2 </td>
      <td> Row 6 Cell 3 </td>
    </tr>
    <tr class="odd">
      <td> Row 7 Cell 1 </td>
      <td> Row 7 Cell 2 </td>
      <td> Row 7 Cell 3 </td>
    </tr>
  </table>
</body>
</html>



Hiding row

 
<!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">
#t1 * .r2 {
  visibility: hidden;
} 
</style>
</head>
<body>
<table id="t1"> 
    
    <tbody class="b1"> 
        <tr class="r1"> 
            <td class="c1">r1 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r1 c3</td> 
            <td class="c4">4</td> 
        </tr> 
        
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r2 c3</td> 
            <td class="c4">4</td> 
        </tr>
    </tbody> 
    
    <tbody class="b2"> 
        <tr class="r3"> 
            <td class="c1">r3 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r3 c3</td> 
            <td class="c4">4</td> 
        </tr> 
        <tr class="r4"> 
            <td class="c1">r4 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r4 c3</td> 
            <td class="c4">4</td> 
        </tr>
    </tbody> 
    
    <tbody class="b3"> 
        <tr class="r5"> 
            <td class="c1">r5 c1</td> 
            <td class="c2">2</td> 
            <td class="c3">r5 c3</td> 
            <td class="c4">4</td> 
        </tr>
    </tbody> 
</table> 
</body>
</html>



Selecting cells in row

 
<!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">
#t1 * .r2 td {
  background-color: gold;
  color: black;
}  
</style>
</head>
<body>
<table id="t1"> 
    <thead> 
        <tr class="r1"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </thead> 
    <tfoot> 
        <tr class="r3"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tfoot> 
    <tbody class="b1"> 
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tbody> 
</table> 
</body>
</html>



Set different colors for even and odd table row

 
<!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>
<table>
  <tr> 
    <td>Some text</td>
    <td>Some more text</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="grey"> 
    <td>Hello</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="grey"> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>



stripe table with Javascript

 
<!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");">
    <table id="playlist" width="90%" border="0" cellpadding="2" cellspacing="0" summary="A playlist">
        <caption>
            A playlist of great music
        </caption>
        <thead>
            <tr>
                <th>Song Name</th>
                <th>Time</th>
                <th>Artist</th>
                <th>Album</th>
                <th>Play Count</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="5">Music selection</td>
            </tr>
        </tfoot>
        <tbody>
            <tr><td>A</td><td>2:35</td><td>A</td><td>A</td><td>7</td></tr>
            <tr><td>B</td><td>2:35</td><td>B</td><td>B</td><td>7</td></tr>
            <tr><td>C</td><td>2:35</td><td>C</td><td>C</td><td>7</td></tr>
            <tr><td>D</td><td>2:35</td><td>D</td><td>D</td><td>7</td></tr>            
            <tr><td>E</td><td>2:35</td><td>E</td><td>E</td><td>7</td></tr>
            <tr><td>F</td><td>2:35</td><td>F</td><td>F</td><td>7</td></tr>
            <tr><td>G</td><td>2:35</td><td>G</td><td>G</td><td>7</td></tr>
            <tr><td>H</td><td>2:35</td><td>H</td><td>H</td><td>7</td></tr>
            <tr><td>I</td><td>2:35</td><td>I</td><td>I</td><td>7</td></tr>
            <tr><td>J</td><td>2:35</td><td>J</td><td>J</td><td>7</td></tr>
            <tr><td>K</td><td>2:35</td><td>K</td><td>K</td><td>7</td></tr>
            <tr><td>L</td><td>2:35</td><td>L</td><td>L</td><td>7</td></tr>
        </tbody>
    </table>
</body>
</html>



table row background

 

<!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>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Place of residence</th>
  </tr>
  <tr>
    <td>P</td>
    <td>O</td>
  </tr>
  <tr class="alt">
    <td>V</td>
    <td>B</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
  </tr>
  <tr class="alt">
    <td>E</td>
    <td>P</td>
  </tr>
</table>
</body>
</html>



table row hover

 

<!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>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Place of residence</th>
  </tr>
  <tr>
    <td>P</td>
    <td>O</td>
  </tr>
  <tr class="alt">
    <td>V</td>
    <td>B</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
  </tr>
  <tr class="alt">
    <td>E</td>
    <td>P</td>
  </tr>
</table>
</body>
</html>



table row with class

 
<?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>
    <table summary="This table provides the pricing information for pizzas">
      <thead>
        <tr class="hlRow">
          <th scope="col">Pizza Type</th>
          <th scope="col">Small</th>
          <th scope="col">Medium</th>
          <th scope="col">Large</th>
        </tr>
      </thead>
      <tbody>
        <tr class="regRow">
          <td scope="row">Thin Crust</td>
          <td>3.99</td>
          <td>4.99</td>
          <td>6.99</td>
        </tr>
        <tr class="hlRow">
          <td scope="row">Deep Dish</td>
          <td>4.99</td>
          <td>6.99</td>
          <td>8.99</td>
        </tr>
        <tr class="regRow">
          <td scope="row">Stuffed Crust</td>
          <td>5.99</td>
          <td>7.99</td>
          <td>9.99</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>



Table style for even rows

 


<!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;
}
#shoppingcartTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #666;
}
#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;
   
}
#shoppingcartTable td {
  vertical-align: top;
}
#shoppingcartTable input[type=text] {
  border: 1px solid black;
}
#shoppingcartTable .prodcell {
  width: 70%;
}
#shoppingcartTable .prodcell a {
  font-size: 1.2em;
}
#shoppingcartTable .prodtitle {
  text-overflow: ellipsis;
  overflow: hidden;
  padding: 2px 0;
  font-weight: bold;
  width: 35em;
  white-space: nowrap; 
}
#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="">
<table id="shoppingcartTable" summary="List of products.">
<caption>Shopping Cart Listing - <strong>Subtotal: $99.16</strong>; changed quantities? <input type="submit"  value="Update price(s)" /> </caption>
  <thead>
  <tr>
    <th id="iteminfo" scope="col">Item info</th>
    <th scope="col">Product</th>
    <th scope="col">Qty.</th>
    <th scope="col">Price</th>
  </tr>
  </thead>
  <tr>
    <td class="dltprod">
    <p>Item added on March 22, 2008.</p>
    <a href="" title="Delete this product">delete"</a>
  </td>
    <td class="prodcell">
    <img class="prod" alt="product image" src="u.jpg" />
    <div class="prodtitle"><a href="">this is a text</a></div>
    <strong>U2</strong>
  </td>
    <td>
    <input type="text" value="1" name="qty" size="2" />
  </td>
    <td>
    $9.66
  </td>
  </tr>
  <tr  class="odd">
    <td class="dltprod">
       <p>Item added on March 22, 2006.</p>
       <a href="" title="Delete this product">delete</a>
  </td>
    <td class="prodcell">
    <img class="prod" alt="product image" src="a.jpg" />
    <div class="prodtitle"><a href="">this is a text</a></div><strong>Apple</strong>
  </td>
    <td><input type="text" value="1" name="qty" size="2" /></td>
    <td>$7.97</td>
  </tr>
  <tr>
    <td class="dltprod">
      <p>Item added on March 22, 2006.</p>
      
      <a href="" title="Delete this product">delete</a>
  
  </td>
    <td class="prodcell">
    <img class="prod" alt="product image" src="a.jpg" />
    <div class="prodtitle"><a href=""></a></div><strong>this is a text</strong>
  </td>
    <td><input type="text" value="1" name="qty" size="2" /></td>
    <td>$9.66</td>
  </tr>
  <tr  class="odd">
    <td class="dltprod">
      <p>Item added on March 22, 2006.</p>
      <a href="" title="Delete this product">delete</a>
  </td>
    <td class="prodcell">
    <img class="prod" alt="product image" src="f.jpg" />
    <div class="prodtitle"><a href="">The Other Side</a></div><strong>this is a test. </strong>
  </td>
    <td><input type="text" value="1" name="qty" size="2" /></td>
    <td>$15.98</td>
  </tr>
</table>
</form>
</body>
</html>



Table with subtotoal row

 

<?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>
<table>
  <tr>
    <td></td>
    <th id="">Receipts</th>
    <th id="">tax</th>
    <th id="">Costs</th>
    <th id="">Balance</th>
  </tr><tr>
    <td id="Q1">Quarter 1</td><td></td><td></td><td></td><td></td>
  </tr><tr>
    <th id="">Store A</th>
    <td headers="">12,585</td>
    <td headers="">2,202</td>
    <td headers="">4,155</td>
    <td headers="">6,228</td>
  </tr><tr>
    <th id="">Store B</th>
    <td headers="">15,221</td>
    <td headers="">2,663</td>
    <td headers="">5,320</td>
    <td headers="">7,238</td>
  </tr><tr>
    <th id="">Subtotal</th>
    <td headers="">42,806</td>
    <td headers="">4,865</td>
    <td headers="">9,475</td>
    <td headers="">13,466</td>
  </tr><tr>
    <td id="Q2">Quarter 2</td><td></td><td></td><td></td><td></td>
  </tr><tr>
    <th id="StoreAQ2">Store A</th>
    <td headers="">14,682</td>
    <td headers="">2,569</td>
    <td headers="">4,650</td>
    <td headers="">7,463</td>
  </tr><tr>
    <th id="">Store B</th>
    <td headers="">21,166</td>
    <td headers="">6,704</td>
    <td headers="">6,240</td>
    <td headers="">11,222</td>
  </tr><tr>
    <th id="">Subtotal</th>
    <td headers="">35,848</td>
    <td headers="">6,273</td>
    <td headers="">10,890</td>
    <td headers="">18,685</td>
  </tr>
</table>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_row&oldid=5077»