A Brief Introduction

HTML tables get a pretty bad wrap nowadays since CSS has become the big dog on campus, but they do still have some usefulness contrary to popular belief. Today, we’ll see how to create tables and learn how they can help to organize things that normally fall into strange positions by default. 

Part 1: Building the table

A table in HTML is a very easy element to implement, and takes only a few lines of code to construct in it’s simplest form. Here’s what the initial HTML looks like:

Pretty simple setup right? There’s not much more to it except to fill in the table data that you need. That’s what tables are still good for. Data that needs a table. Anything else is, well, uncivilized. Let’s start creating a table so that you can see all of the parts in practice. Our table will be for a video game called Alien Invasion. The game creators have asked us to give them a detailed table of the 5 different types of spacecraft that will be in the game, and whether or not those vehicles have certain attributes. Let’s start with the basics, and add only the rows for our 5 spacecraft. Notice, however, that there are 6 rows. We’ll need the first row so that we’ll have a place for data that pertains to our table cells.

Alright, so now that we have our table rows laid out, we can add our headers. Table headers are more bold than the rest of the table data, and basically represents the title of the column they are a part of. The types of spacecraft we are dealing with are Aero, Molecular, Atomic, Super, and Astro. These will correspond to the first table data cells in each of our rows\. The table headers are all in the first row, and each corresponds to an attribute of the spaceships. Heres’ what it should look like:

Now that our headers are in place, we can start adding data to the table. Our first row will be for the Aero ship.The rest of the table data in our first row will correspond to our headers respectively.  Here’s what the table should look like now:

Great! Now we can clearly see that every spaceship has laser guns. The next spacecraft is the Molecular. It has one more attribute than the Aero, Hyper Speed, and will basically destroy any Aero on site. That’s besides the point, though, here’s what the table should look like now:

Next up is the Atomic. Neither of the first two ships can mess with the Atomic because it rocks. Advanced Molecular can destroy a planet, but that’s besides the point. Let’s flesh out our table with one more row: 

Are you starting to see a pattern yet? By this point, you should get the idea, so here’s what the finished table looks like with all of the spacecrafts and attributes added:

If you load the page up in your browser, you’ll see a well formed validating table! It may not look pretty, but you can head over to CSSatoms.com to see how to style this exact table right now!

A Few Last Words

Sometimes, data still calls for a table. It’s just the way it is. Using tables for full page layouts is the way of the past, but using them for things like the table we’ve created today is still fully acceptable. Join us next time when we talk about HTML metadata and the world of search engine optimization .See you then!
Download Source Files