Tables

Simple table

A table contains rows; within each row are cells.
A table is created with the   <table>   </table>   container tags.
Within the table container, each row is created with the   <tr>   </tr>   container tags.
Within each row container, a cell container can be either:
<th>   </th> - a heading cell
<td>   </td> - a datum cell
The following table has 4 cells, and no borders.

Heading 1 Heading 2
Datum 1 Datum 2

Look at the samples, to see how the html tags are written.

Border styles

You can specify a border style, for a border around a any block element. Sometimes you will want to put a border around a table.

Center

The table tag did have an align="center" attribute.
There was a center tag.
These are being phased out, so we should use styles.

There is no obvious simple way to center a table, image, or other block object.
However, there is a trick, which can be used to center a block object.
Give it left and right margins, that are specified with  auto  width. By default, these margins will be the same size and take up all the available space.
This will center a block object. See the sample.

Border attribute

You can specify a table border by using the border attribute. Which should you use, the border style or the border attribute?
Often, for consistency and better control, you may wish to use a border style. On the other hand, a border attribute is easy to use, with good simple results.

Table and cell widths

You can specify the width of a table by using styles or the width attribute.
The  td  and  th  cell width attribute is being phased out, so use the width attribute for a cell width.
You can specify the width in pixels or percent of the available width.

Table and cell heights

Height is not always easy to control. If the height is a fixed size in pixels, you can specify it with a style. On the other hand, if the height may vary, such as when it contains text, it is difficult to correctly adjust the height.
Fortunately, a table will automatically adjust the height of all cells in a row to the same height.

Padding and spacing

  • spacing is margin space OUTSIDE each cell
  • Padding is space just INSIDE each cell

You can use the  cellspacing  and  cellpadding  attributes in the  table  element, or
you can use the  margin  and  padding  style properties for the  th  and  td  elements.

  • cellpadding=3 makes cells look better than allowing the text to run right up against the edge.
  • NOTE that cellspacing and cellpadding attributes go in the <table> tag not the <td> tag.
  • Alternately, you can apply these to the <td> elements with a style.

Table caption

You can specify a caption for your table.
The caption container should be the first thing inside the table container.
The text in the caption container will be put above or below your table.
Possible values for the caption-side style property are:   top bottom
Alignments left and right are obsolete. The default alignment is top

You can ask for the caption to be aligned at the top or bottom.
Do you always get the alignment you request?

NO. Captions do not always look the way you want them to look.

Why not?

We need to consider what the World Wide Web is designed to do. Your page can be transmitted throughout the world through a variety of servers. The page is displayed by the user, using whatever system they have. It is amazing that this works at all. It is not surprising that there are some differences in different environments.

What affects some of the differences seen in a web page:

  • What html elements are used, and how are they used?
  • What else is used in the page, besides html?
  • What is the operating environment for our web server?
  • What is the operation environment for the user's internet server?
  • What browser is the user using?
  • What release of that browser is the user using?
  • What settings has the user made in the browser?
  • What operating system is the user using?
  • What release of that operating system is the user using?
  • What settings has the user made in the operating system?

What can you do, to make sure your pages work well?
You can be sure to code pages that meet the HTML standards.
We see standard XHTML throughout this course.

In addition to coding to standards, professional web page developers do a lot of testing in various environments. This makes sure that the web pages work in almost all environments. A business does not want a web page that does not work for 10% of the prospective customers. Perhaps 1% is acceptable, but not 10%.

Alignment within a cell

Each cell is created by a <th> or <td> container.
The text within a cell can be aligned horizontally and vertically.
You can use style or attributes to align the text within a cell.

The align attribute in a <th> or <td> element aligns the contents of the cell horizontally.
The values for the align attribute are   align="left"   align="center"   align="right"
The text-align style property for a <th> or <td> element aligns the contents of the cell horizontally.
The values for the text-align style property are   text-align: left;   text-align: center;   text-align: right;

The valign attribute in a <th> or <td> element aligns the contents of the cell vertically.
The values for the valign attribute are valign="top"   valign="middle"   valign="bottom"
The vertical-align style property for a <th> or <td> element aligns the contents of the cell vertically.
The values for the vertical-align style property, when used for a <th> or <td> element are
vertical-align: top;   vertical-align: middle;   vertical-align: bottom;

Spanning

You can make a cell extra tall, spanning several rows.
You can make a cell extra wide, spanning several columns.
Examples:

No spanning
A B C
D E F
G H I
Row spanning
A B C
E F
G H I
Column spanning
A C
D E F
G H I

Styles and attributes

In general, it is better to use styles, rather than attributes, to specify the apperance of HTML, XHTML, and XML elements.

In this section on tables, we have seen some styles and some attributes.
Usually use styles.
Attributes are still useful in some cases, where they provide simple ways to produce specific apperances.
I generally use the colspan and rowspan attributes, and occasionally use the border attribute.

Page layout

A good, easy way to provide a good page layout is to fill the entire page with a table. Without borders, the user does not see the table, but does see everything aligned neatly.

Lab 9

Now you are ready to build your lab 9 web page.
Follow the link on the left to read the lab 9 requirements and build your lab 9 web page.

Complete Lab 9

You have built your lab 9 web page.
Upload your page to voyager, just as you did for lab 2.
Validate your lab 9 page.
Then, log in to Catalyst and submit assignment 9. The submission should provide the following information:

  • It should say that you have completed Lab 9.

Reading assignment

Reading assignments are in HTML, A Beginner's Guide, by Wendy Willard.
Read the chapter.

Chapter 9

Understand the Concept and Uses of Tables in Web Pages
Read.
Create a Basic Table Structure
The book indents the tags for the cells <td> and <th> within the <tr> container
I suggest you also indent the <tr> within the <table> container
If you have an empty cell, be sure to put  &nbsp;  in the cell; otherwise, the cell may not show up properly.
Almost always, you will want to use a style sheet for all <td> containers. You might also provide a style for <td> containers within a class.
We will use tables to lay out web pages, later. I have used this technique for my web pages. The cell you are looking at, in my web page, is in class data-cell. The light yellow cell to the left is in class link-cell.
Format Tables Within Web Pages
The Willard book describes the frame and rules attributes. If I do anything this fancy, I usually use styles.
The Willard book describes the border-collapse style property.
For the caption-side property, only use the values top or bottom. The other values do not always work.
Format Content Within Table Cells
A better way to provide cell spacing is by using border-collapse: separate; and border-spacing style properties. Look at my samples for spacing and padding.
The nowrap style property can sometimes cause serious layout problems, and should be used with caution.
Additional Formatting Techniques
Optional.
The thead and tfoot elements can be useful for tables that have many rows. This can be used to show the head and foot material, even when the table is scrolled.

An alternate text is Even More Excellent HTML by Timothy T. Gottleber and Timothy N. Trainor. This book gives both new and older techniques. You may read in this book, if you wish. Look at chapter 7, "Tables"