04/19/23 Tables 1

Tables

Spring, 2008

Modified by Linda Kenney4/2/08

04/19/23 Tables 2

An overview of tables Tables are used to organize info along two

dimensions at once. Tables are intended to organize data into rows

and columns. However, many Web authors also use tables to

layout the elements that make up a page. This use of tables is not recommended by the XHTML

standards, since it hinders accessibility and presents difficulties for certain types of browsers.

For this reason, the use of Cascading Style Sheets (CSS) is recommended instead.

But since the use of tables for page layout is currently widespread, we will cover it.

04/19/23 Tables 3

Table basicsTables are used to arrange data along two dimensions simultaneously. In other words, tables should be used when

you have info to present that could benefit from being organized into rows and columns.

In XHTML, a table is created using a <table> container element.

Within a <table> element there must be one or more <tr> containers, each of which represents a single row of the table.

04/19/23 Tables 4

RowsEach <tr> element should contain one or

more <td> and/or <th> containers, each of which represents a cell within that row.

What goes within each cell is pretty much up to you.

XHTML places virtually no limitations on what you can place within a table cell.

You can even put tables inside the cells of other tables, creating nested tables. (Note: Nested tables can be a lot of work for the browser to render and will therefore cause delays in your users’ experience.)

04/19/23 Tables 5

Rows (cont.)Each row within a given table should contain the

same number of cells.

The cells in a row may be any combination of table header cells (<th>) and/or table data cells (<td>).

Table header cells are meant to be used to label rows or columns of the table.

Table data cells are meant to contain the actual data. So, a typical table has more table data cells than table header cells.

If all rows do not have the same number of cells, the results are likely to be unpredictable across browsers.

04/19/23 Tables 6

A simple tableHere’s an example of a very simple table with four rows and four columns.

Note that there is one <tr> element for each row. Each row contains four cells. All the cells in the first row are <th> elements. The first cell in each row is also a <th> element. The remaining cells are <td> elements.

04/19/23 Tables 7

CaptionsA table may have a caption that describes its overall purpose.

Captions are added with the <caption> container element. The <caption> element must appear immediately after the <table>

start tag.

04/19/23 Tables 8

Frames and rulesEvery table has a frame and rules.

The frame surrounds the table. The rules divide the cells from one another. Unless you specify otherwise, the frame and rules for

a table are invisible. While it is often useful to have the frame and rules

remain invisible, it is sometimes useful to make them visible.

This is accomplished using attributes of the <table> element.

04/19/23 Tables 9

Using the border attributeThere are three different attributes of the <table> element that are used to control the frame and rules.

Most commonly, the border attribute is used. This attribute must be assigned a numeric value.

If the value is 0, the frame and rules remain invisible. Any value greater than 0, makes the frame and rules visible and specifies

the width of the frame in pixels. Although non-zero values make rules visible, the value of the border attribute

has no effect on the width of the rules.

04/19/23 Tables 10

Using the frame attributeFor more specific control over which parts of the frame are shown, use the <table> element’s frame attribute.

04/19/23 Tables 11

Using the rules attributeFor greater control over which rules are shown, use the <table> element’s rules attribute.

04/19/23 Tables 12

Using the cellspacing attributeUse the <table> element’s cellspacing attribute to control the thickness (in pixels) of the table’s rules. (default value is 2 pixels)

The rules occupy space even when they are invisible. Therefore, the value of the cellspacing attribute can also be used to control the space between

cells. Note that there are rules around all cells, so cellspacing also applies between the frame

and the cells on the outer edges of the table.

04/19/23 Tables 13

More table attributescellpadding – distance in pixels between the cell contents and the edge of the cell. (default value is 1 pixel)

width – width of table in pixels or percentage. If not included, browser decides. Best to use percentage.

align – use the values “right”, “center”, “left” (“left” is default)

04/19/23 Tables 14

Attributes for rows and cells

align

valign – vertical alignment. Values are “top”, “middle”, “bottom”

04/19/23 Tables 15

See example:http://pubpages.unh.edu/~ltv6/samples/liststables.html

04/19/23 Tables 16

Spanning rows and columnsBy default, each cell within a table occupies one row and one column.

It is possible, however, to have cells span multiple rows and/or columns. The <td> and <th> elements accept two attributes to accomplish this.

Use the rowspan attribute to specify how many rows a cell should span. Use the colspan attribute to specify how many columns a cell should span.

04/19/23 Tables 17

Page layoutPage layout refers to the process of organizing the components of a page.

A browser generally renders the elements of a page as it encounters them in the XHTML source.

Browsers render page components side by side to the extent permitted by the window width and then proceed with any remaining items on the next line.

Specifying which items should be side by side or one over the other is exactly what a table is meant to accomplish.

So, tables have been commonly used by Web authors as a means of specifying the layout of Web pages.

It is not recommended by the standards. The standards recommend using CSS for this purpose.

04/19/23 Tables 18

Reasons to use tables for page layout

Most importantly, they work. Virtually all visual browsers in use today support tables. They

do not all reliably support the CSS alternatives for page layout.

Table cells may contain virtually anything that can appear within a <body> element.

That includes paragraphs, headings, line breaks, logical divisions, horizontal rules, images, and more, even nested tables.

Table cells expand as necessary to accommodate whatever is placed within them. So, they are very flexible.

Table cells can span multiple rows and/or columns. This makes it possible to create very complex arrangements of cells .

When used for page layout, tables establish a structural framework for Web pages.

When the same structural framework is used as the basis of several pages, those pages have an inherent structural consistency.

04/19/23 Tables 19

Reasons to avoid tables for page layout

Although reasonably flexible, tables are fundamentally limited to an underlying grid-like arrangement of items.

While this level of flexibility is better than nothing, it is far from ideal.

The positioning capabilities of CSS are far more powerful and flexible.

Non-visual browsers (or visual browsers with limited screen capabilities) expect tables to be used to present tabular data.

When tables are used for page layout, such browsers are unable to accommodate them properly, leaving the page virtually inaccessible.

The use of tables for page layout often results in delays in the rendering process.

Before it can display a page based on a table, a browser must calculate the size of each cell within that table.

In many cases, this might involve waiting until additional resources have been retrieved from the server.

This delay can be compounded significantly by the use of nested tables.

04/19/23 Tables 20

See

http://pubpages.unh.edu/~ltv6/cis599/samples/chapter6/

http://pubpages.unh.edu/~ltv6/samples/tables/

04/19/23 Tables 21

A page layout example – step 1Generally, the first step in using a table for page layout is to sketch the general structure you envision for the page.

Draw out the rough proportions of each component area on the page.

Label each component area as a reminder of the purpose that area is meant to serve.

04/19/23 Tables 22

A page layout example – step 2The next step is to identify the number of rows and columns the underlying table requires.

We need to know the number of rows and columns the table would require if it were a “regular” table.

We start with a “regular” table. Then we make individual cells span

multiple columns and or rows as necessary to establish the “irregular” table we need.

To accomplish this, extend each line within the table so that it runs across the entire width or height of the table.

With each line extended, the underlying regular table will be easy to see.

In the example to the left, the table consists of six rows and three columns.

We therefore know that our <table> element will need to contain six <tr> elements.

04/19/23 Tables 23

A page layout example – step 3Now we determine the rows and/or columns each cell must span to accomplish our goal

For each component area in the sketch, use the line extensions to determine how many rows and/or columns it will need to span

Write your findings for each area right on the sketch.

04/19/23 Tables 24

A page layout example – step 4We now have all the info we need to begin writing our table, working down row by row*