Seven Reasons to go Table Free – Tujuh alasan untuk membuat website Anda bebas tabel

February 5th, 2010

Sama dengan pertanyaan seputar “Saya pingin web saya ada di google urutan paling atas…“, pertanyaan soal table ini juga familiar di telinga (eh, email dinx) akhir-akhir ini.

Kenapa sih emangnya kalo web gue masih pake table?
Apa bedanya? Wong gue buka sama-sama aja hasilnya?
Table? Apaan tuh?

Mirip dengan pertanyaan seputar: “Kenapa juga gue harus ribet hire orang untuk bikin web yang katanya pake valid coding segala rupa, wong pake software gratisan gitu juga bisa,”

  1. If you’re using tables for layout then you’re mixing presentation with content, so your bandwidth usage is higher than need be, as for every page your visitors view, they have to download the same presentational data again and again.
  2. Redesigns are a lot harder than they need to be. Since tables can only be laid out on screen one way, if you want to change the layout of a table site, you have to change your tables in every single one of your pages. Not a nice job. With a full CSS site, all you need do is change that one CSS file.
  3. Tables really don’t help accessibility for viewers with disablities. Although your layout may look logical displayed on screen, the order in which it will be read by, say, screen reading software, may be very different. Many countries now have their own laws stating that websites must be accessible to all.
  4. Likewise, people visiting your site using PDAs, mobile phones, and the like do not have the screen space that your big flashy table layout demands. A well written CSS site will generally scale far better to smaller and larger screens than a comparable table layout will.
  5. Tables are just plain complicated to look at in HTML. Before you even get to any content inside them you’re at three levels of indentation.
  6. Tables can hurt search engine ratings. If you’re using a “classic” left hand navigation table, your navigation will be placed before your content in your HTML file. Because Search Engines generally place more importance on the things nearer the beginning of a page, the chances are your content will be largely ignored.
  7. Tables can take longer to display correctly than CSS. If you use Internet Explorer, you’ll have seen this many times when loading tabled sites. While everything on the page is downloading, the IE will keep rerendering, bouncing the contents of the page back and forth until the download is complete and it knows where to place everything..

Yang lebih straight to the point, bisa disimak di bawah ini:

  1. Tables are usually more bytes of markup.
    (Longer to download, and more bytes of traffic for the host.)
  2. Tables are usually slower to layout for the browser.
    (Takes longer for the user to see anything on the page.)
  3. Tables usually prevent incremental rendering.
    (Takes longer for the user to see anything on the page.)
  4. Tables may require you to chop single, logical images into multiple ones.
    (This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
  5. Tables break text copying on some browsers.
    (That’s annoying to the user.)
  6. Tables prevent certain layouts from working within them (like height:100% for child elements of <td>).
    (They limit what you can actually do in terms of layout.)
  7. Once you know CSS, table-based layouts usually take more time to implement.
    (A little effort up-front learning CSS pays off heavily in the end.)
  8. Tables are semantically incorrect markup for layout.
    (They describe the presentation, not the content.)
  9. Tables make life hell for those using screen readers.
    (Not only do you get the other benefits of CSS, you’re also helping out the blind/partially-sighted. This is a Good Thing.)
  10. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.
    (Have you seen CSS Zen Garden?)

Pengalaman Anda sendiri, gimana?