HTML5 Body Elements #8 Tables
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.
Yes, it is possible to find a good web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we’ve found so far.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
<table> Attribute Examples
#summaryBefore 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 FormattingThe <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 FormattingThe <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> ExampleIt’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:
<th>Curling Team Name</th>
Here’s how your table headers now appear:
<td> ExampleNow 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.)
Having said that:
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…)
HTML5 Body Elements  Tables.zip
Need help with cloud hosting? Try Server Intellect. We used them for our cloud hosting services and we are very happy with the results!
|Print article||This entry was posted by The Web Made Easy on March 30, 2011 at 7:29 pm, and is filed under HTML, Web Sites. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site.|