Why divs vs tables

Use table layout only to display the tabular information and not in all the areas. View All. Div Layout vs. Table Layout - Web Designing. Manikavelu Velayutham Updated date Apr 03, Most of the web designers directly chose the table-based layout for their websites. Next Recommended Reading. Windows 10 Vs Windows Visual Studio Vs Visual Studio Understanding Matplotlib With Examples.

It is not optimized to build structure. Using tables to build structure is quite intuitive. We see tabular data every day, and the concept is well known.

Columns are not squeezed under other columns as they are in a div-based structure. This adds to the feeling that using tables is safe. Table contains different tags: the table tag being the wrapper, tr for each row and td for each cell. The thead and tbody tags are not used for structural purposes because they add semantic meaning to the content. For readability, each tag is normally given its own line of code, with indention.

With all of these tags for the table, several extra lines of code are added to content. The colspan and rowspan attributes make the code even more complex, and any developer maintaining that page in future has to go through a lot of code to understand its structure. As we see from the example, the table-based layout contains more code than the div-based version. Imagine now if this difference in size stays consistent as the code base grows by a ratio as much as In a div-based structure, it is also possible to skip the menu div and use an unordered list ul as a container instead.

Nested tables are code smell that a website is stuck in table hell. The number of lines of code is endless, and the complexity is overwhelming. Nested tables are a poor substitution for semantically meaningful, block-level elements. Another drawback to tables is that they make it harder to separate content from design. This adds code to the HTML that should instead go in the style sheet. Excess code slows down development and raises maintenance costs.

Developers may not even understand their own code after a while. More lines of code mean larger file sizes, which mean longer download times. Developers should keep in mind new media, such as mobile devices, which usually have low bandwidth.

Websites will have to support media other than traditional monitors in future, and bad code limits the possibilities. A large code base has more bugs than a small one. Developers tend to produce a certain number of bugs per line of code. Because tables increase the code base, such structures likely contain more bugs than layouts with less code lines. In an ideal world, the same markup would be used for printers, mobile devices, screens and other media.

Using tables for structure provides less flexibility in moving columns around and hiding entire columns. Your user may want to put the side column at the bottom or view a printer-friendly version. With tables, this would require a separate page for each media , which means extra costs during development and higher maintenance costs compared to a div-based website that separates content and design.

Websites in div hell have more div tags than are necessary. The div tag is a block-level element that defines a section within a document. Divs are thus suitable for building the structure of Web pages.

The div tag is also used to describe content that cannot be properly described by other more semantic tags. When developers do not understand the semantic meaning of other block-level elements, they often add more div tags than are needed. Div-based structures have a much steeper learning curve than table-based structures. The developer must know CSS and understand the difference between block-level elements and inline elements, when to use floats and when to use absolute positioning and how to solve browser bugs.

Everyone knows what a table looks like, but divs are not as obvious. Using a div for structure can make a page more fragile when content is pushing the div to its limit. It can also force columns to fall under each other.

But this is usually only true for older browsers particularly IE6 ; newer browsers make content flow to the next column. Dealing with browser bugs can be a little tricky at first, but with experience developers can identify and fix them. Browser support for W3C standards is getting better and better.

With the growing popularity of Firefox and Safari and the introduction of Google Chrome , we are seeing a big fight over market share, which inevitably makes for better browsers. The biggest problem with div tags is that they are used too often. Divs should only be used to build structure and as placeholders for design elements when no other block-level elements can describe the content. The div tag is for logical groupings of elements.

True, using descriptive class and structure names makes the code more understandable, but using them for nested div tags is not always easy. It means divs are being used when semantic block-level tags would better describe the content; for instance, headings should be wrapped in h1 to h5 tags.

Writing semantic code usually reduces the code base; and less divs with floats helps keep browser bugs away. Of course, ids and classes can carry semantic values that no other tags have.

The problem is that these values are not standardized. Classes and ids that have semantic values added to them will never be a substitute for tags that have semantic values built in. Giving semantic values to classes and ids will dramatically increase the readability of code and help avoid bad class names like bigRedText. Also, search engines such as Google use complex algorithms that use the semantic information in classes and ids. One interesting technology is microformats, which are built on the idea of semantic classes.

I use tables for tabular data, NOT for general layout. Life is just too short. On the SEO front, the bottom line is good content tagged correctly. Unfortunately, I see a lot of this in sites that use tables for layout. The only difference I see is that div layout can make something very beautiful with less code because of the high dependence on css as may be compared to using tables, but for purposes of s.

Many web designers may say div layout is better for s. Good s. Else div or table has no big impact on s. Just food for thought… a websites table layout is probably a few kb, not even as large as any images that need to be loaded on the page. It is my professional opinion that the benefit from switching from table to div will provide minimal, if any SEO benefit at my current time of writing.

Your email address will not be published. Using competition analysis is one of the most prominent ways to choose a keyword. Examining the on page factors and Tweet Share 3.