Tables in CSS

[holmedwa04]

HiI am trying to write a table in CSS. Basically remove all of the width="%%" from my html, this is what I have so far but it just doesn't seem to want to work.I have played around with absolute and fixed etc. but I don't really get what they are doing, this is my CSS code:

table { color: black;font-size: 12px;font-family: calibri, arial, sans-serifwidth: 99% } .70 { width:50%; } .15 { width:25%;} th {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;font-weight: bold;font-style: italic;text-align: center;}

And this is my HTML:

<table width="99%" border="1" bordercolor="000000" cellspacing="0" cellpadding="10"><tr><th>News Item:</th><th>Date:</th><th>Time:</th></tr><tr><td class="70">CSS based layout now up and running.  Site stucture no longer uses tables!</td><td class="15"><center>08th November 2008</td><td class="15"><center>12.05am</td></tr></table>

Any help working out how to set the widths of the columns in the table would be greatly appreciated, I am sure it is just something really basic that I have missed out on!

[Ingolme]

You forgot a semi-colon ( ; ) at the end of this line:table {color: black;font-size: 12px;font-family: calibri, arial, sans-serifwidth: 99%}And I don't think you can use numbers alone as class names. Try class="w70" or something like that instead.

[holmedwa04]

That is great, thanks so much! I knew I would have missed something so obvious out. But it looks like it was the class names that I had used, being just numbers and not having letters in them. Racking my brains I seem to remember something about that on one of the tutorials that I had read but it never crossed my mind, worth remembering though!This is the code that I used for the CSS:

table { color: black;font-size: 12px;font-family: calibri, arial, sans-serif;empty-cells: show;border-collapse: collapse;padding: 10px;width: 99% } td {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;border: 2px solid black;}.w70 {width: 70%;padding: 10px;}.w15 {width: 15%;padding: 10px;text-align: center;}.add {width: 20%;padding: 3px;text-align: center;border: none}th {color: black;font-size: 12px;font-family: calibri, arial, sans-serif;font-weight: bold;font-style: italic;text-align: center;border: 2px solid black}

And this is the HTML code that I used with content in it so you can test it if you like:

<table><tr><th class="w70">News Item:</th><th class="w15">Date:</th><th class="w15">Time:</th></tr><tr><td class="w70">CSS based layout now up and running.  Site stucture no longer uses tables!</td><td class="w15">08th November 2008</td><td class="w15">12.05am</td></tr><tr><td class="w70"><a href="layout.html">Track Plan</a> page has been added.  Do you want to know what me track plan looks like?  Go to this page to find out.  Track plan is 400 pixels wide to ensure it will display on most resolutions, if you would like a bigger picture, just click on it and it will go to full resolution.</td><td class="w15">03rd November 2008</td><td class="w15">12.20pm</td></tr><tr><td class="w70"><a href="about.html">About the Layout</a> page has been added.  Did you ever wonder why the layout is called Goathland?  Go to this page to find out.</td><td class="w15">01st November 2008</td><td class="w15">08.15pm</td></tr><tr><td class="w70"><a title="goathland@hosting.burrawcentral.org" href="mailto:goathland@hosting.burrawcentral.org?Subject=Contact Us">Contact Us</a> button at the bottom of every page.  Have a query about the site or my layout?  Want help with something?  I am always willing to be of assistance, but as an A2 student studying Electronics, ICT and Physics it is hard for me to reply straight away, you may not recieve a reply for up to a week!</td><td class="w15">30th October 2008</td><td class="w15">10.20pm</td></tr><tr><td class="w70">The <a href="archive.html">News Archive</a> page is online, it just doesn't have any news in it yet!</td><td class="w15">29th October 2008</td><td class="w15">04.35pm</td></tr><tr><td class="w70">Goathland is online!  Compatable in the following browsers:<BR><pre>	- Internet Explorer 7.0	- Internet Explorer 6.0	- Google Chrome	- Mozilla Firefox	- Apple Safari	- Opera 9.6</pre><table><tr><td class="add"><img alt="Internet Explorer 7 Logo" title="Internet Explorer 6 & 7" src="images/compatible_ie.gif"></td><td class="add"><img alt="Google Chrome Logo" title="Google Chrome" src="images/compatible_chrome.gif"></td><td class="add"><img alt="MOzilla Firefox Logo" title="Mozailla Firefox" src="images/compatible_firefox.gif"></td><td class="add"><img alt="Apple Safari Logo" title="Apple Safari" src="images/compatible_safari.gif"></td><td class="add"><img alt="Opera 9.6 Logo" title="Opera 9.6" src="images/compatible_opera.gif"></td></tr></table><BR>N.B. At resolutions of 1024 x 768 or higher.  Can be viewed in lower resolutions however left/right scrolling may occur.</td><td class="w15">27th October 2008</td><td class="w15">11.55pm</td></tr></table>

The only problems that I am having is that I cant work out how to centre the whole table and not just the content in it. And I would like the cell padding on the "add" table to be 3px and for the table to be as small as possible not stretched out.Regards Edward

[Ingolme]

Just add margin: auto; to the CSS for the table and it should be centered.CSS can't do much with spacing and padding in cells, but that's why the cellpadding and cellspacing attributes for <table> are not deprecated in the strict DTDs. You can use them without trouble.

[holmedwa04]

Thanks, never thought about the margin: auto thing! Doh! Will that allow me to centre the table inside the div or just the contents of it? And thanks for the advice on the cellpadding and cellspacing. I didn't realise that these hadn't been depreciated.

[Ingolme]

It will center the table itself.Applying margin: auto; to any block level element with an assigned width will center it within its container.