Transcript Tables - Department of Computer and Information Science

Working with Tables:
Module A: Table Basics
CSCI N241: Fundamentals of Web Design
Copyright ©2004  Department of Computer & Information Science
Goals
• To understand how to create basic
tables
• To understand how to use <th> and
<caption> elements
• To understand how to format tables
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Creating Basic Tables
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Table Elements
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Schedule Table
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Table Widths
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Horizontal Alignment
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Table Body
• You can also include multiple <tbody>
elements to control different parts of the
table body
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Column Widths
• However, you can adjust the widths of
columns using the width attribute of the
<colgroup> or <col> elements
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Borders
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The frame Attribute
• You can include the frame attribute
in the <table> element to specify
which sides of the table should
display a border
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
The frame Attribute
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Rules
• You can include the rules
attribute in the <table> element
to specify which rules should
appear in a table
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Rules
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Displaying Empty Cells
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Cell Margins
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Cells that Span Multiple Rows
or Columns
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Resources
• Slides were adapted from the
following text & companion lectures:
XHTML, Comprehensive
First Edition
Dan Gosselin
Published by Course Technology (2004)
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2004  Department of Computer & Information Science