Solved

HTML5, CSS3 with tables

Posted on 2013-11-13
3
553 Views
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
0
Comment
Question by:yadavdep
3 Comments
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 210 total points
Comment Utility
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>
<div class="row">
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>
  <div class="col-sm-4"></div>
</div>

Open in new window

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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.

Cd&
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

743 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now