Blog > detail

Just my tiny mind

Tableless and Tables Design

26-2-2012 Admin General 2 Comments

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 () 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:


</pre>

<table style="width: 100%;" cellspacing="0" cellpadding="0">

<tbody>

<tr>

<td style="width: 10%; background-color: red;"><strong>One</strong></td>

<td style="width: 30%; background-color: green;"><strong>Two</strong></td>

<td style="width: 20%; background-color: blue;"><strong>Three</strong></td>

<td style="width: 30%; background-color: yellow;"><strong>Four</strong></td>

<td style="width: 10%; background-color: magenta;"><strong>Five</strong></td>

</tr>

</tbody>

</table>

<pre>




Then let see the code of Tableless Design:

</pre>

<div style="width: 100%; float: left;">

<div style="width: 10%; float: left; background-color: red;"><strong>One</strong></div>

<div style="width: 30%; float: left; background-color: green;"><strong>Two</strong></div>

<div style="width: 20%; float: left; background-color: blue;"><strong>Three</strong></div>

<div style="width: 30%; float: left; background-color: yellow;"><strong>Four</strong></div>

<div style="width: 10%; float: left; background-color: magenta;"><strong>Five</strong></div>

</div>

<pre>



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


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% fortag.

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.

Tableless and Tables Design Tableless and Tables Design Tableless and Tables Design

Tableless and Tables Design Tableless and Tables Design Tableless and Tables Design

Tableless and Tables Design

word word

Tableless and Tables Design

Tableless and Tables Design

Tableless and Tables Design