Multi colored table rows

Sun Feb 26, 2012 10:37 pm

In this example we use CSS to set the different background colors for the table rows.
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<
head>
<
title>Multi colored table rows</title>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<
style type="text/css">
td {
   
color#FFFFCC;
}
table {
  
width:25%;
  
border-collapse:collapse;
}
table th{
   
background-color#0777E7;
}


tr.rowX td {
  
background-color#436789;
}
tr.rowY td {
  
background-color#790990;
}
</
style>
</
head>

<
body>
<
table>
 <
tr class="rowY"
    <
th>Header1</td>
    <
th>Header2</td>

    <
th>Header3</td>
  </
tr>
 
  <
tr class="rowX"
    <
td>Row1 Cell Text1</td>
    <
td>Row1 Cell Text2</td>
    <
td>Row1 Cell Text3</td>
  </
tr>
  <
tr class="rowY"
    <
td>Row2 Cell Text1</td>

    <
td>Row2 Cell Text2</td>
    <
td>Row2 Cell Text3</td>
  </
tr>
  <
tr class="rowX"
    <
td>Row3 Cell Text1</td>
    <
td>Row3 Cell Text2</td>
    <
td>Row3 Cell Text3</td>
  </
tr>
  <
tr class="rowY"
    <
td>Row4 Cell Text1</td>
    <
td>Row4 Cell Text2</td>
    <
td>Row4 Cell Text3</td>
  </
tr>
</
table>
</
body>
</
html>
 




  Related Posts  to : Multi colored table rows
 Table with colored background     -  
 Select odd rows from table     -  
 different colors for table Even- Odd rows and Cells     -  
 Listing All Rows and Fields in a Table     -  
 Multi Thread Program     -  
 Javascript Multi-dimensional Arrays     -  
 Toggle the Multi Monitor Setting in Windows XP     -  
 multi-frameset and non-re-sizable html frame pages     -  
 $2500 per month working with Multi-million dollar companies     -  
 three rows frameset .     -  

Topic Tags

HTML Table