HTML5, CSS3 with tables

Posted on 2013-11-13
Medium Priority
Last Modified: 2013-11-20
I am a bit new in HTML5, css3.

Till now I have been using tables for my web pages. I am not very good in divs.

Now I need to use HTML5 for one of my projects.
I need to know if I still use HTML TABLES for web pages will they are suitable or recommended.
Or I need to learn divs.

Also, if used html tables will the page is consider as workable on mobile devices
Question by:yadavdep
LVL 45

Expert Comment

by:Chris Stanyon
ID: 39644614
The simple answer is DO NOT USE TABLES for layout at all! This is a technique that was popular a decade ago, but using it now will cause you more problems than it's worth. It will not work properly on mobiles, as it's very difficult to create responsive sites using them. You will also perform very poorly with the Search Engines. Your whole site will effectively become sub-standard

The correct way to code a site is to use well-structured HTML and CSS. DIVs for layout are only one of many tools you have available to you.

Once you get your head around CSS based layout, you won't look back
LVL 54

Accepted Solution

Scott Fell,  EE MVE earned 840 total points
ID: 39644671
Beyond just html is making your site responsive in order to account for multiple screens on the same web page.  I use both http://getbootstrap.com/ and http://foundation.zurb.com/ for this.  However, at the core is a css grid.  You can start out making a simple page first, then go out to make it responsive.

The grid is basically pre defined css classes that create 12 columns in the case of bootstrap http://getbootstrap.com/css/#grid 

The grid's make help you because you can think of them as similar to a table.  Below is using bootstrap's css to create 2 rows where the top row has a wide left column and a narrower right side.  The bottom row is equal 3 columns.  Notice the class numbers all total to 12.  It is like paint by numbers.

<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>

Open in new window

LVL 53

Expert Comment

ID: 39645798
Modern layout using CSS3 and HTML5 has nothing to do with "div layouts" it is about semantic tagging.  There is a whole range of tabs with specific properties that make pages more dynamic, responsive, usable and most important accessible.

Table are for tabular data.  Using them for anything else is both semantically and technically wrong.  The pages will not be responsive; therefore not well suited for mobile. the pages will load slower.  The search engine rankings will suffer because of the lack of semantic integrity.

The div is not intended to be a catchall.  Its purpose is to be a carrier of block styling; thus it is a suitable choice for container or wrapper components of the content structure.  Correct modern design uses semantic tags like header, footer, article, section, nav, and aside.  Forms get laid out using fieldset and label.  All this is done to make the semantics clear for automated readers, used by the visually impaired.  The bonus is that search engine spiders are also blind, and if a blind person can easily navigate the site then so can the spiders and you get rewarded by quality indexing that boosts your page ranking in the SERPs.


Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question