HTML5, CSS3 with tables

Posted on 2013-11-13
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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 43

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 53

Accepted Solution

Scott Fell,  EE MVE earned 210 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 and 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 

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

691 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