HTML Table alternative with Div/Css for mobile screen web development

While working on web pages, people tend to use Table tag to format the content which is not recomended best practice. Instead of that you can use Div tag to place the content & use Css to style it correctly.

For example, you wanted to achieve on web form:

First Name : [First Name of Person]

Last Name: [Last Name of Person]

 

Using Table/TR/TD tag make sure it get correctly alligned and if wrapping happens, it wraps correctly. As I mentioned, Table tag is not recomended tags for mobile screens because of these reasons:

1. It generates too much HTML code which get transmitted to client everytime

2. Tables do not work well on limited size screens.

For more info on this: https://www.w3.org/TR/mobile-bp/#TABLES_SUPPORT

 

Instead you can use :

<Div style="float:left">First Name:</div> <Div> [First Name of Person]</div>

 <Div style="float:left">Last Name:</div> <Div> [Last Name of Person]</div>

 

I just have learned this new way of using Div in my project and I am posting this blog to help other who have are looking for Table tag alternative.

Comments

• Anonymous
  February 23, 2012
  So how do you align the first and last name in the 2nd column?