Hi, Can someone please give me the benefits of the new TableLess coding? Why would someone want to have tableless when tabled is so easy? Talker
The main discussion for and against using tables for the page layout is mainly to do with the correct usage of html code, with additional aspects such as bandwith savings and styling also being of importance. Pretty much it could be said that using tables for the layout of the page means that you are not using the tags the way they were intented to be used. You could say though that doing it in such a way is more easier for the designing, but you have to think of the aspects beyond that with correct tag usage. Tables as specified should only really be used for tabulated data. Instead, you should use a combination of div's, p's and spans where needed to design your page. If you code using the div's, p's etc your bound to in the end have a smaller html file for your site resulting in less bandwith. Also, what you do can just as easily be modified through the CSS file that you use to set and style your layout. You're best to do a search in google for topics about why you should, or why you should not use tables for layout. Please note, I may have made mistakes because it's been a while since I read such material, but it should be mostly correct.
Talker, Tableless design, allows you to control your design from one simple CSS sheet. Tables can be a quick and easy way out, however with practice and patience, you can do CSS designs just and fast, more accurately and a lot neater. Tableless design also helps search engines to crawl your design easier. HTML tables are not supposed to be used to contain a design. Tables are quite literally to hold tabular data. Like Chopsticks said, best thing to do is read up on the subject, as the benefits of CSS design vary from designer to designer. Check out my blog post on Tables Vs CSS. bavington.co.uk/web-design/css-vs-tables/
To be truthful, it's the constant nested tables within tables that makes tabled design an accessibility nightmare and difficult for teh googles to crawl. They can crawl tables just fine-- if they couldn't, your tabular data would get ignored by search engines. Some tips I'd give you: Your first instinct going from tables is to use a div for every place you had a td. This will remove any bandwidth advantages you'd get from moving to "divs" and CSS. You don't need that many nameless boxes. None of this: <div id="toppart"> <div id="header"> <div id="title"><h1 class="headertext">Name of web page</h1></div> </div> </div> That should make your eyes burn, at least after you figure out what you're doing. Second, don't use a div unless there's no other tag for that. Like, use headers (h1, h2, h3) for header text, use p's for paragraphs (or word fragments, teh Crusties will argue about this), use <address> for addresses, ul's and ol's for lists (and a web site menu is considered a list!), etc. You'll likely learn more HTML when moving from tables. Third, learn what boxes do what by default. Divs, p's, ul's, headers etc are blocks. They try to be 100% width of their parents by default, and they stack underneath each other (unless you float them). Text, images, anchors/links, etc are inline elements and stack up alongside each other unless you tell them otherwise, and are generally not allowed to have heights and widths (images are an exception as they are replaced elements and the image itself has an intrinsic width and height anyway) nor vertical margins. Blocks can hold inlines and other blocks (some blocks, like forms, can only have blocks as direct children too!). Inlines may NOT hold blocks. Water can't hold a bucket! * edit, I use this site ALL THE TIME to check to see who's a valid child or parent of who: http://learningforlife.fsu.edu/webmaster/references/xhtml/tags/ It's XHTML, but pretty much holds for HTML4 as well, so it works both ways, GENERALLY. A thing here or there may be different. Let the defaults, and the document flow, do as much of the work for you as possible. I call it being lazy : ) but here that's a good thing. Learn float theory. You'll be using them for everything anyway, NOT absolute and relative positioning, so learn how they work and what the rules are for them. Will save you hair. Lastly, use the validators: http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/ They will catch you trying to make water hold a bucket, unclosed tags, and other tasty things. Of course, they don't work without a Doctype. : ) Good luck, and don't lose too much hair!
Talker, as a champion of CSS over tables, I do however feel obliged to point out that you should always remember that there will be times where a table is the quickest and best way to do something. All that's being said here is that tables shouldn't be used for layout not that they shouldn't be used full stop. If you have a page that contains user details with a username, logon time, number of logons and so on, then in my opinion it's perfectly right and proper to use a table to display this data: it is, after all, a table of data. I'd just add that one of my key complaints about tables for layout is that it's often very difficult to alter layout after the fact, especially with multiple nestings, as Stomme pose has said. With decent coded CSS you can usually 'pick up' blocks of a page and shuffle them around in code. Try doing that with a set of <td> s buried three or four tables deep. Jon
CSS allows the whole design of a page to altered from one single style sheet and it allows text to found much quicker by search engines. Whereas, tables are twice as hard to alter the layout and bury information you want the SE to crawl quickly and easily. Bavington posted a excellent post on this bavington.co.uk/web-design/css-vs-tables/
That's excellent knowledge. Thanks so much for the links as well. Short but very sweet, well explained. I guess i should be really working on CSS to build up the layout of the site. Thank so much again for the words you both have put up to explain me!