Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


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
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 44

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

636 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