Likewise I seem to see a lot of likewise ambiguous clamoring about the change that CSS brings with little reason to change. Tables have proven themselves and Im going old school. CSS, CSS 2, CSS 3 are often quite confusing. And yes it is true that you dont much need extra code to get things to work for IE. It totally contradicts the argument that you can completely change the layout with only css, as if youd want to put one item before another. Mark your site would be very easy to code with a css layout. document.getElementById( "ak_js_1" ).setAttribute( "value", ( new Date() ).getTime() ); Your email address will not be published. The person usually chose a complicated path to solving the problem when a much simpler path existed. Im not logged into the site right now, but next time I am, Ill see if I can fix it. How to create X and Y axis flip animation using HTML and CSS ? Perhaps this is the reason this debate keeps going on, because this change doesnt look like progress to a lot of people and they feel the benefits dont really outweigh the intuitive design of tables that make design a lot easier for beginners. Then you can use divs inside your table. Fixed positions make things more flexible? Ive linked to this article in a post as part of a project Im doing on web design styles. Just for the entirety of your layout. To design in CSS is far better, by the subject of order, maintenance, accessibility, navigability and thousand reasons more. Theyre much easier to use now. I know there are workarounds. CSS (divs) requires too many hacks to work cross browser Entirely false. Learning to layout an entire site with divs and css is the hardest part, but I promise itll be worth it. Replacing one with the other will lead to unnecessary complication. Better Website Speed For a website to function efficiently, it should have a faster load time. Your logo image can either be a background image on the header div thats not repeated or a regular image inside the div. So, its important to ensure faster speed. Much of using css for layout is realizing that you dont need to do as much as you think. The same isnt true if youre using divs. In order for a browser to render a page built with tables it needs to read the code on the page twice. Im not questioning the benefits of CSS in general. It will work equally as well, and only take seconds to accomplish. No technique is designed to be used in isolation. Chris your first comment seemed to indicate you preferred tables over css. External style sheets have some tremendous advantages: You can define the style sheet in one document and have all the HTML files refer to the CSS file. Thanks! As for the I dont need any extra code to get stuff to work for ie when using divs and css, really is that so? Learn more about Teams It sounds like youre using tables the same way Im suggesting is fine. It has nothing to do with other tools. To each their own in regards to tables. It doesnt mean youll make the error, but more chances exist. Im amazed this conversation still exists yet it seems every few weeks I see another post proclaiming we should all go back to using tables for site layout. Its pretty common to do when first learning css. Easy to learn: JavaScript is easy to learn. I can understand your frustration, but its not the fault of css. 5. This forces me to go and adjust the width and height and modify margins and padding in EACH div. Thanks for the online references, Steven. CSS works differently on different browsers. Maybe I just havent searched the web enough. The first thing we need to do is sort out the spacing/layout default table styling is so cramped! Go to Table Properties > Row > Enter a value in the Specify height box. A-143, 9th Floor, Sovereign Corporate Tower, We use cookies to ensure you have the best browsing experience on our website. Having developed and worked on sites both ways Im 100% certain structuring your layout with tables is not the way to go. I am currently a consultant with an enormous company that forces us to support IE6. Long Run Maintenance 5. w3c standards are useless 6. structure and content css vs tables round II. Specifically, it would take more than one div to create a row cell structure so when you need to display data in that structure its actually exactly the same amount of html whether you use a table or nested divs. Justin, apparently I named this post well, since the debate never seems to die. I think not. Web designers needs to use few lines of programming for every page improving site speed. HTML tables impose a more rigid structure on the content than a div. If you want your page to behave like a table or part of it, use a table. Personally I think until we get to the point where we can load a page before someone finishes clicking the link to that page theres room to improve. This process allows me to offer fixed price websites without a lot of risk that Im going to have to eat a lot of hours resolving cross browser compatibility issues. Everything should be able to reflow the way you want with css. If you are designing using CSS for layout, cool! To remove double borders, take a look at the example below. I totally thought this debate was long dead, but hid a road block and was procrastinating so I thought I would google random stuff and found this. I had not heard about this controversy, being a WYSIWYG kind of guy. But again, if I dont see the overwhelming benefits, I wont don my armor or sharpen my weapons. Eventually it works, but at what cost? The easiest way to create a table of contents is to use the built-in Good Article and a lot of gold in these comments. CSS (divs) is hard to learn Simply not true. There are also dozens of other methods I didnt mention. True. You can still develop an accessible site with tables. The places where this occurs has problems with that flow. Research another option instead of a table for displaying the Then I format the text in CSS adding padding and margins where needed. Lastly Id like to say that I dont think problem is with tables or divs, but what html has to offer, there isnt really anything specific for that type of design, tables werent meant to be used for layout but data instead, there hasnt been anything until now with css3 and css3-grid positioning perhaps http://www.w3.org/TR/css3-grid/. Advantages of OS Maps (1) Shows static long-term features. However, I dont think thats the main reason to choose a css layout over a table-based layout. The separation of content and style makes it easier to adjust pages and styles. First Im glad to see you making the switch. Thanks Kevin. So if you feel strong emotions regarding CSS layout, dont respond. Second best would be to have a KNOWN set of definitions for how a browser brand will render a certain statement, then we can generate the css file according to what browser, but thats a work around. The limit isnt the language, its your current skill level in using the language. If I throw out a website which has no padding or un symetrial or miss-aligned text I would be asked to start over. Thanks for this. I think many people who spent the time learning how hold on to that knowledge instead of trying to learn the css way and in holding on to the known create arguments to defend their use of tables. And, then I can see what theyve done with the code as far as CSS goes. The more professional sites are *usually* built using div/css scripting and now table cells as most sites require absolute positioned content which most sites are not using. The posts arent just about the code, but I do provide the basic html and css I use now for a 3 column layout. When people are having trouble getting a css layout to look the same across browsers its usually more to do with the skills of the designer than with css itself. I dont want to use tables but Im finding it harder and harder to justify not using them. Where layout is concerned though, I think the cons of using tables outweigh the pros and so favor using css. Unfortunately, by using tables I think increased load time and perhaps SEO unfriendliness of my code are stumbling blocks to my future success as a web designer. Those arguments alone should be enough to tip the scales in the argument. For Row height is select Exactly from the dropdown. Yes, but you can get it done just as quickly with css. Graphics are easier in CSS3, thus making it easy to make the site appealing. Theres simply less code to create a div than there is a table with a row and cell. Thanks Emma. Hopefully people will start accepting table-cell or something similar. The algorithms used for ranking most often are content and inbound links. Spanish is a beautiful language that many people use to communicate quickly and effectively each and every day. Its a great way to learn. Anyway, the real reason I wanted to comment here is because I think it is hilarious that Ive been reading people bashing table layouts and saying they cant stand any website that uses tables, then I view the source code and they are commenting on a page that uses tables! With people employing a batch of various range of smart devices to access websites over the web, theres a requirement for responsive web design. With a table-based layout the only way this would be possible would be to go into every page of your site and change the underlying structure. Maybe Ill have to write a post on styling tables. They dont need a lot of fancy features or tons of content. LOL, Im not advocating tables b/c they are infintesimally slower then divs. Theres nothing wrong with how you got here. IE sucks and makes my page look a pile of crap. Nice presentation by the way. One instruction can control several areas which is advantageous. Compared with traditional tables, web pages using Div + CSS technology are more friendly for search engine indexing. Now lets get to some of the myths on both sides that keep this debate going. Time is money. Space on the server for all of my clients sites is generally 1/16 of capacity. Also I said speed isnt the main reason for choosing a css layout over a table-based layout. My guess as to why they didnt learn it as well as you is because its actually not intuitive as you say, especially when trying to implement a grid shape with 3 independent blocks. I dont care what anybody says. Two common formats are: Key-Value pairs fast read and write but not optimized for lookup. For I cant tell any discernable speed difference between a table layout and a CSS layouts load time. This site is simple and fantastic, thanks for making it easy to read your content. One debate Im honestly curious about is the best way to go about table type content with CSS, such as using the actual table properties, using display: inline, using float: left, etc wheres that write up? (i know theres gotta be one but thats almost another argument for CSS over tables multiple ways you can go about it even). Even a simple html site can utilize include files for repeating blocks of markup. They use less code. As far as other people having the same issues with css, I do agree that happens. Your 2-column layout example could easily be accomplished with a .Net master page. As you mentioned, pages built in tables have to load twice (something I didnt know until reading this post) add to this that the example you showed: clearly illustrates how much extra code is required for tables. and how painful it is just to align a freakin div on the middle of a page, align text with a image? Not so much about being able to have your changes update across the site, but on the single page itself. I also believe the opposite, theres no point using table rendering if you DO want them to be independent. At least my code doesnt use tables for the site layout. CSS is better in both theory and practice. One thing Ive noticed in your tutorials is that your not very accurate with alignment. Sorry I didnt reply sooner John. The limiting factors isnt the language, its my ability to use the language. Im amazed that in 2013 people are still defending table-based layouts, but whatever. This post isnt a tutorial so I would need to know which one or ones youre referring to as well. Your tutorials are really only half-done and stop at the parts where css begins breaks down. Sure you can say they just need to learn more, but sorry, they didnt. There is no drag and drop anymore. If you look at the source code of most sites (especially the ones you like) youll discover that most and nearly all use css for page layout. A 10 MS difference is meaningless. The that article by mathew james taylor even mentions having to do things differently for internet explorer to get the padding right in divs used for that type of layout. Your email address will not be published. I think tables were a great way to layout a website once upon a time. Divs are like blocks that stick together when near each other, but with a little pull you can separate them and do something else with them. Yet every few months someone else pops in here to tell me why Im clueless and to argue in favor of table-based layout. Accessibility issues arise more frequently due to excessive coding ok so this can be attributed to bad coding but its such a common issue that it has to be taken into account. I had my old table based page done in 1/10th the time that Ive spent just trying to find some CSS code that accomplishes what my old header table didand when I started it I knew NOTHING about tables. Required fields are marked *. You can make css work with IE and it really isnt hard. Tables and grids are not the same thing in web development. Thats not the case. The load time though, is now reason enough to recommend css over tables for seo. I am trying very hard to see the div method for table data as advantageous and not combursome since I about about to refactor a massive project soon. I feel like one of the reasons that tables are still so widely used are the WYSIWYGs. Im not sure why people think it takes a lot of time to get things working cross browser. Its less-influenced by personal biases and emotions. Both my table and div layouts use css equally. Style adjustment is more convenient. Saying things like, all people who use tables are quite frankly is absurd. Hi Jennifer. You dont need 3 columns in your header. I never broke any of your layouts or created display bugs in whatever you produced. I feel the same about maintain tables-based sites. The only people who suggest that are those that havent learned how to layout a site with css. My question to you is Why frame this debate in terms I think making your structural elements independent is the better option. I just think css is a better way now for the reasons mentioned in the post. The reason people are still defending table based layouts is because tables are the correct SHAPE for most client specifications, not independent blocks floated to the left, or independent blocks with absolute positioning or independent blocks using any other trick to make them seem like they cooperate. What were you supposed to use? I will use them to learn more about CSS. Some of these advantages are: 1. However if you dont need this right away I am planning a post on setting up a 2 column layout with css in the next couple of weeks. If youre having to spend the vast majority of your time finding workarounds for IE then youve probably been doing something wrong. Same thing with the issue youre having with css. Teams. We needed three sets of tags to present some content as opposed to the one set of div tags. On the other hand, judicious use of semantically meaningful HTML combined with CSS might confine such changes to the CSS and the pictures used. Over the past few years Ive been slowly converting them to divs and CSS. Notepad is for pros. Home / Blog / CSS / CSS vs Tables: The Debate That Wont Die. It looks promising and hopefully will be the way forward from now on, getting rid of both the ugly table and div mess once and for all Id be interested to know what you think of it. I really resented (and it sounds like many of you do too) all the time I had to spend to get a site to look as it was intended for ALL users. How to override the CSS properties of a class using another CSS class ? Thats not an argument for tables in general, but it is an argument for me to continue to use tables for my small business clients who wont pay a lot for a web site, and will not get enough traffic to benefit from div based techniques. WebAdvantages of CSS3 CSS3 provides a consistent and precise positioning of navigable elements. The conclusion is I dont know the language well enough to communicate in it. 4. I do think more code means more chances of making a show stopping kind of error. How does it suggest we should use tables? How to use CSS in different dimension (CSS-in-JS) ? WebUsing tables for layout means that changing the corporate layout will in fact mean changing every single page. Just change the template file. Nothing you said is true and most of it doesnt make any sense. What the css vs tables debate is really about is whether or not to structure a web page with tables or divs. If I misinterpreted that I apologize. it could also be your own code or more likely that your code and my code arent working well other. Sure you can move stuff around easier with divs just in case you need to in the future, but nobody ever does. Advantages and Disadvantages Determining which extent type to use, depends business requirements and perspective. I think your experience is similar to what most people whove made the transition from tables to css go through. I think grids are great, but I dont think you should create them using html tables for the reasons I mentioned in this post. Even that doesnt work when they are not all exactly the same font size with no flow. Im not disagreeing with anything you say. Outside of some special occasions you should never have to resize a div or its margin and padding because you updated the text inside of it. I think theres more potential for errors with tables, but I know there are people who can code a search friendly site thats still table-driven. How to check which tab is active using Material UI ? I need to write special code for IE? I thought my question BTW why css layout over table layout' was clear from the context but apparently not. Id rather switch my page to tables, than screw around with IE. Do a search for css vs tables or similar and you can find a lot out there. This is what Dreamweaver template files do. Its more in how you code it where I dont think html tables are the right approach. Dont blame the language. And I never use some software package to do it for me unless I wrote that package myself. The problems I run into are on updates: adding a few lines here, and changing the text there. Is there a way I can pay someone to turn this same homepage design into a total CSS design? There are SOME layouts that to use entirely CSS requires an inordinate amount of extremely messy code to represent. What I will say though is that every person Ive ever met who was equally capable at using both css and tables chooses to use css. should be collapsed into a single border: If you only want a border around the table, only specify the border property for Its easier because youre more familiar with using tables. You can probably also wrap the code in a blockquote. I understand people have old code and sometimes they just need to fix it. When I first learned how to develop a website I learned to build them with tables like so many others. Let us have a glance on the benefits and drawbacks of CSS. CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers. Calm down. If youre constantly having to fix old code though, I would recommend looking into the feasibility of redeveloping the site. divs vs tables RIGHT! Let me start by letting you know I fall on the css side of things. Sorry if it came across like I was against tables completely. WebDisadvantages of tables. Most of the time when someone presents code showing the complicated css they needed the problem was their general approach. WebW3Schools offers free online tutorials, references and exercises in all the major languages of the web. You pointed out that table cells dont work independently. Divs can do some things table cells cant and they cant do some things well that table cells can do easily. Ive been doing web design since the beginning of the internet as a hobby and now professionally and I like a combination of both worlds. Even if we accept the argument that learning to use divs is difficult that doesnt make tables a better approach. By the way sorry the code in your comment didnt display. I could create tables just as fast as anyone with css, if youre not using some noob program like dream weaver. It doesnt once you know the one or two places where there could be an issue. I hope that helps answer some of the questions. The advantages with using divs are essentially counter to the problems with tables described above. They impose a more rigid structure than divs. Id have to see the css youre using to understand why youre having problems. And heres what Im referring to you saying in your post: The problem most people have when learning to use divs is trying to force them to act like tables instead of allowing them to be what they are.. Which is why Im not one to generally make that argument. Thats why this method is useful for testing or previewing the changes, and Do I have to have a separate div for each line? I use it and love it. The argument is about how to structure a web page. .Net has master pages and user controls which are ideal for repeating blocks of code. The only time I ever use tables anymore is to quickly horizontally and -vertically- oppose an image or something else on a temporary coming soon type page. That would be a debate between using css or html attributes for presentation. Tables can be part of your layout, but they shouldnt make up the entire layout. No technique is designed to be used in isolation. I have an unorthodox, perhaps unstandardized approach to web design. Outlook 2007 has a brain-dead rendering engine, so if youre producing HTML e-mails, you need to use tables. With CSS, what works with one browser might not always work with another. Learning at write CSS layouts can be tricky, especially if you become familiar with usage tables, but here's why CSS is your best programming bet. This means you dont have to do a lot of tedious work. As far as it being easier for you to code it with a table now, thats probably true. http://www.taylor-graphics.net/eye_clinic/. You cant break out of the rigid grid easily. To compare we really need to look at sites that are well developed on both sites. If youre asking about the former then Id say go ahead and use a table when youre presenting data in columns and rows. Thats crazy. I dont, however agree that the only way to make things work for IE is tables or even that its easier. I hope this will show some good ways to the others. That leads to easier maintenance, more freedom in design, and quicker load times. And now its 10 years later, 2019, WYSIWYG editors are no longer WYSIWYG but a complicated and incomprehensible hodgepodge, only one of which automatically adjusts for the many mobile device and display sizes, loading time is irrelevant and Im about to do a site with tables. Taylor Graphics, LLC Return on Investment 4. I dont think search engines really care if you use tables or css for the layout. Web1. Ive offered tutorials on the basic layout and Ive offered tutorials on things that can go inside that layout, but never all the code for an entire site. These bandwidth savings are substantial figures of insignificant tags that are indistinct from a mess of pages. Examples might be simplified to improve reading and learning. You also made my exact point as to where tables shine the most, and it has nothing to do with semantics. Its is also much quicker to use tables, and hey, yeah, once in a while it is nice to be able to glance at your code in a wysywig and actually see what it looks like. Also, Ive found no help in trying to figure out how to replicate the effect of a table layout where certain cells are merged. The phone number and search can either be wrapped together in another div thats floated to the right or they could each be floated to the right independently. Divs cant do what tables can as simple as that. I agree with you about css3-grids. 2. I find it hard to believe that anyone who honestly knows how to develop a site well with both tables and divs would ever choose to use tables. However please dont imply that css cant work for old sites or makes it more difficult to work on an existing table driven site. By using our site, you Use table-layout: fixed to create a I didnt create the overall frame to the conversation. Feel free to email me if you want. Tables will get you on the air with display compatibility quickly and with confidence. (801) 636-5158. Maybe its because I learned with tables when I was getting started but Divs are complicated and they absolutely do require more code most of the time when you consider practically each object needs to be assigned an ID and go along with a class . Also if you include the wrapper tags and the like you tend to end up with more tags for css than tables beause of all the work arounds you have to do. Take the time to learn how to use it. Take two developers, one who is fluent with tables and one who is fluent with divs, hand them a layered PSD file and ask them to code a web page to see who finishes first. My questions and concerns are genuine and not an effort to get CSS lovers to defend themselves. Maybe its not feasible in your case, but it might be worth looking into. In this case, it is almost impossible to get CSS only to render this as desired, either the width or the height of the side banner will be wrong, or the background image will appear to disappear or not be long enough, or be too long, or the content will bleed over into the side banner if you change the width of the browser. Tuples support multi typed-values, indexes, optimized for lookup, but a lack of schema flexibility. CSS has many advantages that enable developers to design a website. A square peg and a round hole can both be perfect examples of each and yet not work well together. What happens if it goes 1 pixel beyond the the available size? In other words you havent taken the time to learn how to layout a site with css. . Ive been studying the Eric Meyer CSS books, so I am picking up CSS quickly. Neither is true. Using
