xhtml1 tables and lists. xhtml2 objectives in this chapter, you will: create basic tables structure...

XHTML 1

Tables and Lists

XHTML 2

Objectives

In this chapter, you will:

• Create basic tables

• Structure tables

• Format tables

• Create lists

XHTML 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

XHTML 4

Creating Basic Tables

XHTML 5

• 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

Creating Basic Tables

XHTML 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

XHTML 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

XHTML 8

Table Elements

XHTML 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

XHTML 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

XHTML 11

Schedule Table

XHTML 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

• 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

XHTML 13

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

• 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

XHTML 14

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

• 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

XHTML 15

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

XHTML 16

Table Widths

XHTML 17

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

XHTML 18

Horizontal Alignment

XHTML 19

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

• 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

XHTML 20

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

XHTML 21

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

XHTML 22

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

• You can also include multiple <tbody> elements to control different parts of the table body

XHTML 23

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

• 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

XHTML 24

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

XHTML 25

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

• 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

XHTML 26

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

• However, you can adjust the widths of columns using the width attribute of the <colgroup> or <col> elements

XHTML 27

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

• 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

XHTML 28

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

• 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

XHTML 29

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

XHTML 30

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

XHTML 31

Borders

XHTML 32

The frame Attribute• You can include the frame attribute in the <table> element to

specify which sides of the table should display a border

XHTML 33

Rules

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

XHTML 34

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 (&nbsp;) as each cell’s content

XHTML 35

Displaying Empty Cells

XHTML 36

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

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

XHTML 37

Cell Margins

XHTML 38

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

XHTML 39

Cells that Span Multiple Rows or Columns

XHTML 40

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, bottom, and baseline

• The default valign attribute is “middle”

XHTML 41

Creating Lists

• Lists are a very important tool in proper Web page authoring because they provide a way of logically ordering a series of words or numbers

• They also provide a simple, yet effective design technique for making it easier for Web site visitors to locate information

• You can add three types of lists to a Web page; unordered lists, ordered lists, and definition lists

XHTML 42

Creating Lists

XHTML 43

Unordered Lists

• An unordered list is a series of bulleted items

• To define the items you want to appear in the bulleted list, you nest <li> elements within a <ul> element

XHTML 44

Unordered Lists

XHTML 45

Ordered Lists

• An ordered list is a series of numbered items

• To define the items you want to appear in the numbered list, you nest <li> elements within an <ol> element

XHTML 46

Ordered Lists

XHTML 47

Definition Lists

• A definition list is a series of terms and their definitions

• Web browsers render each term and its definition on separate lines with an indented left margin

• You create a definition list by using the <dl> element, you nest <dt> elements for term names and <dd> elements for term definitions

XHTML 48

Definition Lists

XHTML 49

Summary

• 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

• You create tables using the <table> element

• You create a cell within the <table> element using the <td> element

• You create a caption for a Web page table using the <caption> element

XHTML 50

Summary

• You use the width attribute of the <table> element to specify the size of a table

• You can create row groups in a table that consist of a table header, table body, and table foot

• Column groups are used for applying default alignment, width, and Cascading Style Sheets (CSS) styles to groups of columns within a table

• You can adjust the widths of columns using the width attribute of the <colgroup> or <col> elements

XHTML 51

Summary

• You include the frame attribute in the <table> element to specify which sides of the table should display a border

• You can use a <td> element to create an empty cell, but you must include the non-breaking space character entity (&nbsp;) as each empty cell’s content

• You can cause cells to span multiple rows or columns by including the rowspan or colspan attribute in the <td> or <th> elements

XHTML 52

Summary

• The valign attribute adjusts the vertical alignment of the contents of all table elements with the exception of the <table> and <caption> elements

• An unordered list is a series of bulleted items

• An ordered list is a series of numbered items

• A definition list is a series of terms and their definitions