1. Working with Tables: Module A: Table Basics

2. Goals To understand how to create basic tables
To understand how to use <th> and <caption> elements
To understand how to format tables

3. Creating Basic Tables
Tables are collections of rows and columns that you use to organize and display data
In a table, the intersection of any given row and column is called a cell

4. Creating Basic Tables

5. Creating Basic Tables
Tables are also used to lay out Web pages, much like frames have been used
The W3C discourages using tables for document layout because tables can be difficult for non-visual user agents to interpret

6. Creating Basic Tables
Additionally, user agents with small monitors, such as Personal Digital Assistants (PDAs), and browsers that use large fonts may have difficulty rendering a Web page that is laid out using tables
The W3C encourages the use of Cascading Style Sheets (CSS) for document layout

7. Basic <table> Elements
You create tables using the <table> element
Within the <table> element you can nest a number of other elements that specify the content of each cell along with the structure and appearance of the table
The <table> element also includes several attributes that affect the appearance and structure of a table

8. Table Elements

9. The <td> Element
Cells are the most basic parts of a table
You create a cell within the <table> element using the <td> element
The <td> element stands for “table data”
The content of each <td> element is the data that will appear in the table cell

10. The <td> Element
Each <td> element essentially represents a column in the table
You declare table cells within table row elements that you create with the <tr> element
Each <tr> element you include within a <table> element creates a separate row

11. Schedule Table

12. The <th> Element
Table cells can contain two types of information: data that you define with the <td> element and heading information that you define with the <th> element

13. The <th> Element
User agents render the content of a <th> element in a distinct manner; most Web browsers display heading information in a bold typeface and align it in the center of the column

14. Captions and Summaries
Most tables include a caption that describes the data in the table
You create a caption for a Web page table using the <caption> element

15. Captions and Summaries
The <caption> element must be the first element following the <table> element, and you can include only a single <caption> element per table
A caption should provide a short phrase or title that clearly describes the contents of the table

16. Captions and Summaries
The <caption> element is important because it allows non-visual user agents to understand the purpose of a table
For short or simple tables, the <caption> element is usually sufficient for describing the purpose of the table

17. Captions and Summaries
For long or complex tables, however, you should also include the summary attribute of the <table> element, which allows you to provide a more detailed summary of a table’s structure and content for use in non-visual user agents

18. Table Widths
You use the width attribute of the <table> element to specify the size of a table
You can assign a fixed value in pixels or a percentage representing the visible width of a Web browser window

19. Table Widths

20. Horizontal Alignment
You can use the align attribute to adjust the horizontal alignment of the contents of all table elements with the exception of the <table> and <caption> elements
The values you can assign to the align attribute are left, center, right, and justify

21. Horizontal Alignment

22. Structuring Tables
Although table structure elements are not required in order for your documents to be well formed, it is a good idea to include them to clearly identify the different parts of your tables

23. Structuring Tables
Table structure elements also allow you to apply default alignment and CSS styles to entire sections of a table and to adjust the width of individual columns

24. Row Groups
You can create table row group elements that consist of a table header, table body, and table footer
To define a table header, you use the <thead> element; to define the table body, you use the <tbody> element; and to define the table footer, you use the <tfoot> element

25. Table Header
You must place the <thead> element after any <caption>, <colgroup>, and <col> elements and before the <tbody> and <tfoot> elements
Typically, you place table heading information (created with the <th> element) within the <thead> element, as shown on page 229 of the textbook

26. Table Body
The <tbody> element should contain the rows of data that make up the body of a table
You can use the <tbody> element to align a table body and to apply CSS formatting to the table body

27. Table Body
You can also include multiple <tbody> elements to control different parts of the table body

28. Table Footers
The <tfoot> element defines information that should be placed at the bottom of a table
You use the <tfoot> element to provide additional information about the columns or about the table itself

29. Table Footers
The <tfoot> element must be placed before the <tbody> element in order to allow a user agent to render the structure of the table before it receives the potentially large amount of data that may appear in the table body

30. Columns
There are times when you may want to format the columns in your tables, either individually or as a group
In this section you study column groups, which are used for applying default alignment, width, and CSS styles to groups of columns within a table

31. Column Groups
You use the <colgroup> element to create a column group in a table
You must place a <colgroup> element after a table’s <caption> element and before its <thead> element

32. Column Groups
The <colgroup> element can be created either as an empty element or as a tag pair that contains <col> elements as its content
The empty <col> element allows you to apply formatting to an individual column in a column group

33. Column Widths
You cannot use the <table> element’s width attribute to adjust the size of cells or columns in a table, which are determined automatically by each user agent
In addition, you cannot adjust the widths of individual table cells with the <td> and <th> elements

34. Column Widths
However, you can adjust the widths of columns using the width attribute of the <colgroup> or <col> elements

35. Using Tables to Simulate Frames
If you want to use tables to simulate frames, you create a table with the same number of cells as the number of frames you want

36. Using Tables to Simulate Frames
If you want to create two horizontal frames (one at the top of a page and one on bottom), you create a table with two rows, with each row containing a single <td> element
Similarly, if you want to create two vertical frames, you create a table with a single row containing two <td> elements

37. Using Tables to Simulate Frames
To create a navigation menu on the left and a content pane on the right, you would place a list of hyperlinks in the left cell and display each link’s associated content in the right cell

38. Using Tables to Simulate Frames
One of the big differences between frames and tables that simulate frames is that when you click a link in a table, the link opens an entirely new page in the same browser window—it does not display a new URL in a different area of the same page as occurs with frames

39. Formatting Tables
You should handle the visual display of content with CSS
Nevertheless, you can use several types of built-in table formatting options without CSS, even when using the Strict DTD

40. Borders
You use the <table> element’s border attribute to add a border to a table
The value you assign to the border attribute determines the thickness of the border in pixels

41. Borders

42. The frame Attribute
You can include the frame attribute in the <table> element to specify which sides of the table should display a border

43. The frame Attribute

44. Rules
You can include the rules attribute in the <table> element to specify which rules should appear in a table

45. Rules

46. Displaying Empty Cells
Web browsers do not render the borders around empty cells
To fix this problem, you need to add a <td> element for each empty cell, and include a non-breaking space character entity ( ) as each cell’s content

47. Displaying Empty Cells

48. Cell Margins
The cellspacing attribute specifies the amount of horizontal and vertical space between table cells
You assign to the cellspacing attribute a value representing the number of pixels that you want between table cells

49. Cell Margins
In comparison, the cellpadding attribute specifies the amount of horizontal and vertical space between each cell’s border and the contents of the cell

50. Cell Margins

51. Cells that Span Multiple Rows or Columns
You can cause cells to span multiple rows or columns by including the rowspan or colspan attributes in the <td> or <th> elements
As an example of the colspan attribute, the table in Figure 6-32 shows a breakdown of the animal kingdom into phylum and class

52. Cells that Span Multiple Rows or Columns

53. Vertical Alignment
You can use the valign attribute, which adjusts the vertical alignment of the contents of all table elements with the exception of the <table> and <caption> elements
The values you can assign to the valign attribute are top, middle (default value), bottom, and baseline

54. Resources
Slides were adapted from the following text & companion lectures:
XHTML, Comprehensive
First Edition
Dan Gosselin
Published by Course Technology (2004)

55. Questions?