Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP Build a Simple PHP Application Adding a Contact Form Creating Input Fields

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Isn't it bad practice to use HTML tables to style a form?

I thought it was bad practice to use HTML tables to style anything. However, in this video Randy uses HTML tables for that purpose.

Am I wrong?

2 Answers

Kevin Korte
Kevin Korte
28,148 Points

Yeah, it generally is not the greatest way. CSS Frameworks have really made this easier for us.

To be fair, he isn't using a table for the whole page layout, just the form, which isn't as bad, but it still could be better.

If I was to take a guess, the choice here was made to do it this way to keep the CSS to a minimum so this lesson could be focused on the PHP side of it. That's just my guess though.

Right! There is a course to create HTML Forms: http://teamtreehouse.com/library/html-forms

You should only focus on php in this course and make a better form with best html practices instead of tables. Combine both courses and you will have the best form ever! :D

The use of tables is 100% correct, and shows a deeper understanding of the table element than those who espouse only using tables to display grids of numbers.

From the W3C (emphasis mine): "The HTML table model allows authors to arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells."

Also from the W3C: "Tables should not be used purely as a means to layout document content as this may present problems..."

Randy is using tables as intended. His form fits the table model very well (it can be logically and consistently divided into rows and columns). [For non-tabular form designs, this would not hold true, so I would stop short of saying it is always OK to encapsulate forms within tables.]

Think of Randy's form as a grid (dare I say, 'table') containing data pertaining to customer feedback (because it is). Column 1 contains labels identifying the type of feedback, column 2 contains the feedback itself (in this case user collected instead of populated from a database or web service). It is not hard to imagine a third column containing validation messages (which is simply meta-data regarding the appropriateness of the values entered in column 2).

In other words, Randy used a table to display tabular data. The fact that this happens to provide an extremely easy mechanism to enforce the desired layout doesn't make it incorrect.

For a more succinct statement of this argument, I refer you back to Randy (in the video in question):

"You may have heard something about not using tables in your HTML. The key is not to use tables for layout. If you have a 3-column layout, for example, don't use an HTML table for that. But if you do have tabular data, then a table element is perfectly acceptable."

On a side note, there is a good reason not to always use tables for this purpose, but it has nothing to do with whether or not that usage is semantically correct and consistent with web standards (true and true). If this form were displayed on a small enough screen (phone or perhaps a small tablet in vertical orientation), the table will force the labels and form fields to stay side by side. Using div elements and CSS, we could dynamically shift these elements into a single column to better accommodate small screen sizes (this can be pulled off using separate tables for each row...but I wouldn't). As a caveat to this caveat, though, note that the page in question is NOT mobile-friendly by design...the header and footer are cut off at screen sizes below 980px, so the point about forms and small screen sizes is moot here.

Gavin Ralston
Gavin Ralston
28,770 Points

Not to be pedantic, but isn't he building a form and not a table?

I mean, I think I understand you, and I interpret it like so: "in this case, we're not displaying the data, we're displaying the data we're about to collect to the user as he is entering it" but this seems kind of...spurious?

I mean, in "contact us" form, I'm not comparing Name to Email, and I'm not adding "User Feedback" to "Telephone Number" so I'm not sure how having the input fields laid out in a grid is at all the same thing as displaying that information in a table.

I mean, the only thing that makes it tabular is the layout itself. The fields aren't related in any way except that they're part of the...form...and that right now there appears to only be a need for one label and one field for this form, but I imagine that could (and often would) change in a real-world scenario.

It just seems to me that putting a form in a table seems like a lot of extra "architecture" a screen reader, or other alternate browsing and input methods might have to navigate. It also seems like it could get brutal, quickly, if a contact form started adding checkboxes or selectors.