Skip to content Skip to navigation

Connexions

You are here: Home » Content » Web Programming Quick Start: XHTML -- Tables

Navigation

Lenses

What is a lens?

Definition of a lens

Lenses

A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual Connexions member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

This content is ...

In these lenses

  • bethelwebdesign display tagshide tags

    This module is included inLens: Susan McClements's Lens
    By: Susan McClements

    Click the "bethelwebdesign" link to see all content selected in this lens.

    Click the tag icon tag icon to display tags associated with this content.

Recently Viewed

This feature requires Javascript to be enabled.

Tags

(What is a tag?)

These tags come from the endorsement, affiliation, and other lenses that include this content.

Web Programming Quick Start: XHTML -- Tables

Module by: Ronald Sawey. E-mail the author

User rating (How does the rating system work?)
Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

:
(0 ratings)

Summary: This module discusses how to add tables to your XHTML files. The tags discussed are <table>, <caption>, <tr>, <td>, and <th>

Introduction

The primary goal of this "Web Programming Quick Start" series is to get the reader to the point of doing something productive with a minimum of time and effort. It is not intended to be an exhaustive treatment/reference of any of the subjects discussed. This is also very much a work in progress. All comments, criticisms, suggestions, etc. are most welcome.

In the series of modules on XHTML (eXtensible HyperText Markup Language) and CSS (Cascading Style Sheets), we will be following the "current wisdom" on web page construction and design as exemplified by the three excellent web-related books of Rachael Andrew. Specifically, we will endeavor to keep the content and the styling/formatting of the web documents separate.

This module builds on material discussed in some other XHTML modules, e.g. creation of an initial XHTML file. A complete listing of the links to all XHTML and CSS modules is also available.

Segments of the XHTML source code are shown in this module as image files, but links are given to the XHTML files and the source is readily available from a browser via the menu bar using File/Save As... , View/Source, or something comparable.

Tables

As indicated earlier, we will leave the formatting/styling of the element being discussed (in this case a table) to our later discussion of CSS (Cascading Style Sheets) and endeavor to show the only basic specification of the structure.

If we asked ourselves what the structural elements of a table are, we would likely conclude that they are the rows, columns, individual cells, rows and/or columns that are "headers," and possibly a caption for the table. What follows reflects this. We will examine four examples of tables. The only variation will be in the "headers." A section of the Table dialog box for Dreamweaver shows the differences graphically. Figure 1 shows the different options.

Figure 1: Header Options for Table Specification
Figure 1 (headeroptions1.gif)

A Table with No Header

Our first example is tabledemo1.html. Figure 2 shows the XHTML code for the <body> section of this file and Figure 3 gives a Firefox browser view of the file.

Figure 2: XHTML Code for a Table without Headers
Figure 2 (tabledemocode1.gif)
Figure 3: Firefox Browser View of a Table without Headers
Figure 3 (tabledemoview1.gif)

Here is a discussion of the XHTML code:

  • Line 9: Opens the table element of this web document and is closed on Line 37. This table tag has two attributes. Strictly speaking a border specification (in this case it is 1 pixel), is a styling consideration, but we specify it here so that the resulting tables and their elements are more easily viewed. The summary attribute is used primarily for accessibility purposes, providing some more text information about the table for those who might not be able to view the table easily and/or are relying on a reader program.
  • Lines 10 - 12: Specifies the caption for the table. Placement should be done using CSS (Cascading Style Sheets).
  • Line 13: Opens the specification of the first row of data with the <tr> ("table row") tag.
  • Line 18: Closes specification of the first row of the table with </tr>
  • Line 14: Specifies the content of the cell in the first row and first column of the table. The content is contained between the <td> and </td> ("table data") tags.
  • Lines 19 - 24: Specify the content of the second row of the table.
  • Lines 25 - 30: Specify the content of the third row of the table.
  • Lines 31 - 36: Specify the content of the fourth row of the table.

A Table with Left Headers

Our second example is tabledemo2.html. Figure 4 shows the XHTML code for the <body> section of this file and Figure 5 gives a Firefox browser view of the file.

Figure 4: XHTML Code for a Table with Left Headers
Figure 4 (tabledemocode2.gif)
Figure 5: Firefox Browser View of a Table with Left Headers
Figure 5 (tabledemoview2.gif)

Lines 14, 20, 26, and 32 are the only lines different from our first example and show the changes for obtaining headers along the left side of the table. Notice that the first element in each row no longer has the <td> tag, instead it is replaced by the <th> ("table header") tag. The scope="row" attribute specifies that this is the header element for the current row.

You might also note that the default presentation in the Firefox browser (Figure 5) presents the headers boldfaced and centered in each header cell. We can style this as we like and will discuss this in our work on Cascading Style Sheets (CSS).

A Table with Top Headers

Our third example is tabledemo3.html. Figure 6 shows the XHTML code for the <body> section of this file and Figure 7 gives a Firefox browser view of the file.

Figure 6: XHTML Code for a Table with Top Headers
Figure 6 (tabledemocode3.gif)
Figure 7: Firefox Browser View of a Table with Top Headers
Figure 7 (tabledemoview3.gif)

Lines 14 through 17 are the only lines different from our first example and show the changes for obtaining headers along the top of the table. As with our second example, in the the cell, where we want to specify a header, we replace the <td> tags, with a <th> ("table header") tag. In this case the scope="col" attribute specifies that this cell is the header element for the current column.

As we observed earlier, the default presentation in the Firefox browser (Figure 5) presents the headers boldfaced and centered in each header cell. We can style this as we like and will discuss this in our work on Cascading Style Sheets (CSS).

A Table with Both (Left and Top) Headers

Our fourth example is tabledemo4.html. Figure 8 shows the XHTML code for the <body> section of this file and Figure 9 gives aFirefoxbrowser view of the file.

Figure 8: XHTML Code for a Table with Both (Left and Top) Headers
Figure 8 (tabledemocode4.gif)
Figure 9: Firefox Browser View of a Table with Both (Left and Top) Headers
Figure 9 (tabledemoview4.gif)

The relevant lines (14-17, 20, 26, and 32) are simply a combination of the previous two examples of left and top headers, and the presentation in Firefox is similarly a combination of what we saw in the previous two examples.

Dreamweaver and Tables

Dreamweaver alleviates the tedium associated with producing the structure of a table. From the menu bar, Insert/Table opens the Table dialog box shown in Figure 10. The settings shown initiate the generation of the first example (no headers) in this module. The only task remaining is to fill in the table, as shown in Figure 11

Figure 10: Table Dialog Box in Dreamweaver
Figure 10 (dwtable1.gif)
Figure 11: Table Ready for Entry of the Cell Values
Figure 11 (dwtable2.gif)

The Table dialog box is also available via the tablebutton.gif button in the Common category of the Insert Toolbar, shown in Figure 12.

Figure 12: Common Category of the Insert Panel
Figure 12 (insertpanel.gif)

Conclusion

The following might also be helpful:

  • Links to the other modules in this "Web Programming Quick Start" series are available
  • Links to other screen recordings for these modules are also available (time permitting).

Content actions

Give Feedback:

E-mail the module author | Rate module ( How does the rating system work?)

Rating system

Ratings

Ratings allow you to judge the quality of modules. If other users have ranked the module then its average rating is displayed below. Ratings are calculated on a scale from one star (Poor) to five stars (Excellent).

How to rate a module

Hover over the star that corresponds to the rating you wish to assign. Click on the star to add your rating. Your rating should be based on the quality of the content. You must have an account and be logged in to rate content.

(0 ratings)

Download:

Module PDF

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections directly in Connexions. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need a Connexions account to use 'My Favorites'.

| A lens (?)

Definition of a lens

Lenses

A lens is a custom view of Connexions content. You can think of it as a fancy kind of list that will let you see Connexions through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to Connexions materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual Connexions member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks