XHTML - CCIS1301

Class 4 - Tables

What is a table?

A table, in terms of this class, is simply a way to display tabular data. So, what is tabular data? Tabular data is simply any set of information that can be logically organized into a series of rows and columns. This of this class. If I wanted to show information about each student in this class I might have the following information: first name, last name, email address, student id and degree / major. I could create a column for each of these sets of data, and a row for each student in the class. Something like this...

Student Enrollment for Fall 2010
First Name Last Name Email Address Student ID Major / Degree
Total Students: 3
John Doe jdoe@example.com 123456 Network Admin
Mary Smith msmith@example.com 123457 CCNA
Suzy Queue squeue@example.com 123458 Web Programmer

In the example above, I have a column for each data "type" and a row for each "record" (I use the terms type and record because, when you work with databases, this concept uses those terms as well).

The sections of a Table

Sticking with the example I made above, you may notice that our table has 3 distinct sections. These are:

Each one of these sections are used to logically organize our data that we want to display in the table. For example, the header contains only the column titles. The body, contains records of all the information, and the footer contains summary information.

Now that we know a table has sections, let's take a look at some of the HTML I used above:

<table>
	<caption>Student Enrollment for Fall 2010</caption>
	<thead>
		<!-- Header stuff here -->
	</thead>
	<tfoot>
		<!-- Footer stuff here -->
	</tfoot>
	<tbody>
		<!-- Table Data here -->
	</tbody>
</table>

There are several tags (elements) I used in this table. I'd like to start with a few of them here and explain what they do...

<table>
This is the main table tag. It is used to encapsulate the entire table. All the other cells will be contained within it.
<caption>
The caption tag is used to set a title for the entire table. Typically a summary of the data in the table.
<thead>
This tag is used to identify the header of the table. Typically it will contain the column headers of our data.
<tfoot>
This tag is used to summarize the data in our table.
<tbody>
The tbody tag is used to contain all of our actual table entries (records).

It's important to note the order of these tags, especially the tags INSIDE the <table> tag. They are - in this order - thead, tfoot, tbody.

Why would you place the tfoot (which contains the footer / summary information) right after the thead? Well, this goes back to the olden, golden days on 14,400 modems (and slower). Back then, having a table with a few hundred rows, would take a few seconds to load (even just the HTML), and many people didn't want to wait for the summary data (probably some CEOs) to load, so, the HTML specification was written to require the tfoot right after the thead. This meant that when a page loaded with a big table, the header would be displayed, then the footer, then the data would start coming in (and expand the table as it loaded). So people would instantly see the summary data, and wait for the details.

So, we need to create table sections in the following order: thead -> tfoot -> tbody

Rows, Columns & Cells

So, how do we create rows and columns? Well, in tables, we really only have one tag to create a row. From a table perspective, we organize each record in a "row" and in each "row" we need to have the same number of entries (or "cells") to make the columns line up. To create a row, we use the <tr> tag like this...

<table>
	<caption>Student Enrollment for Fall 2010</caption>
	<thead>
		<tr>
			<!-- Header Row -->
		</tr>
	</thead>
	<tfoot>
		<tr>
			<!-- Footer Row -->
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<!-- Body Row -->
		</tr>
		<tr>
			<!-- Body Row -->	
		</tr>
		<tr>
			<!-- Body Row -->	
		</tr>
	</tbody>
</table>

To create our columns, all we need to do is add the same number of cells to each row. For example, if we have 5 cells in the header row, then every row in our tbody should have 5 cells, and every row in our tfoot should have 5 cells as well.

There are 2 tags we can use to create a table cell, they are:

<th>
The th tag is used to contain table header (th) data. This usually will bold and center the text in the cell.
<td>
The td tag is a generic table cell tag.

Putting this all together, our sample table from above looks like this...

<table>
	<caption>Student Enrollment for Fall 2010</caption>
	<thead>
		<tr>
			<th>First Name</th>
			<th>Last Name</th>
			<th>Email Address</th>
			<th>Student ID</th>
			<th>Major / Degree</th>	
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="5">Total Students: 3</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>John</td>
			<td>Doe</td>
			<td>jdoe@example.com</td>
			<td>123456</td>
			<td>Network Admin</td>	
		</tr>
		<tr>
			<td>Mary</td>
			<td>Smith</td>
			<td>msmith@example.com</td>
			<td>123457</td>
			<td>CCNA</td>	
		</tr>
		<tr>
			<td>Suzy</td>
			<td>Queue</td>
			<td>squeue@example.com</td>
			<td>123458</td>
			<td>Web Programmer</td>	
		</tr>
	</tbody>
</table>

Notice how the <th> tags were used in the <thead> section and the <td> tags were used in the <tbody> and <tfoot> sections.

Also notice how, inside every <tr> tag, I have the same number of <td> tags. This is how I'm creating columns.

If you're astute, you will notice one issue - there's only 1 <td> tag inside the tfoot section, we'll cover that now...

Combining cells - multi-cells

Sometimes, in tables, we want to combine cells into one cell. Think of this as "merging" cells". To do this, we can use 2 attributes on a <th> or <td> tag. They are "rowspan" and "colspan". Let's go back to our table above...

First Name Last Name Email Address Student ID Major / Degree
Total Students: 3
John Doe jdoe@example.com 123456 Network Admin
Mary Smith msmith@example.com 123457 CCNA
Suzy Queue squeue@example.com 123458 Web Programmer

Above, the cell highlighted in red "spans" all 5 columns, so we give that <td> tag the attribute of "colspan" with the value of "5", like this...

	<td colspan="5">Total Students: 3</td>

But what if we only wanted a cell to span 4 columns? What would that look like? Consider this table (modified from above)

First Name Last Name Email Address Student ID Major / Degree
Total Students: 3
John Doe jdoe@example.com 123456 Network Admin
Mary Smith msmith@example.com 123457 CCNA
Suzy Queue squeue@example.com 123458 Web Programmer

Now the total students cell is 4 wide, but we have 5 columns, so how do we handle that? Like this...

	<tfoot>
		<tr>
			<td colspan="4">Total Students:</td>
			<td>3</td>
		</tr>
	</tfoot>

Notice, that the columns still line up. That's because, by default, each <td> and <td> has a colspan attribute set to 1. And so long as we add up to the same number of cells (in this case 4 + 1 = 5), our table will look nice and line up the way we want.

Merging Cells Vertically

So, now we know how to merge cells horizontally using "colspan", to merge cells vertically, we use the attribute "rowspan". Much like colspan, rowspan also has a default value of 1, so each td and th cell have a colspan of 1 and a rowspan of 1 by default.

Consider this table...

Department First Name Last Name Email Address Student ID Major / Degree
Total Students: 3
Networking John Doe jdoe@example.com 123456 Network Admin
Mary Smith msmith@example.com 123457 CCNA
Programming Suzy Queue squeue@example.com 123458 Web Programmer

Here we have the light blue cell spanning to rows (hence, we use "rowspan"). The HTML looks like this...

<table>
	<thead>
	<tr>
		<th>Department</th>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email Address</th>
		<th>Student ID</th>
		<th>Major / Degree</th>	
	</tr>
	</thead>
	<tfoot>
		<tr>
			<td></td>
			<td colspan="4" style="background-color:red;">Total Students:</td>
			<td>3</td>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td rowspan="2" style="background-color:#ccf;">Networking</td>
		<td>John</td>
		<td>Doe</td>
		<td>jdoe@example.com</td>
		<td>123456</td>
		<td>Network Admin</td>	
	</tr>
	<tr>
		<!-- Invisible td here because we have a rowspan=2 in the previous row -->
		<td>Mary</td>
		<td>Smith</td>
		<td>msmith@example.com</td>
		<td>123457</td>
		<td>CCNA</td>	
	</tr>
	<tr>
		<td>Programming</td>
		<td>Suzy</td>
		<td>Queue</td>
		<td>squeue@example.com</td>
		<td>123458</td>
		<td>Web Programmer</td>	
	</tr>
	</tbody>
</table>

Notice that if I count the number of tds in the first row (header), I get 6, in the second row I get 6, but in the third row, I only have 5. What gives? Well, that cell is actually "merged" with the cell above it from the previous row. I like to think of this as a "hidden" cell. We don't code it with a td tag, but the browser expects it to be there. How many invisible cells are there? That depends on how much my rowspan is. If it was a value of 3, then the first row would have the right number of cells, the second would be 1 less, as would the third row.

Combining rowspan and cellspan

We can combine rowspan and cellspan to have a merged cell cover multiple columns and rows. That might look like this...

First Name Last Name Email Address Student ID Major / Degree
Total Students: 3
John Need Data
Mary
Suzy

Here the "Need Data" cell has a rowspan of 3 and a colspan of 4. The HTML looks like this:

<table>
	<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email Address</th>
		<th>Student ID</th>
		<th>Major / Degree</th>	
	</tr>
	</thead>
	<tfoot>
		<tr>
			<td colspan="4" style="background-color:red;">Total Students:</td>
			<td>3</td>
		</tr>
	</tfoot>
	<tbody>
	<tr>
		<td>John</td>
		<td colspan="4" rowspan="3">Need Data</td>
	</tr>
	<tr>
		<td>Mary</td>
	</tr>
	<tr>
		<td>Suzy</td>
	</tr>
	</tbody>
</table>

Table Formatting - old school

You may have noticed that I have nice 1 pixel borders around my tables and they all have nice spacing, etc. I did all that formatting through CSS (Cascading Style Sheets) and if you view the source of this page, you'll see what I did (look for the "style" tags). I'm going to circle back to the CSS later this semester, but for now, I want to let you know about a few older ways to format tables that are still in use today.

Note: Most of these will cause validation errors

Tag Attribute Description Example
<td> & <th> align Aligns the text in the cell to the left, right or center <td align="left">
<td> & <th> valign Aligns the text vertically in the cell to the top, bottom or middle <td valign="top">
<table> border Gives all cells in the table a border specified by the value. <table border="1">
<table> cellpadding Gives all cells in the table a padding (space between the text in the cell, and the border of the cell) specified by the value. <table cellpadding="5">
<table> cellspacing Gives all cells in the table a spacing between other cells of the specified value. <table cellspacing="4">
<td>, <th> & <table> width Sets the width of the table or cell. <td width="100">
<td>, <th> & <table> height Sets the height of the table or cell. <td height="100">

BAD TABLES!!!

I've harped on this before, and will continue to do so again. DON'T USE TABLES FOR LAYOUT!!! otherwise you'll end up with this: Bad nested table layout!!!

Suggested Videos

Note: These are just some videos I found on youtube that I feel are related to the topics covered here.




Ask questions.

Assignments

- Homework 3: Due on: 03/02/2012 at 11:59:59pm.
- Lab 3 (optional)
- Quiz 2: Due on: 02/24/2012 at 11:59:59pm

Quick Links

What is a table
Table Sections
Rows, Columns and Cells
Multi-Cells
Table formatting - old school!

Simple Table & Character Entities
Colspan Table
Rowspan Table

Valid Template Sample

Helpful Pages