HTML and CSS

Tables & Css

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Apr 2008

Posts: 41

Reputation: Borderline is an unknown quantity at this point

Solved Threads: 1

Borderline Borderline is offline

Offline

Light Poster

Tables & Css

May 17th, 2008

I am trying to achieve a table like this, using mainly CSS to change the attributes:
http://www.further-flight.co.uk/sample_table.htm

My current effort looks like this:
http://www.further-flight.co.uk/meetups/join_us.php

I would like to remove the white lines within my table, pad the left handside so that the text moves away from the border slightly, add a 2px border between the red cell and the white and have the rows for National Hunt and Mixed in a pale grey colour, while leaving the flat row white. I have attempted these within my code, but haven't got the right result - could someone point me in the right direction, please?

HTML:

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
	<table id="sample" cellspacing="2">    
	<tr class="toprow">        
	<td colspan="2">North West</td>                  
	</tr>
 
	<tr>        
	<td class="data1">National Hunt</td>        
	<td class="data1">Aintree, Carlisle, Cartmel</td>               
	</tr>    
 
	<tr>        
	<td class="leftcol">Flat & AW</td>        
	<td class="data">Chester</td>               
	</tr>
 
 
	<tr>        
	<td class="data1">Mixed</td>        
	<td class="data1">Haydock Park</td>               
	</tr>    
 
	</table>
	<table id="sample" cellspacing="2">    
	<tr class="toprow">        
	<td colspan="2">North West</td>                  
	</tr>

	<tr>        
	<td class="data1">National Hunt</td>        
	<td class="data1">Aintree, Carlisle, Cartmel</td>               
	</tr>    
	
	<tr>        
	<td class="leftcol">Flat & AW</td>        
	<td class="data">Chester</td>               
	</tr>
	    
	
	<tr>        
	<td class="data1">Mixed</td>        
	<td class="data1">Haydock Park</td>               
	</tr>    
	
	</table>

CSS:

Help with Code Tags

HTML and CSS Syntax (Toggle Plain Text)

table#sample {    
margin-left: 15px;
background-color:#FFFFFF;    
border: solid #000 2px;    
width: 600px;
}
 
table#sample td {    
height: 20px; 
}
 
.data1 {    
color: #000000;  
background-color: #e0e0e0;  
text-align: left;    
background-color: #FFFFFF;
}
 
.data {    
color: #000000;    
text-align: left;    
background-color: #FFFFFF;
}
 
.toprow {    
font-weight: bold;      
text-align: left;    
background-color: #ec2648;
border-bottom: solid #000 2px;   
color: white;
}
 
.leftcol {    
font-weight: bold;    
text-align: left;    
width: 100px;    
background-color: #FFFFFF;
}