Cascading Style Sheets for Tables

You can format your table rows with background images or background colors. If you want to format the rows to look different in every other row, you will need to set up two different styles and then apply them in the same manner.


Table with Row Styles of Horizontal Lines

HTML 


<table id="ShowLines" cellpadding="10" cellspacing="0" width="50%">       
<tr>
<td></td>    
<td></td>    
</tr>
tr>
<td></td>      
<td></td>      
</tr>
</table>

CSS

 
#ShowLines{font-family:arial; font-size:12px;} 
#ShowLines td{border-bottom:1px solid green; border-collapse:collapse;} 
tr.Titles{color:red; text-transform:uppercase; font-weight:bolder; 
          font-size:16px;} 
 

Table with Rows Alternating Color

HTML 


<table cellpadding="10" cellspacing="0" width="100%">       
<tr class="odd">  
<td></td>    
<td></td>    
</tr>
<tr class="even"> 
<td></td>      
<td></td>      
</tr>
<tr class="odd">  
<td></td>    
<td></td>    
</tr>
</table>

CSS

 

tr.odd{background-color:red;} 
tr.even{background-color:white;}

 

Table with Column Styles

HTML 


<table cellpadding="10" cellspacing="0" width="100%">       
<tr>
<td class="left">Left Row 1</td>
<td class="right">Right Row 1</td>
</tr>
<tr>
<td class="left">Left Row 2</td>
<td class="right">Right Row 2</td>
</tr>
</table>
 

CSS

 
table{border:dashed; border-color:black}
.left{background-color:#336699 font-weight:bold; 
         font-family:'Times New Roman',serif; padding:3px;  }
.right{background-color:#B7B774; font-weight:bolder; 
            font-family:Arial; padding:3px; }

 

Table with Columns Alternating Color

HTML 


<table id="colorTable" cellpadding="10" cellspacing="0" width="100%"> 
<col id="description" >
<col class="column2" >
<col class="column3">
<col class="column4">    
<tr>  
<td></td>   <td></td>   <td></td>   <td></td>   
</tr>
<tr>  
<td></td>   <td></td>   <td></td>   <td></td>   
</tr>
<tr>  
<td></td>   <td></td>   <td></td>   <td></td>   
</tr>
</table>

CSS


#colorTable{color:White; font-weight:bold;}
col.description {width:100px; background-color:blue;} 
col.column2 {width:100px; background-color:green} 
col.column3{width:100px; background-color:blue} 
col.column4{width:100px; background-color:green}
 

Table with Header Styles

HTML 


<table class="BrandedTable" border="1" cellspacing="0" 
summary="Summarise the content of the table here."> 
 Short description of table contents < /caption >
< thead>
< th scope="col" abbr="name">Widget Name  
< th scope="col" abbr="name">Price  
< th scope="col" abbr="name">Features  
< th scope="col" abbr="name" >Stock  
< /tr >

< tbody > 
< tr class="table-row-1" >
 < td>Super widget< /td>
< td>$30.00< /td>
< td>500 hours< /td>
< td>yes< /td>
< /tr>
< tr class="table-row-2" >
< td>Mega widget< /td>
< td>$25.00< /td>
< td>200 hours< /td>
< td>yes< /td>
< /tr>
< /tbody >
< /table >

CSS


table.BrandedTable
{ width:400px; border:5px solid black; background-color: Teal; 
border-collapse:collapse; } 

thead th 
{ padding:6px;background-color:Black; color:White; } 

tfoot th 
{ padding:6px; background-color:Black;} 

.table-row-1 td 
{ padding:2px 6px; border:1px solid #5F7558; background-color:#DDDDDD; 
text-align:center;} 

.table-row-2 td 
{ padding:2px 6px; border:1px solid #5F7558; text-align:center;}
 

ADDITONAL NOTES:
You can also group several columns together using the <colgroup> tag.
When you want to set the WIDTH or BACKGROUND-COLOR or BACKGROUND-IMAGE of all of the rows in a column and style the column like this:

col#price {width:200px; background-color:red;}

Cascading Style Sheets


Style Types