HTML5, CSS3 with tables

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
Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
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

Chris StanyonCommented:
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
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.