|
|
||||||
|
||||||
| Index Link To US Private Messages Archive FAQ RSS | ||||||
| Graphics & Design Discussion Forum Post your graphics design questions/comments/ideas in here. Ask questions, post tutorials, discuss trends and best practices. Sub-forum for website accessibility and usability. |
Share Thread: & Tags
|
||||
|
![]() |
|
|
LinkBack | Thread Tools | Display Modes |
|
||||
|
Css is technically the style layer while tables are a part of the data structure layer. One cannot replace the other. They are both useful. There is nothing technically wrong with using tables. I prefer not to use them when I can to help pages load more "gracefully"... However... there are just some things you cannot do without tables (without wasting 3 weeks of your life browser testing javascript hacks).
Use both...
__________________
James Weisbrod - programmer |
|
|||
|
Please will you give some examples.
|
|
||||
|
Sure... Tables work differently that Divs (block display)... A table will scale to accommodate the contents of the table cell without breaking to the next line... A div acts like a parent container and the layout properties of the contents do not transfer back up the chain while preserving the div layout. There are some css properties which you can use to force a span or a div to act like a table but the workaround breaks compatibility for most browsers requiring complicated JavaScript hacks (if it's even possible I have never bothered).
It's hard to put into words exactly how the behavior differs... but I have a page which illustrates it... Divs which do not break to the next line If you have a solution which justifies exclusive div layouts, I am open ears. A practical everyday real world issue which forces my use of tables would be dynamic horizontal menus which cannot break to the next line in order to preserve the design. But there are many other instances where it pops up too... Tables are useful...
__________________
James Weisbrod - programmer Last edited by MrGamm; 01-09-2009 at 07:30 AM. |
|
||||
|
Two recommended books:
Everything*You*Know About CSS*Is*Wrong! - SitePoint Books HTML*Utopia: Designing*Without*Tables Using*CSS, 2nd*Edition - SitePoint Books Generally use tables for tabular data. Use CSS / XSLT for styling. Different style sheets can be used to make:
|
|
|||
|
There is no evidence that either tabled or div-based layouts affect a site's ranking in the search engines.
|
|
||||
|
Quote:
Agreed... However, I have found evidence that an overall... very poorly constructed website does worse than a website which has been overhauled with good tech in mind. Just because no one can find differences in divs vs tables layouts, certainly does not mean that Google is capable of wading through a $5.00 website with amazingly shoddy technical. It may have more to do with the architecture, but whatever it is... A high quality website does better.
__________________
James Weisbrod - programmer |
|
||||
|
Quote:
I read somewhere a while back that google prefers faster loading pages, which CSS accommodates. I still use tables for some layout to achieve centered positioning of the content regardless of the users resolution settings, and for the simple reason that I have seen to many websites load, without loading the refered CSS file for some reason. Fortunately reloading the page will usually render the page completely in tact, but I prefer my sites to be understandable under any circumstance.
__________________
James Allen |
|
||||
|
Having started web designs using tables in the mid-90s, then using CSS for text/font configurations with tables for layout, I finally went "all CSS" last year. It took some get'n used to, and a great deal of time scewing around to understand necessary browser hacks, but I haven't had to use a table on any of my new sites in a year.
I would recommend CSS to anyone.
__________________
Maryland Website Design Solutions |
|
|||
|
Where time (clock ticks) and space (reserved memory) are limiting factors, CSS driven pages are more likely to receive thorough and quick parsing of the page markup and indexing of the content, with time and space to spare. Tabled pages require more memory and time to disseminate, and if the above limiting factors 'were' to apply, the job might not be done on the first pass.
Centralized control over presentation is both time saving and space conservative. All the styles can be stored in a hand full of files which will download once, and remain in the browser's cache for any length of time, making future pages download even quicker. Kgun mentions that the files are usually in the servers primary cache, as well, so first time visitors receive the advantage of faster downloading of your pages. CSS offers another real advantage when it comes to reducing the number of img tags in your pages, especially the skin graphics. Assigning background images in CSS is the easiest way to repeat graphics over an entire site, reserving img tags to just photos in the page that you want indexed. |
|
||||
|
The key words sushil mentioned was "based design." He didn’t mention that it was bad to use tables for tabular data. You still need tables. My general rule: if its something that looks like it belongs in Excel, it belongs in a table on your site. But as for something to base the design of the whole site on, XHTML/CSS I feel is best.
One common misconception among some clients looking for a website I’ve had is them wanting the whole site designed in pure CSS. Of course I opened my big mouth and said, HTML still has to be used, and they insist they have read that "pure CSS" or "all CSS" is possible and better, while they don’t realize by pure CSS we mean the styling. Now I keep my mouth shut and say...OK. Anyone else experienced this? We need to be careful how we post, for newcomers and potential clients both read forums. |
|
|||
|
Actually, regardless of what some claim, tables still have a solid place in some layouts, which are quite simply impractical to work with being fully CSS based. Hacks are not always accepted in practice, and they should not be taken for granted, using them is a unique skill on its own, as they ain't always obvious.
Equal-height column layouts with a header as well as a footer would be another example, and this is where i would say that it would be fine to use tables, as the known CSS methods are quite complex. But other then that, there really isn't a good reason to stick with tables for layout. It would be far better to avoid the cases where we would need to resort to tables. The place where it becomes problematic, is where we have rich containers with borders, that must be scratchable at the same time. There is a position based technique to do this, but tables would still be better when having older browsers in mind. The separation of content from style is not entirely possible yet, some layouts would still require extra markup, this would usually be in forms of division elements, like in the above technique. And again this is where we have a few arrogant web designers, wo criticize the use of "divitis", both the alternative is however worse, and note that screen readers as well as SEs simply ignore these additional divs, it dose however add a few bytes to the file-size. While there are some coding specific changes you can apply for better ranking, those are mainly focused on headings, emphasized text, internal links, as well as outgoing links. You should be using headings in the correct order, h1 for the main heading, h2 for subheading of h1, h3 for subheading of h2, Etc. There is no SEO releted benefit from using XHTML instead of HTML, or having a fully CSS based site instead of table based. Those are likely to be rumors started among novice designers.
__________________
The Blood of the Lamb is my Breakfast. |
|
|||
|
Can anyone here recommend any free tutorials for starting out with pure CSS designs?
I've always wanted to go heavier on the CSS, but I'm a Photoshop designer/slicer/html programmer type, and I can't wrap my head around using style sheets to set up a page the way I want it to look...even though I logically know it has to be do-able, as no one else seems to have a problem with it. Anyone, let me know - |
|
||||
|
Quote:
My favorite html/css/javascript website was quirksmode.org
__________________
James Weisbrod - programmer |
|
|||
|
I wouldn't recommend using photoshop for anything but grapichs, such as buttons, backgrounds etc.
Check out the links in my sig, as well as w3schools.com
__________________
The Blood of the Lamb is my Breakfast. |
|
||||
|
Quote:
But for all practical purposes... (in some cases it's the only practical option) tables are fine... especially when used with the css attribute... table-display:fixed to speed the rendering of page elements... you will know you are doing something very "wrong" if you start nesting your tables one inside the other. jmo...
__________________
James Weisbrod - programmer Last edited by MrGamm; 02-01-2009 at 08:41 PM. |
|
||||
|
__________________
Join free dating sites and meet single people without paying a penny. |
|
||||
|
one cannot say that a site will load more gracefully if you use DIVs over Tables.
__________________
Join free dating sites and meet single people without paying a penny. |
|
||||
|
example? you can't build a beautiful looking site that has been cut out of PSCS3 that has been cut to use DIVs and have it render the same or properly on every browser. nor can you do it within a reasonable time frame. you always have to hack the hell out of it. and why?
__________________
Join free dating sites and meet single people without paying a penny. |
|
||||
|
oh, anothe example, just yesterday i was using code that makes display tabs display based on which tab you select. anyways, when i placed an image into the "div" the image overlapped the div border. to me, that's crap, if it was in a table it would have rendered properly.
__________________
Join free dating sites and meet single people without paying a penny. |
|
||||
|
Quote:
well you need to research a little more. i've designed terribly coded sites that to this day still rank the highest in the serps way over other so called 'properly coded' sites.
__________________
Join free dating sites and meet single people without paying a penny. |
|
||||
|
Quote:
google prefers relative content based on keyword searches so as to provide a meaningful experience to the user or the user will go to yahoo or msn or alta.
__________________
Join free dating sites and meet single people without paying a penny. |
|
|||
|
The benefits from using the standards correctly, far outweighs the negative aspects.
Using CSS based layouts not only increases productivity, it also makes it much easier to maintain your site. It has the added benefit, that if your client for some reason chooses another designer, then he/she will be able to get right to work, with minimal research into the code. It has been well documented that table based layouts generally use more markup then css based layouts, there is no reason for me to go into this. But that's not the point, tables should not be used for layout purposes, doing so is just wrong. You only have to "hack the hell out of it", if you code for older browsers, but coding for such browsers is your own mistake. Most bigger players are starting to phase out support for older browsers, such as IE6, and with good reason. Search engines dont prefer css based layouts, but there are other benefits, which should be enough to get any serious designer, to pick up web standards. Further more, if the image "overlapped the border" then morestar did something wrong. Todays browsers do support the standards, there are some well used methods to create both tabs, drop-downs, and navigation menus. But it takes time to learn, its however essential that web designers learn to use these standards as soon as possible, you cant expect to be taken seriously if your code looks like something from the 90s. Its also generally considered a bad practice to have Photoshop, or any other app for that matter, generate your code. I wont rule out that they have some use in the future, but currently they just mess up your code, which you dont want to happen.
__________________
The Blood of the Lamb is my Breakfast. Last edited by DBLL; 07-23-2009 at 04:41 PM. |
|
||||
|
Quote:
look at this site: http://www.womencertified dot ca i've been editing this site for days now, trying to add and take away new elements. the site is coded in nothing but DIVs and CSS, and it's brutal. There is no way it should have taken me this long to edit a site, not only that, im only editing the home page which again is in DIVs and CSS, oh the holy DIV/CSS combo. well no, it's brutal code and i suppose now the CSS/DIV pundits would say well, i guess THAT particular DIV/CSS coding isn't good and should be cleaner. I would say, code in tables and get the job done right once AND let the future editor be able to tell what he's doing... P.S. that site is NOT my coding, I've had to hack it to add elements to it and was driven mad - ugh P.P.S. and my point? when ppl code in only DIVs and CSS you are getting their idea of how the code should be, margin this, padding that...once you try to go in and make edits you have to imagine what the hell the previous developer was thinking. When I use CSS to create a space at the top of the page to divide the top from the main content, i use a margin:20px, other people use padding:20 px, so which one is right? what's the standard? oh ya i know i can use whatever i want but that does NOT make it any easier for the future developer to know what i was doing now does it?
__________________
Join free dating sites and meet single people without paying a penny. Last edited by morestar; 07-23-2009 at 05:21 PM. Reason: URL problem |
|
||||
|
Quote:
When I code with tables, i never ever have a rendering problem. When I view my sites on an IPhone let's say, they always render properly. jokes
__________________
Join free dating sites and meet single people without paying a penny. Last edited by morestar; 07-23-2009 at 05:17 PM. Reason: clarity |
|
||||
|
Quote:
I work for a pretty big design company that has clients all over Canada, PLUS i've worked for and with a few other good sized designed companies and we've all used photoshop to mockup designs... come on now. An experienced designer can sift through what would be considered "bad" code and fix it. However, when I have PS generate my code the only attribute I need to remove is ID="Table-1"
__________________
Join free dating sites and meet single people without paying a penny. |
|
|||||||
|
Quote:
We are developing and maintaining these standards for a reason, we wouldn't have to develop these standards, if they didn't provide clear benefits above the old. Quote:
pitfalls. Usage of images to display textural content, is the worst mistake that any site can make, especially when those images only add to the page bloat. The mentioned site uses images for just about everything, and even to the point where its making it hard to navigate on the site, without accidentally hitting the wrong link/image. This is an example of a site which is being harmed by its own design and content, it likely doesn't even rank in the search engines, for its main keywords. But this is a subject which i could fill out a book about, not something i will go further into here. The site gives a deceiving impression to visitors, mainly due to the over-usage of promotional text and images, rather then providing visitors with actual content of value on the subjects. Lets hammer the below to bits, just for fun. Quote:
Are they trying to appear ridiculous on purpose? I mean Give me a break! The majority of users dont care about these promotional statements, they actually effect users negatively when done this way, because it just appears like the site is desperate to sell something that it doesn't have, it being competence. They even managed to misspell the message somewhere along the way. And they are trying to educate you about how to increase sales? Become WomenCertified? How ridiculous! They don't appear to know how to best represent their own company online, why would they know anything about marketing, when they include useless statements like that? They should know better! Admittedly, there is also a world outside the Internet. But if they want their website to be a success, then they need to understand the basic marketing principles, that apply on the Internet. Quote:
Your ipod is not relevant, its the developers of these devices responsibility to support web standards, its not yours to support the device. Quote:
Quote:
As i also wrote earlier in this post, you should understand the box model. Then it wont be hard to tell what other designers intended with margin/padding. These are actually some of the easiest properties to use, and you can't always use both, they often each have their own uses. You can sometimes, and thats where personal preference kicks in. Quote:
Clients are not aware about web standards, they rarely look at the code, let alone understand any of what they are viewing. This means that companies who already have an established reputation, will find it easier to get clients then someone who just opened up. Their marketing is often also better then that of those who focus more on standards and industry best practices. These companies also have good connections, including clients coming back, or recommending them to other companies, along with their established business name. Which all contributes to getting clients, but that will decrease as awareness of web standards increase. They are also likely to get criticized openly by competitors, for their lack of expertise in the area. You could compare it to a surgeon using sticky tape to close the wound, it may still work, but that doesn't make it the best thing to do.
__________________
The Blood of the Lamb is my Breakfast. Last edited by DBLL; 07-23-2009 at 08:40 PM. |
|
||||
|
oh nelly...im working right now, on a beautiful table based layout, using css for styles but will get back to you shortly...i've noticed you went a little off-track in your responses and just as a quick note, the site we are discussing (referenced in our two posts), is all DIV and CSS based and brutal but isn't that site supposed to be a part of the dream team? Well it's not and why is that? In my humble opinion it's because the designer created it with only DIVS and CSS AND according to his knowledge and strategies for designing in DIVS/CSS.
With tables, a cell is a cell. With DIVs, depending on the designers thoughts and desires, he can have a div coded at the top of the page and rendered 600 pixels down the page. How does that make my job easier? Plus that's a bit sneaky would you admit? A lot of people DIV code to have their links display at the top of the page when in the code their actually in the middle or at the bottom. I wonder if the SEs can tell there's a little deception there - and let us think we're getting away with it. <-- don't quote me on that though. i'll fully respond shortly and thanks for your input DBLL.
__________________
Join free dating sites and meet single people without paying a penny. Last edited by morestar; 07-23-2009 at 08:13 PM. |
|
|||
|
Quote:
It can also be said that its more friendly to include the content before the navigation links in the source, as well as promotional text and logos. Visually emparried would be ennoyed by constantly having to "jump" down to the content. Some SEOs also claim that it helps to increase the search engine placement, likely originating from back when google only indexed about 100kbs of the page. I havn't noticed much of a differance myself, after implementing it on my own sites.
__________________
The Blood of the Lamb is my Breakfast. Last edited by DBLL; 07-23-2009 at 08:53 PM. |
|
||||
|
im sorry but im currently working on a directory site using PHPLinkDirectory which is as most know coded with nothing but DIVs with CSS and I, being a developer for over 10 years, am having a sort of difficulty tracing the template in order to customize it.
I got an idea...
__________________
Join free dating sites and meet single people without paying a penny. |
|
|||
|
Add FireBug plug-in to your Firefox browser. It will help you trace parent elements and the inherited properties (or overridden ones) that flow down the cascade to the current element.
|
|
||||
|
however, you don't really need firebug whilst using tables...
of course i have to use firebug when im editing pure css based layouts. thank GOD for firebug...
__________________
Join free dating sites and meet single people without paying a penny. |
|
||||
|
Using CSS-based structure versus using table-based code is primarily personal preference due to ease of use. In terms of ranking better using one over the other is very negligible based on a myriad of other factors. I wouldn't sweat over it.
As a webdesigner now using CSS converted from purely tabled-based design - I agree that there are just certain things that you have to use tables for, or tables are much more convenient for. Especially when coding modular designs for people who don't even want to look at one bit of HTML or for 3rd party software like Wordpress, vBulletin and the like. |
|
|||
|
I'm pure CSS, no tables allowed. Except for html emails, for some reason every time I have tried to make a pure css layout for an html email the various email clients don't render it properly. So to avoid the headaches I just use tables.
Also, coding with css usually generates less code which means the browser can read and display the page faster than it can when you use tables. |
|
||||
|
yes by .00039 seconds.
__________________
Join free dating sites and meet single people without paying a penny. |
|
||||
|
I think that the most significant factor between using CSS and Tables is the cleanliness of the code, it even outweighs the 0.00039 of faster loading time
__________________
James Cabrera - Web & Graphic Designer |
![]() |
|
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| For Hire : Affordable UK based ecommerce website design | sub_kovert | Services for Sale/Hire | 3 | 04-29-2007 07:58 PM |
| table less web design | subho | Graphics & Design Discussion Forum | 3 | 10-07-2006 01:41 AM |
| CSS Based Design | knuckels | Submit Your Site For Review | 7 | 05-22-2006 12:09 PM |
| UK Based CMS & Ecommerce Website Design | sub_kovert | Services for Sale/Hire | 0 | 05-11-2006 01:32 PM |
| Book on Home-Based Website Design Business | intrepid | Internet Industry | 4 | 09-14-2004 03:45 AM |
|
WebProWorld |
Advertise |
Contact Us |
About |
Forum Rules |
MVP's |
Archive |
Newsletter Archive |
Top |
WebProNews
WebProWorld is an iEntry, Inc. ® site - © 2009 All Rights Reserved Privacy Policy and Legal iEntry, Inc. 2549 Richmond Rd. Lexington KY, 40509 |