Download Working with Tables: Module A: Table Basics

Working with Tables & Lists
LISTS BASICS
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
Creating Lists
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
Unordered Lists
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
Ordered Lists
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
Definition Lists
Working with Tables & Lists
TABLE BASICS
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
Creating Basic Tables
Creating Basic Tables
 Tables are also used to lay out Web pages,
much like frames are used
 The W3C discourages using tables for
document layout because tables can be
difficult for non-visual user agents to
interpret
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
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
Table Elements
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
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
Schedule Table
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
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
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 nonvisual user agents
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
Table Widths
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
Horizontal Alignment
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Borders
The frame Attribute
 You can include the frame attribute
in the <table> element to specify
which sides of the table should display
a border
Rules
 You can include the rules
attribute in the <table>
element to specify which rules
should appear in a table
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
Displaying Empty Cells
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
Cell Margins
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 on the next screen, it shows a
breakdown of the animal kingdom into
phylum and class
Cells that Span Multiple
Rows or Columns
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
Questions?