CSS HTML

HTML – CSS – Why not use tables for layout in HTML

HTML Layout :

  • The <div> element is a block level element used for grouping HTML elements.
  • While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level.
  • Although we can achieve pretty nice layouts with HTML tables, but tables weren’t really designed as a layout tool.

HTML Layout Elements :

Websites often display content in multiple columns (like a magazine or newspaper).

HTML5 offers new semantic elements that define the different parts of a web page:

<header> – Defines a header for a document or a section
<nav> – Defines a container for navigation links

<section> – Defines a section in a document

<article> – Defines an independent self-contained article
<aside> – Defines content aside from the content (like a sidebar)
<footer> – Defines a footer for a document or a section
<details> – Defines additional details
<summary> – Defines a heading for the <details> element

HTML Layout Techniques : 

There are four different ways to create multicolumn layouts. Each way has its pros and cons:

HTML tables
CSS float property
CSS framework
CSS flexbox

Why not use tables for layout in HTML?

  • It’s not fallacious at all because HTML was designed intentionally.
  • Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced.
  • Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element.
  • After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.
  • That tables are in fact less maintainable should be obvious.
  • Using tables for layout means that changing the corporate layout will in fact mean changing every single page.
  • This can be very expensive. On the other hand, judicious use of semantically meaningful HTML combined with CSS might confine such changes to the CSS and the pictures used.
  1. Deeply nested <div>s are an anti-pattern just as table layouts. Good web designers don’t need many of them. On the other hand, even such deep-nested divs don’t have many of the problems of table layouts. In fact, they can even contribute to a semantic structure by logically dividing the content in parts.
  2. “Most people” don’t matter. Professionals matter. For professionals, table layouts create many more problems than HTML + CSS. This is like saying we shouldn’t use GVim or Emacs because Notepad is simpler for most people. Or we shouldn’t use LaTeX because MS Word is simpler for most people.
  3. Search engines search for relevant data. While tabular data could of course be relevant, it’s rarely what users search for. Users search for terms used in the page title or similarly prominent positions. It would therefore be logical to exclude tabular content from filtering and thus cutting the processing time (and costs!) by a large factor.
  • It IS a LOT harder to read. That’s not up to opinion. There’s just more nested tags with no identifying marks on them.
  • Separating content from presentation is a good thing because it allows you to focus on what you’re doing. Mixing the two leads to bloated pages that are hard to read.
  • CSS for styles allows your browser to cache the files and subsequent requests are much faster. This is HUGE.
  • Tables lock you into a design. Sure, not everyone needs the flexibility of CSS Zen Garden, but I’ve never worked on a site where I didn’t need to change the design a little bit here and there. It’s much easier with CSS.
  • Tables are hard to style. You don’t have very much flexibility with them (i.e. you still need to add HTML attributes to fully control a table’s styles)
See also  [ Solved -5 Answers]CSS- HTML- How to align content of a div to the bottom

Layout flexibility

Imagine you’re making a page with a large number of thumbnails.

DIVs:

If you put each thumbnail in a DIV, floated left, maybe 10 of them fit on a row. Make the window narrower, and BAM – it’s 6 on a row, or 2, or however many fit.

TABLE:

You have to explicitly say how many cells are in a row. If the window is too narrow, the user has to scroll horizontally.

Maintainability

Same situation as above. Now you want to add three thumbnails to the third row.

DIVs:

Add them in. The layout will automatically adjust.

TABLE:
Paste the new cells into the third row.  (Of course, if you’re generating the rows and cells with server-side scripting, this probably won’t be an issue.)

Sample Program :

Html Code
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head> 
<title>{DYNAMIC(TITLE)}</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" />
 <link rel="stylesheet" type="text/css" href="./styles/base.css" /> </head> 
<body> <table cellspacing="0"> 
<tr>
 <td><!-- Page Title --></td>
 <td> <table> 
<tr>
 <td>Navitem</td> 
<td>Navitem</td> </tr> </table> </td> </tr> </table> 
<table> <tr> <td><!-- Page content --></td> 
<td><!-- Sidebar content --></td> </tr>
 <tr> <td colspan="2">Footer</td> </tr> </table> 
</body> 
</html> 

About the author

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

1 Comment

Click here to post a comment

X