Tables & Css

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 401,481 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,156 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 339 | Replies: 1

•

Join Date: Apr 2008

Posts: 21

Reputation: Borderline is an unknown quantity at this point

Rep Power: 1

Solved Threads: 1

Borderline Borderline is offline

Offline

Newbie 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

(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>

CSS:

Help with Code Tags

(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;
}