Tableless and Tables Design

Have you heard about Tableless and Tables Design? I asume that most of you already expert about Tableless and Tables Design. However, I still try to explain about Tableless and Tables Design a little bit.

Both of Tableless and Tables Design are used for making a table in HTML file. However both of them have its own way to do that. You may be already familar with Tables design. Tables desing use table tag (<html>) in html to make table. On the other hand, Tables design dont use table tag but use div tag and css in order to build a table.

Let see an example code Tables Design:

<table style="width:100%;" cellpadding="0" cellspacing="0">
	<tr>
		<td style="width:10%;background-color:red;"><b>One</b></td>
		<td style="width:30%;background-color:green;"><b>Two</b></td>
		<td style="width:20%;background-color:blue;"><b>Three</b></td>
		<td style="width:30%;background-color:yellow;"><b>Four</b></td>
		<td style="width:10%;background-color:magenta;"><b>Five</b></td>
	</tr>
</table>

Then let see the code of Tableless Design:

<div style="width:100%;float:left;">
	<div style="width:10%;float:left;background-color:red;"><b>One</b></div>
	<div style="width:30%;float:left;background-color:green;"><b>Two</b></div>
	<div style="width:20%;float:left;background-color:blue;"><b>Three</b></div>
	<div style="width:30%;float:left;background-color:yellow;"><b>Four</b></div>
	<div style="width:10%;float:left;background-color:magenta;"><b>Five</b></div>
</div>

Both of above codes will have similar result. See bellow picture.

Tableless and Tables Design

Tableless and Tables Design

It is depend to you, which one you choose. However, several people choose tableless design because of several reasons:

  • Tables are usually slower to drawn for the browser.
  • Tables are usually need more bytes of markup.
  • Tables usually avoid incremental rendering.
  • Tables prevent text copying on some browsers.
  • Tables may require to chop images into multiple ones.
  • Tables stop certain layouts from working like height:100% for <td> tag.
  • Tables are not working well with screen readers.
  • Tables are semantically incorrect markup for layout.
  • Once you know CSS, tableless design faster to develop.
  • Tables make redesign MUCH harder.

That is it about Tableless and Tables Design. Hope this Tableless and Tables Design article can help you alot.

http://septiadi.com/2011/04/11/tableless-and-tables-design/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: