Hello,
I need advice on how to convert my table layout to pure CSS for my cursor site http://www.cursors-4u.com/
Not really sure where to start. I’m mainly trying to figure out how to do the columns and align them correctly.
What’s a good place to learn how to covert from table to css?
In addition to what has already been said, keep in mind that you may find that using tables for some sections is the better thing to do. If I am designing an extensive table of data (or a grid of some sort), I much prefer to use a table over CSS for that particular element.
CSS is the better way to code, but don’t be afraid to use a few tables if it makes things easier.
As you’ve been advised above, forget about “converting”. You need to start over. You need to change more than just your code, you need to change how you think. You have learned to “think table”, and you need to unlearn that.
The best way to do this is to approach html and CSS afresh with a more or less empty mind. Of course you can’t really forget all you know, but you can put it aside for a time to a great extent and you should.
Pretend you know nothing about html at all and go to a site like HTML Dog and run through their tutorials right from the beginning.
The object is to learn to write valid and semantic html markup, and then having done that to style and position that code with CSS. That’s the separation of the concerns of “markup” and “presentation” that was intended by the designers of html and CSS in the first place.
By coding semantically we simply mean that you use html tags to describe the meaning of your content, not worrying about it’s presentation.
Thus, tables are a perfectly useful html construct meant to mark up or describe tabular information. Using a table to layout your elements is bad, but using a table to describe tabular content with html markup is not only good, but the only proper way.
If you always ask yourself what the particular section of text you are marking up with html is, then you won’t go far wrong. It’s a paragraph? There’s a tag for that! So use that tag. It’s a menu? What is a menu? Why it’s a list of options. There’s tags for lists! So use them. And so on. Not really all that hard.
As much as you can, just ignore how your page is going to look while you do the html markup. Describe the content in html, not the look. Make sure the markup is valid. When that’s done, start applying CSS to make it look the way you want it. The bonus for doing things this way is that it’s actually much easier and takes a lot less time yet produces better results.
^ What he said ^
You can’t ‘convert’ from unsemantic table tag soup to semantic structural markup, because the former deals exclusively with presentation while the latter should ignore presentational matters altogether – leaving that for CSS to deal with.
The best place to start is to forget all about how you did it with tables and to write HTML that is semantically correct to describe what the contents actually are.
Then write the CSS one piece at a time positioning the content at the top left of the page first and gradually moving down the page.