Lesson 06: Basic Tables

In this lesson you will learn about each of the units within this course.
This lesson should take you approximately 60 minutes.

Introduction

Tables are a great way to present tabular information or information that makes more sense in a table format. For example, a calendar is a great example of information that makes more sense in a table. We are going to create a very basic table and then later we are going to format it with style sheets.

Minimal Table Structure

We are going to build our tables using just the minumal table structure and then add a few elements to increase the accessiblity of the data. To start lets learn about the basic table elements.

<table> This tag opens and closes the table
<tr> This tag opens and closes the table rows
<td> This tag opens and closes the table data these control how many columns you have. Make sure that all your rows have the same number of columns unless you use a colspan tag which you will learn more about later.

You will be expected to stagger the indention of your code when coding a table.

Table tags: no indention
Table head and body 2 spaces
Row tags: 4 spaces
Cell/Column tags: 6 spaces

Activity: Create a web page with the same basic structure that we have been using. Copy the table data from the "table" file in the Unit 03 "Files" folder and paste it into the web page. Above the data build a table with five rows and four columns. Then copy and paste the data from the "Table Body text" section into the table data cells. Then test the web page to see how it looks. Remember it will not look fancy but the information should be organized into rows and columns.

Minimal Structure Tutorial

top

Table Headers

The information in a table often has a row or column that is designed as a header. In our example, we need to add a new row with the column headers from our data. By applying the <th> table header tag you will notice that the text in this row will be formatted slightly differently than the text in the rest of the table. We can always change this with style sheets later.

STAFF MEMBER
PHONE
POSITION
EMAIL ADDRESS

Activity: We will do this by adding another row at the top of the table but instead of using the <td> table data tag we are going to use the <th> table header tag.

Table Header Tutorial

top

Spanning Cells

Sometimes you will need to make a row that spans across all the columns or a column that spans across multiple rows. For this we use the colspan and the rowspan attributes.

Activity: Add another row to the bottom of the table but only include one <td> table data cell. Then add the colspan attribute to the table data tag and include the number of columns that it will need to span.
Example: <td colspan="4">

Cell Spanning Tutorial

Cell Padding and Spacing

Dy default the data in are sized to fit the data in the cells. If you want to add a little more room around the data or inbetween the cells, you will use the cellpadding and cellspacing attributes in the opening table tag. Think of cellpadding as the room inside a room (jail cell). Think of cellspacing as how far apart each room is placed.
Example: <table cellpadding="10">

top

Captions and Summaries

There are two additional methods for providing people with information about your table, captions and summaries. Add either right below the opening table tag with an open and closing tag surrounding your text.

Captions are displayed in the browser and are typically very brief
Summaries are not displayed in the browser and are typically longer

Activity: Add the caption text given to you for your table.

Caption and Advanced Elements Tutorial

top

Advanced Table Elements

You can describe rows and groups of rows as belonging to a header, body or footer. This will help to organize your table and make it easier to read.

Activity: Add an opening and closing <thead> table head tag and <tbody> tag to define the header row and the body rows.

For more information about making your Tables Accessible go to: http://www.usability.com.au/resources/tables.cfm

top

Activity Summary:

Create a web page with the same basic structure that we have been using. Copy the table data from the "table" file in the Unit 03 "Files" folder and paste it into the web page. Above the data build a table with five rows and four columns. Then copy and paste the data from the "Table Body text" section into the table data cells. Then test the web page to see how it looks. Remember it will not look fancy but the information should be organized into rows and columns.
We will do this by adding another row at the top of the table but instead of using the <td> table data tag we are going to use the <th> table header tag.
Add another row to the bottom of the table but only include one <td> table data cell. Then add the colspan attribute to the table data tag and include the number of columns that it will need to span.
Add the caption text given to you for your table.
Add an opening and closing <thead> table head tag and <tbody> tag to define the header row and the body rows.

Turn It In: When you feel like the page is just the way you want, upload the web page to your server folder. Test it to make sure that it is working properly. Then email your project manager the URL for evaluation. *Make sure the URL starts with "http".

Grading Rubric

Tag Point Possible

Basic tags
table, tr, td
6

th 2

colspan 2

caption 2

row groups 2

indented 2

Total
16

top

Web Foundations