how do you change this old code for css? <tablewidth="100%"border="1"cellspacing="5"cellpadding="5"align="center"bgcolor="#FFFFFF"> thanks in advance
you can create CSS class in style.css file and remove the table and user div. Here are the css code. .tablecass{ width:100%; border:1px solid #666; padding:5px; background-color:#fff; } Here are the html code. <div class="tablecass">your content here</div>
Well, it's not THAT simple as you haven't said what the CONTENT is. "modern" practices SHOULD be chosing the tags used to mark up the content based on what the content IS... Not just blindly throwing DIV and classes at it (sorry creativewebmaster, but NO). You don't show us the content, nobody can tell you what the correct tags are -- could be you have tabular data and it should remain a table, could be presentational use of tables in which case it could be a DIV, it might not even need extra wrappers if all that's in it is what should be headings and paragraphs. You'll need to give us a LOT more than that to get a proper answer. What you have there is presentation -- and yes, that goes in the CSS, but without the proper semantic markup it's pointless to even try making the presentation. Content should dictate the markup, NOT the other way around... With "new code" if you are even THINKING about what it's going to look like while choosing your HTML tags, you will most likely be choosing all the wrong tags for all the wrong reasons.
drcensor, keep in mind if you change the <table></table> tags whatever is between those tags will have to go as well (stuff like <td>,<tr>, etc.) or everything will get messed up. What I do, sometimes, I wrap existing <table> with <div> tags, thus getting a bit more flexibility for using css styles. Or you can always add styles into the existing <table>. For instance your <table> may look like this: <table width="100%" cellspacing="5" cellpadding="5" align="center" style="border: 1px solid #CCCCC; background-color: #FFFFFF; margin: 0px; padding: 0px;"> Again, what it does it gives you a whole new range of options to use.
thanks for the info, it's a old site and i am trying to modernise it with css, which went well till that one line. I like the table look even though I have a long way to go to make it look half desent, I tried using .new{ width:100%; border:1px; background-color:#FFFFFF; border-spacing:5px; padding:5px; } but it didn't work. I want the look of the table h**p://www.news-ball.co.uk/index.html have a look to see what I mean (it needs a lot of work, but one step at a time!)
Well, that example IS tabular data, but it's written incorrectly, even for fifteen years ago... because it has NO structural relationships for that tabular data... which is to say it's using a H1 doing CAPTION's job, the first row filled with classes and strong tags doing TH's job (which should have scope="col" on them), the pointlessly vague classes sure as shine-ola aren't helping matters, not that you probably even need those classes since the 'rank' column should probably be TH with SCOPE="ROW" on them. though it's also got a lot of head-scratchers like pointless META, DIV inside the HEAD (you can't put DIV there!), empty TABLE for nothing, etc, etc... But that SHOULD stay a table... lemme do a quick rewrite here and I'll post it up.
... and here's a 'modern' approach, if 1998 can be considered 'modern'... since that's how long we're SUPPOSED to have been doing it this way. This is a really good example of what I mean by developers being completely unaware of how to build a table or how there are other tags that should be used with a table like CAPTION, THEAD, TBODY, TH... or attributes like SCOPE that build your semantic relationships. Could be worse, could sleaze together a bunch of non-semantic DIV on what's obviously tabular data. In any case, here's what I came up with: http://www.cutcodedown.com/for_others/drcensor/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/drcensor/ Is open for easy access to the bits and pieces. I only bothered with the first five records since it's pretty much lather, rinse, repeat from there. Notice how much less markup it needs, and how it doesn't need ANY of those classes. WARNING, it uses border-spacing so IE7 and lower will NOT pad them out properly -- if you need IE7 to behave add cellpadding back in on TABLE. Also, it uses sibling selectors, which IE6 doesn't know... so to support IE6 you'd need to add one class to each TR -- honestly, the only thing that screws up is alignment, let them suffer if they can't join us in THIS century of browser tech. Also notice the RECOMMENDATION doctype, swinging an axe at the stupid malfing TARGET attributes that have ZERO business being used on any website written after 1997 (STOP shoving opening in a new window down users throats breaking forward/back navigation. They want it in a new window/tab let the user decide to do it with shift-click or middle-click!) Some more advice, STOP shoving all your CSS on one line, it's an incomprehensible gibberish mess that way that I've rarely if ever not seen result in redundancies or just plain broken CSS. Overall the most important thing for you to notice here though is that through using sibling selectors and the PROPER semantic markup for a table, it doesn't need any classes! That's one of the reasons to be using semantic markup -- the other of course being that's why we have all these tags in the first place, god forbid we use them for what they were meant to be used for the past decade and a half!
Exactly my thought, the "modern" practice depends on the content, so <table could still be <table, if the content is tabular data.
Oh, side-note... I'd consider maybe swapping the TH in my rewrite to the title of the site instead of it's rank -- that's really what the row is ABOUT, the rank is just data.