Lesson 5: Table for Two, Please

Once upon a time, you couldn't do much in HTML without knowing how to use a table. Tables wern't just for comparing lists of infrmation: they were used for laying out pages too! Now-a-days, we don't do page layout with tables because they're rough on mobile devices, but they are still a valuable tool to have in yor tool kit.

Let's Get Started!

Basic Table Tags

Like the lists we played with in Lesson 4, tables and their tags are hierarchical. The tags commonly used to create a table include:

<table> and </table>: These tags tall your browser that you are beginning and ending your table
<tr> and </tr>: These tags identify the beginning and ending of a horizontal row in a table. You should have more than one row in a table.
<td> and </td>: These tags identify a single piece of table data (sometimes called cells). You can have more than one of these in a row, but you should also to keep the same number of table data elements in every row.

If we build a simple, two-by-two table using those tags, the code looks like this:

  
	<table>
	  <tr>
	    <td>Column 1, Row 1</td>
	    <td>Column 2, Row 1</td>
	  </tr>
	  <tr>
	    <td>Column 1, Row 2</td>
	    <td>Column 2, Row 2</td>
	  </tr>
	</table>

If we look at that in the browser, here is what we'll see:

Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

Nice, but it doesn't look much like a table, does it? that's because we haven't told the table how we want it to appear.

Making Your Table LOOK Like a Table

In order to add in the lines and all the other things we expect to see in a usable table, we're going to have to explore a whole new aspect of HTML... attributes. Attributes allow us to hang additional pieces of information on a tag and tell the browser more about how it should behave.

According to my favorite HTML5 pocket reference, tables allow for HTML5 global attributes, border and sortable. We're going to start with a border that is one pixel (px) wide.

  
	<table border="1px">
	  <tr>
	    <td>Column 1, Row 1</td>
	    <td>Column 2, Row 1</td>
	  </tr>
	  <tr>
	    <td>Column 1, Row 2</td>
	    <td>Column 2, Row 2</td>
	  </tr>
	</table>

Here's how it looks:

Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

More table-like, but pretty cozy, don't you think? There are actually two ways to handle this. One option is to use the deprecated table attributes, cellpadding and cellspacing. These two attributes still work in most browsers, but they are called "deprecated" because they're tecnically not supported in HTML5. The other option is to use styles. Styles will be covered in a future lesson, so for now, we're just going to go ahead and use cellpadding and cellspacing.

Let's start with cellpadding. This attribute controlls the amount of space surrounding content WITHIN a cell. We'll go ahead and set it to 10 pixels (px), so you cen see what it looks like

  
	<table border="1px" cellpadding="10px">
	  <tr>
	    <td>Column 1, Row 1</td>
	    <td>Column 2, Row 1</td>
	  </tr>
	  <tr>
	    <td>Column 1, Row 2</td>
	    <td>Column 2, Row 2</td>
	  </tr>
	</table>

Here's how it looks:

Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

Ready to see what cellspacing does? Let's give it a go. I'm going to cut cellpadding down to a reasonable number (let's say 3px) and set cellpsacing to 10px.

  
	<table border="1px" cellpadding="3px" cellspacing="10px">
	  <tr>
	    <td>Column 1, Row 1</td>
	    <td>Column 2, Row 1</td>
	  </tr>
	  <tr>
	    <td>Column 1, Row 2</td>
	    <td>Column 2, Row 2</td>
	  </tr>
	</table>

And here's how that looks:

Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

Cell Attributes

Tables don't get to have all the fun -- cells have some nifty attributes as well. Most notably, these are colspan and rowspan. These attributes allow you to create table cells that span multiple columns or rows. let's try colspan first. Before I do this, I'm going to go ahead and set the padding and spacing each to 3px. I'll also need to delete one of the <td> pairs so that our span fits.

  
	<table border="1px" cellpadding="3px" cellspacing="3px">
	  <tr>
	    <td colspan="2">I span TWO COLUMNS!</td>
	  </tr>
	  <tr>
	    <td>Column 1, Row 2</td>
	    <td>Column 2, Row 2</td>
	  </tr>
	</table>

And here's how that looks:

I span TWO COLUMNS!
Column 1, Row 2	Column 2, Row 2

Now let's try the rowspan. To do that, we'll take the colspan off. We'll also need to add that second <td> pair in row one back on and delete the <td> pair in row two. Finally, we'll add the rowspan attribute as shown below:

  
	<table border="1px" cellpadding="3px" cellspacing="3px">
	  <tr>
	    <td>Column 1, Row 1</td>
	    <td rowspan="2">I span TWO ROWS!</td>
	  </tr>
	  <tr>
	    <td>Column 1, Row 2</td>
	  </tr>
	</table>

Column 1, Row 1	I span TWO ROWS!
Column 1, Row 2

Other Useful Odds and Ends

When I introduced tables, I shared the table tags that are most often used. There are actually quite a few more tags that aren't used as often, but can be extremely useful. These include:

<thead> and </thead> (group header content)
<th> and </th> (defines a header cell)
<tbody> and </tbody> (group body content)
<tfoot> and </tfoot> (group footer content)
<caption> and </caption> (adds a caption)

If we throw all of these into our sample table, the code looks a bit like this:

  
	<table border="1px" cellpadding="3px" cellspacing="10px">
	<caption>Table 1: A Sample Selection</caption>
	  <thead>
	    <tr>
	      <th>Column 1 Heading</td>
	      <th>Column 2 Heading</td>
	    </tr>
	  </thead>
	
	  <tbody>
	    <tr>
	      <td>Column 1, Row 1</td>
	      <td>Column 2, Row 1</td>
	    </tr>
	  <tbody>
	
	  <tfoot>
	    <tr>
	      <td>Column 1 Footer</td>
	      <td>Column 2 Footer</td>
	    </tr>
	  <tfoot>
	</table>

And here's what it looks like rendered out:

Table 1: A Sample Selection
Column 1 Heading	Column 2 Heading
Column 1, Row 1	Column 2, Row 1
Column 1, Row 2	Column 2, Row 2

All of this may seem a little "extra" right now, but once we move into styles, you'll begin to see how having these divisions can be useful. For now though, just store these "bonus tags" away in the back of your memory.

Lesson 5: Prove it

Are you ready to try your hand at creating a table? Let's get to it! To complete this assignment:

Create a new HTML document and name it MyLesson5.html
Add a table that is three columns wide and three rows tall. Give the table a 1px border, a cellpadding of 5px and a cellspacing of 5px
Make the first row into a header that uses the <thead> and <th> tag pairs.
The remaining two rows will be used for the table body. Be sure to use the <tbody> pair.
In row one of the body, include a colspan attribute that makes column 1 and column 2 into a single column.
In row one of the body, include a rowspan attribute that makes the third cell sprad across two rows.

When you are done, save the file as MyLesson5.html and upload it to the folder with your name. You can check your work here. If you want to see an example of how this file might look, you can check mine out here.

Back to the lesson plan.