Tables have a rather, well, storied history in the annals of HTML history. The truth is, had tables been used as intended from the beginning, they likely could have avoided a great deal of disdain from the development community, and the effort to expunge them from the HTML lexicon likely wouldn’t be nearly as blunt.

Here’s the historical low down. Tables, as the name wholly implies, were originally intended as a way in which to format data tables, not unlike a spreadsheet, and display them within an HTML document. To this end, they still do a great job, which is why they earn our endorsement and inclusion in this tutorial series.

The problem was, in an era where HTML wasn’t really meant to be in the layout business, tables did offer a rudimentary way to layout your page. It was certainly wasn’t ideal, but it was a quick means of segmenting your page content at a time when there weren’t a whole lot of other options. Frames, the bastardized step-brother of the table, were also an oft-used early organizational method that shares a similar unenviable modern-day status.

And at the time, the minor disregard for intent really wasn’t that big of a deal. Developers were just following a means of inevitable progression; and if the nail needs to go in, in absence of all else, a rock does make a decent hammer. (One does hope your dentist doesn’t follow a similar philosophy, however.)

But we did get hammers. With the introduction of CSS, there were numerous new techniques available for page division and layout, offering a much more comprehensive and elegant solution. And yet, a lot of people got comfortable with their rocks.

That’s how we arrive at bad practice vs. best practice et. al (1999). While the old way might still work, in the ever-evolving world of web development, there likely is a better way; and a best way still. It’s not about following a set of arbitrary rules (although it is somewhat), but rather pursuing a sanctioned path that allows safe passage into The Land of the Latest, and increases the likelihood that as new features emerge, the route to integration will be minimal.

Tables became a bad practice for page layout. It was a bad practice a decade ago, and it’s a worse practice now. So in that regard, we cannot in good conscience sanction its use a page design tool. In fact, we’ll downright condemn it. But if you want an easy way to format your fantasy curling team scores, by all means…

< table > Formatting Syntax

Unlike most of the elements we’ve examined the past, the < table > tag requires you to place additional elements inside for it to actually do anything. In a way, the < table > is just another divisional tag, whose sole purpose is to hold table data expressed with other elements. All standard attributes are applicable to the element.

< table > Attribute Examples


Before the advent of CSS, several table attributes existed to offer varying formatting options for your data. In HTML5, all of these have now been deprecated. The lone < table > attribute survivor, summary, exists as a means of expressing a description of your table data for accessibility purposes. Any given value will not be rendered as readable text within the browser.

< tr > Syntax Formatting

The < tr >, or “table row” tag specifies a new row within your table. Within each row, you will specify either cells < td > or headers < th >, which we will be getting to momentarily. There are no special attributes, and all standard attributes do apply.

< th > Syntax Formatting

The < th > element creates a header row for your table data as a means of labeling the type content that is contained in the cells below it. All of the standard attributes are applicable, and you are able to size the element using the colspan and rowspan attributes.

< th > Example

It’s time to create a new HTML5 document for our table. Within the < body > tag, go ahead and create a new table with the following header tags:

As any dutiful curling fan will note, there are usually 15 ends in an official match, but in the interest of example, this is a very unofficial game. (We’ll also be using Roombas instead of stones…)

Here’s how your table headers now appear:

< td > Syntax Formatting

The < td >, or “cell” element creates a cell within your table to store data. All of the standard attributes are applicable, and you are able to size the element using the colspan and rowspan attributes.

< td > Example

Now we need to add some data to our cells and a few additional rows to allow for multiple teams. There’s quite a bit of tedious data to enter here, so it should be stated that Web Development Applications do have their place, and the < table > makes for a brilliant affirmation (even for the staunchest of Notepad traditionalists.)

And after all that, we’re left with one swell looking table:

Sure, the formatting still leaves a few things to be desired, but we’re going to table that discussion for another time. (C’mon…I could be smashing watermelons up here…).

Download Source Files