Chapter 1 Chapter 2 Chapter 3 Chapter 4

Tables ~ Chapter 4

Tables can provide useful and attractive grids for Web page content and are best suited for displaying document content in a tabular format. Web tables can be as simple or as complex as necessary to address the specific needs of the document content.

Traditionally, tables had two significant purposes in Web design. The main purpose for which tables were designed was to display document in an organized grid and the secondary purpose was for page structure. Tables had been used to structure Web pages into multi-column layouts. However, it is not acceptable to use tables for structuring. In fact, if you do use tables to structure your page, be prepared to be punished in rank relevance by the search engine bots and spiders (punishment in the way of ending up on page 361 of Google search results instead of page 1 or 2). HTML5 provides specific tags for structuring including nav, header, footer, aside, and article.

Creating a Table

The th tag has special powersThe five main tags for creating a table are:

The table tag creates the outside of the table. The table tag is two-sided with a separate open and close tags. All table parts must be coded between these open and close tags.

The tr tag creates the rows within the table. The tr (table row) tag is two-sided with a separate and open tags.

The td tag creates the cells within the rows that represents the columns. The td (table data) tag is two-sided with a separate open and close tags.

The th tag creates a table header cell where the document content is both centered and bold. The th tag is two-sided with a separate and open tags and is used in place of the td tag.

The caption tag is used to include additional information about the table such as Figure 3.681 or Copyright 1935. The caption tag is coded directly above the </table>tag and by default will appear above the table. You can move it below the table by using a style. A caption is not a required element of a table.

Assignment: Question for Thought 1

Directions: Describe the difference between using the td tag and the th tag. Give an example of when you should use one as opposed to the other. Type your response directly in the itsLearning text box. Do not attach a separate document.


Steps to Create a Table

You may think that the first thing you do in order to create a table is to start coding the table in the text editor. However, you would be mistaken with that assumption. Here are the steps to create a table:

  1. Sketch the table on paper.

  2. sketch your table before you code your table

  3. Code the shell.

  4. Now you can fill in the document content.

How to Create a Simple Table

The secret is to copy and paste.

Assignment: Simple Table

Directions: You will sketch and code a simple table of your immediately family. Download the assignment Simple Table and follow the instructions for submitting the code.

Assignment: My Schedule

Directions: Create the table shown on the attached assignment sheet. You will create a table of your school schedule that will include period, class, teacher, and room. Download the assignment My Schedule. You will submit both a sketch of the table and the completed code to itsLearning.


Formatting and Stylizing

Don't use tables for page structureThere are only a few attributes that are used within the table tag. One of the main attributes is the border attribute. The border attribute either turns on the border (frame around the table and cells) or turns it off. By default, the border is in the off position. To turn the border on, you use the border attribute and the value of 1, like this:

<table border="1">

Look at the difference:

table without borders table with border
Table without a border Table with a border

Styling is done through cascading stylesheets. You can be an external stylesheet, embedded styles, inline styles of a combination of some or all types of styles. Here are some common formatting that is applied to tables:

table {

width:75%;

background-color:yellow;

padding:10px;

border-spacing:5px;

border:12px solid pink;

}

caption {

caption-side:bottom;

}

The width property changes the horizontal width of the table. The value can be expressed as a percentage or as a number of pixels. By default, a table is only as wide as it needs to be based on the content within the cells. It is a good idea to control the width with the width property.

The background-color property controls the background color of the table. This property can also be used in the tr tag to change the background of a single row or in a td tag to change the background of a single cell. The value of background-color can be expressed as a color name, hexadecimal, or a RGB value.

The CSS padding property defines the space between the element border and the element content. Having a little padding (whitespace) helps to increase readability. For more information on padding, visit W3C Schools.

The border-spacing property sets the distance between the borders of adjacent cells. The value is expressed as a number of pixels.

The border property defines the style of the border.

The caption-side property allows you to move the caption to the bottom of the table. You can learn more about all of the different options by visiting W3C Schools.

Assignment: Question for Thought 2

Directions: Table size can be expressed in either pixels or a percentage. Explain the difference between the two and why one may be better than the other. Type your response directly in the itsLearning text box. Do not attach a separate document.

Assignment: Quarterly Sales Report

Directions: Create the table shown on the attached assignment sheet. You must calculate your own totals for each month, per salesman, and overall. Use inline styles to create a more stylish table. Download the assignment here: Quarterly Sales Report. You will copy and paste your code into the itsLearning assignment.


Column and Row Span

Colspan and rowspan are useful HTML attributes for merging cells together. The colspan attribute of the td or th tags will merge cells horizontally (across) while the rowspan attribute of the td or th tags will merge cells vertically (downward).

Assignment: The Book Nook

Directions: You have been asked to create a Web page that displays a calendar of activities at The Book Nook bookstore for the month of June. Updating the calendar is a monthly activity, so a page has already been created containing a graphical table of the days of the month. Your job will be to update this table with the June activities. You will also add a caption and title to the table and format it.

Download the assignment The Book Nook and the source file tbn.txt.

Assignment: Television Schedule at WJXL

Directions: Creating a Television Schedule at WJXL. Youíre in charge of creating Web pages for WJXL, a television station in Atlanta, Georgia. One of these pages contains the weekly primetime television schedule from 7:00 p.m. to 10:00 p.m. Youíll create this schedule with a table broken down in half-hour installments. Because some programs in the schedule last longer than 30 minutes, you will have to include spanning cells to cover those time periods.

Download the assignment WJXL Schedule and the source file WJXL.txt.


Resources

If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.

Rows and Columns video: https://www.youtube.com/embed/Ztdes0BVepc

W3Schools: http://www.w3schools.com/css/css_border.asp


Credits


Transcript of this lesson