Page 1 of 1

few doubts with cell spacing and cell bordering[solved]

Posted: Fri Mar 31, 2006 4:38 am
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; 
}

Posted: Fri Mar 31, 2006 6:24 am
by Buddha443556
Check out border-collapse and border-spacing. Those are CSS2 properties though, limited support.

Blooberry.com is an excellent CSS reference too.

Posted: Fri Mar 31, 2006 2:30 pm
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>

Posted: Fri Mar 31, 2006 3:36 pm
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>