Tables & Css

Expand Post »

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:

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:

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

Similar Threads

updating 2 HTML tables on one PHP page in PHP
Tables, DIV, CSS & HTML in dreamweaver in HTML and CSS

Borderline

Reputation Points: 11

Solved Threads: 1

Light Poster

Offline

49 posts
since Apr 2008

Permalink

May 18th, 2008

Re: Tables & Css

change table cellspacing="0"
add padding: 5px; to table#sample td

amigura

Reputation Points: 11

Solved Threads: 7

Junior Poster in Training

Offline

71 posts
since Jan 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in HTML and CSS Forum Timeline: Open all external links with a frame

Next Thread in HTML and CSS Forum Timeline: Horizontal menus

DaniWeb Message

Cancel Changes

User Name
Password