few doubts with cell spacing and cell bordering[solved]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

few doubts with cell spacing and cell bordering[solved]

Post by raghavan20 »

view image file

If you see that table, it does not have a border actually, it is the cellspacing that appears to be a border with color as black.

I am wondering is it possible to control cell spacing width through CSS and I do not want to do it from the table tag within PHP or HTML files.

How to also specify border width and color, I mean the cell borders and I know that border property in CSS only allows to put border around the table.

Can anyone tell me what is the default cellspacing width if not specified explicitly...is it 1???

Will it accept numbers less that one???

you can also point to good tutorials which explains these CSS properties....thanks

the CSS bit...

Code: Select all

.standardTable{
	margin:5px 0px 5px 0px; border:1px solid #000000; background-color:#000000; width:100%; cellspacing:1px;
}
.standardTable th{
	text-align:center; padding:3px 15px 3px 15px; font-weight:bold; background-color:#BCD5E7;
	vertical-align:top;
}
/*.standardTable td{
	padding:4px 15px 4px 15px; background-color:#E1ECF4; vertical-align:middle;
}*/
.standardTable td{
	padding:4px 15px 4px 15px; background-color:#FFFFFF; vertical-align:middle;
}
.standardTable, .standardTable table{
	font-size:0.8em; font-family: Verdana, Arial, Helvetica, sans-serif; 
}
Last edited by raghavan20 on Fri Mar 31, 2006 4:08 pm, edited 1 time in total.
User avatar
Buddha443556
Forum Regular
Posts: 873
Joined: Fri Mar 19, 2004 1:51 pm

Post by Buddha443556 »

Check out border-collapse and border-spacing. Those are CSS2 properties though, limited support.

Blooberry.com is an excellent CSS reference too.
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

after playing with it for a while, I have found the way to make this thing work...but still this works only if I put in border = '1' in table tag

Code: Select all

<html>
<head>
	<style type="text/css">
		.standardTable{
			border-collapse: collapse; border-spacing: 1pt 1pt;
			background-color:#FF3244; 
		}
		
		.standardTable td{
			background-color:#FFFFFF; padding:5px;
		}
	</style>
</head>
<body>
	<table class = 'standardTable' border ='1'>
		<tr>
			<td>cell 11 </td>
			<td>cell 12</td>
			<td>cell 13</td>
		</tr>
		
		<tr>
			<td>cell 21 </td>
			<td>cell 22</td>
			<td>cell 23</td>
		</tr>

		<tr>
			<td></td>
			<td></td>
			<td>cell 23</td>
		</tr>
		
	</table>
</body>
</html>
User avatar
raghavan20
DevNet Resident
Posts: 1451
Joined: Sat Jun 11, 2005 6:57 am
Location: London, UK
Contact:

Post by raghavan20 »

problem solved ... tried something else...

Code: Select all

<html>
<head>
	<style type="text/css">

		/* just have to get the border collapsed and border set for td */
		.standardTable{
			border-collapse:collapse; border-spacing: 0pt 0pt;
			background-color:#FF3244;
		}
		
		.standardTable td{
			background-color:#FFFFFF; padding:5px; border: 1px solid #000000;
		}
	</style>
</head>
<body>
	<table class = 'standardTable'>
		<tr>
			<td>cell 11 </td>
			<td>cell 12</td>
			<td>cell 13</td>
		</tr>
		
		<tr>
			<td>cell 21 </td>
			<td>cell 22</td>
			<td>cell 23</td>
		</tr>

		<tr>
			<td>cell 31</td>
			<td>cell 32</td>
			<td>cell 33</td>
		</tr>
		
	</table>
</body>
</html>
Post Reply