HTML table less designing guide

HTML table less designing guide

HTML table less designs are very popular among web developers nowadays. This has become especially more popular and significant because the W3C validation measures require that web designs be free of table elements. W3C marks that using table elements is deprecated and is a bad practice.

So, suppose you require a table structure and still you want to abide by the latest rules and trend. How do you think you can achieve this? If you are a veteran designer, you would be aware of list items. If not, dive in to this article and learn how to make html table less designs and still achieve a table like structure.

List items are our target elements. Yes, we would use list structures to form our table rows and columns and then use CSS to display it exactly like a table.

Starting HTML table less designs

The concept is very simple. Table rows or ‘tr’ is denoted by an ‘ul’ in this case, and a ‘td’ is denoted as a ‘li’. With this structure we can achieve as many rows and columns as we like.

Suppose we want to create a table containing two rows and three columns. The markup would be something like the following –

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

The above code gives us a table containing data in three columns and two rows. Now, to write the same markup for HTML table less designs; we need to alter it to something as the following –

After we have written this markup, the only thing that remains is the CSS. Without the CSS, the above markup would be displayed nothing better than a normal list style group of elements stacked one below the other. So, the perfect CSS magic code to make it a table is as follows –

ul li{
    display : inline;
}

After implementing the above CSS code our markup produces a perfect table. The magic of the ‘inline’ CSS display property is awesome. All list items under a single parent are displayed on the same line one after the other. This creates the table like effect.

HTML table less designs for div

Div structures in tables are also very common. Especially for creating column grids in a webpage; HTML table less designs are very important. Column structures are often needed and require a table like markup.

 

html table less designs how to

 

But, for div structures, you must use the CSS display style ‘inline-block’ type. This gives a block structure to the particular list item with a width and height. Thus the ‘div’ fits into the list item. After this, you can insert any element – form, image, etc. into this div.

HTML table less designs in IE

Internet explorer 8 and below, do not understand the CSS styling ‘inline-block’. For IE 8 or lesser, you must use some extra CSS styling comments for IE. The following CSS styling defines the ‘inline-block’ styling for IE especially.

/* for ie */
    *display: inline;
    zoom: 1;
    /* end */

That’s that for HTML table less designs using list items. Try it out for your own website or web projects and do let me know.

Comments are closed.