Table CSS

kiwis

My old "90's" style script has a table like this

<table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0">

However I can not find out how to put the cellspacing and cellpadding into a CSS file, I've googled it but only find unanswered forum threads...

Any ideas?

Krik

padding and margin will do it but you have to set it for every <td>

<style>
td    {padding: 2px; margin: 1px;}
</style>

NZ_Kiwis

Narr does not work... have a look

http://www.rugbyleaguenz.com/new409/header.php

Krik

I assumed you wanted to add style to the table cells not try to replace the cellpadding and cellspacing. They both are not style they are technically an attribute of the table element.

It is generally accepted to that you zero out the border, cellpadding and cellspacing in all tables.

<table border="0" cellspacing="0" cellpadding="0">

Doing this then allows you to set CSS borders, padding, and margins to the table the rows or the cells.

Weedpacket

Krik wrote:
I assumed you wanted to add style to the table cells not try to replace the cellpadding and cellspacing. They both are not style they are technically an attribute of the table element.

Well, they are styling attributes, because the specify features of the visual appearance of the table, without having anything to do with its structure or its content.

table
{
    border-collapse:collapse; /* removes the spacing between cells */
}
td
{
    padding:0; /* removes the padding within cells */
}

Reference: http://www.w3.org/TR/CSS21/tables.html#borders

kiwis

This does not work... why?

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<link rel="stylesheet" type="text/css" href="new409.css">

</head>

<body>

<table  class="one">
	<tr>
		<td class="one">
		<table class="one">
			<tr>
				<td class="one"><p class="White8">Home</p></td>
				<td class="one"><p class="White8">Rleague.com</p></td>
				<td class="one"><p class="White8">NZRL Website</p></td>
				<td class="one">&nbsp;</td>
				<td class="one"><p class="White8">Contact Us</p></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td class="one">
		<table class="one">
			<tr>
				<td class="one">
		<img border="0" src="LeftBanner.jpg" wclassth="440" height="100"></td>
				<td class="one">
		<img border="0" src="RightBanner.jpg" wclassth="320" height="100" align="right"></td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td class="one">
		<table class="two">
			<tr>
				<td class="two"><p class="White10">Home</p></td>
				<td class="two"><a href="index.php" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '150px')" onmouseout="delayhidemenu()"><p class="White10">Fans/Results</p></a></td>
				<td class="two"><p class="White10">Forums</p></td>
				<td class="two"><p class="White10">News</p></td>
				<td class="two"><p class="White10">About Us</p></td>
				<td class="two"><p class="White10">My Account</p></td>
				<td class="two"><p class="White10">Online Shop</p></td>
				<td class="one">&nbsp;</td>
				<td class="one">&nbsp;</td>
			</tr>
		</table>
		</td>
	</tr>
	<tr>
		<td class="one">
		<table class="one">
			<tr>
				<td class="five" colspan="4"></td>
			</tr>
			<tr>
				<td class="three"></td>
				<td class="four">
				<form method="POST" style="margin:0; text-align:0; word-spacing:0">
					<select size="1" name="D1"></select><input type="submit" value="Submit" name="B1"></form>
				</td>
				<td class="four">
				<form method="POST" style="text-align: 0; word-spacing: 0; margin: 0">
					<p class="White10">Username:<input type="text" name="T1" size="20"> 
					Password: <input type="text" name="T2" size="20"><input type="submit" value="Submit" name="B2"></p>
				</form>
				</td>
				<td class="three"></td>
			</tr>
			<tr>
				<td class="five" colspan="4"></td>
			</tr>
			</table>
		</td>
	</tr>
</table>

</body>

</html>


table.one
{
border-collapse:collapse; 
width:100%;
background-color: black;
}

table.two
{
border-collapse:collapse;
width:100%;
background-image: url('mainNav_bg.gif');
}


td.one
{
padding:0;
}

td.two
{
padding:0;
height: 12px;
width: 100px;
}

td.three
{
padding:0;
height: 12px;
width: 5px;
}

td.four
{
padding:0;
}

td.five
{
padding:0;
height: 4px;
}


tr
{
padding:0;
}


.White10 { 
font-family: Arial; 
font-size: 10pt; 
text-align:center; 
color:#FFFFFF; 
text-decoration: none;
}


.White8 { 
font-family: Arial; 
font-size: 8pt; 
text-align:center; 
color:#FFFFFF; 
text-decoration: none;
}

kiwis

<table class="two">
			<tr>
				<td class="two"><p class="White10">Home</p></td>
				<td class="two"><a href="index.php" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '150px')" onmouseout="delayhidemenu()"><p class="White10">Fans/Results</p></a></td>
				<td class="two"><p class="White10">Forums</p></td>
				<td class="two"><p class="White10">News</p></td>
				<td class="two"><p class="White10">About Us</p></td>
				<td class="two"><p class="White10">My Account</p></td>
				<td class="two"><p class="White10">Online Shop</p></td>
				<td class="one">&nbsp;</td>
				<td class="one">&nbsp;</td>
			</tr>
		</table>

Sorry this tables row is higher than 12px

kiwis

look at the width in firefox if you can... IE is fine

http://www.rugbyleaguenz.com/new409/header.php

Krik

Well, they are styling attributes, because the specify features of the visual appearance of the table, without having anything to do with its structure or its content.

doh, that's what I get for using old books. I am always thinking I should update this or that quick reference book. And even for constantly buying a new book I guess my CSS quick reference guide got grossly out of date. Guess it's next on the list.

look at the width in firefox if you can... IE is fine

I see issues with the width for the cells in the row above your logo/header in both IE and FF, I see width issues with your header in IE, I see width issues with the cells in your menu in IE and FF, I see width issues with your login in IE.

I guess you need to be much more specific in your questions.

But to answer all those issues make sure you have widths set for all your table's and columns in those tables. That should solve most of those I listed above.

kiwis

yeah I fixed that, thanks... Now the font is gone on the menu

<p class="White10"> which is

p.White10 { 
font-family: Arial;
font-size: 10px; 
text-align:center; 
color:#FFFFFF; 
text-decoration: none; margin-top:0; margin-bottom:0
}

See now it's not arial in either... why?

Weedpacket

kiwis wrote:
See now it's not arial in either... why?

Looks like Arial to me. What font are you seeing?

(Just think; once this is done there's the fun of using CSS to lay out the page instead of using tables for layout, or CSS to do popup menus instead of JavaScript!)