HTML Tables

A closer look at the structure of HTML tables.

Scroll down...

Content

Resources

Comments

In this lesson, we'll be covering HTML tables. We'll outline the basics of what tables are and how they are used. We'll also cover the HTML elements that make up the smaller pieces of tables. Then, you'll read through a walkthrough that takes you through a bit of the history of tables and how they are used to display tabular data.

Finally, the HTML tables have turned!

HTML tables have turned

Or... they have their turn, you know what I mean.

Simple HTML Tables

Tables are made up of a few different HTML elements. The first of these is the table tag. Much like a form, the table tag is the container element for the table. It is the parent of all the elements that create the full composite table.

<table>
  < !-- Rows go here -->
</table>

In it's simplest form, an HTML table contains rows. These rows are created with nested tr tags. This gets you a row. However, to actually display data inside these rows with columns you'll have to put data cells inside the row. This is accomplished with td tags. Here is an example:

<table>
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

This renders to...

First Name Last Name
John Doe
Jane Doe

As you can see, the rows separate the different sets of data cells and create a columned layout of data. This is as barebones as tables get. HTML does offer a few more tags that can be used out of the box to give the structure of our table more meaning.

Table Headers and Bodies

Much like the layout structure of a website, tables can have a header, body, and footer. To create these we use a few new tags inside our table called thead, tbody and tfoot. These semantic tags help us divide the purpose of the various sections of our table so for example the column names can be structurally labeled as headings.

Here is an example of our above table using table headers for the column names:

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Notice that the data cells in the thead tag are switched from td tags to th tags. These th tags are meant to be used only in the thead tag to differentiate those cells from the rest of the data cells in the table.

The above table renders to:

First Name Last Name
John Doe
Jane Doe

Shay Howe: Organizing Data with Tables

The above markup and explanation will certainly get you started working with and creating tables. Your task now is to read Shay Howe's tutorial on HTML tables and play around with some of his code examples to get a firmer grasp on the history of HTML tables and what they have to offer.

Code Review

The important bits of code from this lesson

< !-- Simple table -->
<table>
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

< !-- Table with header -->
<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Wrapping Up

You should now have a much better understanding of the purpose of HTML tables and how to construct them. We took a look at how simple tables can be as well as the details of creating table headings and bodies to separate column names and data. Furthermore, you went through a walkthrough of the nuts and bolts of tables that showed you just how detailed you can get with how you set up tables to make your data display pretty.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Deploying Your HTML Page