0

This is for Responsive Web Design, and I am looking in some existing code for how a form is done.

A coworker set the container div of First Name label and <input> and an "error message" under the input box, using CSS display: table and display: table-cell. He mentioned that it worked fine on Chrome and Firefox but had something weird on IE 8. Please see the simplified version on http://jsfiddle.net/DzEww/7/

This is so that the form can show nicely on any desktop browser and on mobile device that may be merely 320 pixel wide.

  1. First, I wonder, is this a preferred method to do Responsive Web Design?

  2. I wonder if we use CSS table and table-cell, then why don't we actually outright use HTML <table>, <tr>, and <td> to do it? (example: http://jsfiddle.net/DzEww/12/) It feels a bit strange to use CSS table display to show it and expect it to be a structure of a table but not mark it up as a table. If we do expect the structure to be a table, then why don't we just directly use <table><tr><td> to mark it up?

(Note that this form is really a good tabular of form labels and form fields, so using <table><tr><td> might actually make a lot of sense.)

nonopolarity
  • 146,324
  • 131
  • 460
  • 740
  • http://www.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/ – SPEC Apr 24 '14 at 07:30
  • This is one of those debates that never seems to go away. I use css for tables, but there are no real benefits to doing this! I guess it boils down to user preference. – Fizor Apr 24 '14 at 07:32

1 Answers1

0

The table element in HTML is a semantic structure to describes what data is. The table element should be used if the data is tabular (normally the datas that can be stored in a spreadsheet), it probably needs marking up as a table in HTML.

While table value of the display property, is simply a tool to set look of something like table in the browser, it has no semantic meaning. This technique has the potential of for creating complex grid layouts with ease.

Using a table element for layout tells a user-agent, “This data is tabular.” Using a bunch of divs that have the display property set to table and table-cell says nothing to that user-agent other than asking it to render them visually in a certain way, if it’s capable of doing so.

Of course, we should also take care not to use display: table; on a bunch of div elements when what we really have is tabular data!

4dgaurav
  • 11,360
  • 4
  • 32
  • 59