Download Tables - UWSP Home Page

WDMD 170
Internet Languages
eLesson:
HTML/XHTML Tables
(NON-audio version)
© Dr. David C. Gibbs
2003-04
WDMD 170 – UW Stevens Point
1
Objectives
• Create basic tables
• Apply the fundamental table attributes to
customize an HTML table
• Utilize the colspan and rowspan attributes
to “merge” cells within a table
WDMD 170 – UW Stevens Point
2
What are Tables?
• Tables are collections of rows and
columns that you use to organize
and display information.
• In a table, the intersection of any
given row and column is called a
cell.
WDMD 170 – UW Stevens Point
3
Example of table use in a web page
WDMD 170 – UW Stevens Point
4
Example of table use in sample code
We have used tables in presenting some code
samples in the last eLesson. Visit the sample
files and view the source to see tables in
action. (In first example border=“1”, in the second border=“0”.)
validateEmailAddress.htm
eMailingFormData.htm
WDMD 170 – UW Stevens Point
5
How are tables used?
• Tables can be used to lay out Web
pages.
• The W3C discourages using tables
for document layout because tables
can be difficult for non-visual user
agents to interpret.
WDMD 170 – UW Stevens Point
6
Why not use 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.
WDMD 170 – UW Stevens Point
7
Why use Tables?
• Indeed, why use tables?
• There is a lot of HTML code out there
with tables, and, using CSS for
positioning is not trivial, so picking up
table skills is a good idea.
WDMD 170 – UW Stevens Point
8
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.
WDMD 170 – UW Stevens Point
9
Table Elements
These tags are placed between
<table> … </table>
WDMD 170 – UW Stevens Point
10
The <td> element, a cell
• 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
WDMD 170 – UW Stevens Point
11
The <tr> element, a row
• 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.
WDMD 170 – UW Stevens Point
12
eTask 1
•
•
•
•
•
•
Use the outstanding material at the w3schools site to create
your own “Introduction to Tables” web page.
Browse to http://www.w3schools.com/html/html_tables.asp
Work your way through their examples, copying and pasting
their code samples into your document, saving it as
IntroToTables.htm. (I have counted 19 different examples
you should copy into your page.) Be sure to label each
example with an explanatory description.
Here is a sample of how to get started.
Your page will scroll vertically a lot if you put all 19 examples
on the one page. While this is not good page design, I’ll
accept it here as your goal is to learn about HTML tables.
[You may construct several pages, linking them if you wish.]
Add the page to a folder labeled IntroToTables.
WDMD 170 – UW Stevens Point
13
eTask 2
Create a table (using border=“1”) of three rows
and three columns, as shown in the figure at right
Use appropriate colspan and rowspan attributes
to create the table (using border=“1”) shown at
right.
Here is a code sample that provides a hint.
Save the document as TablesUsingRowspanColspan.htm in your
IntroToTables folder.
WDMD 170 – UW Stevens Point
14
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.
• e.g.
<table width=“100%”>
<table width=“800”>
WDMD 170 – UW Stevens Point
15
Summary – p. 1
• 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
WDMD 170 – UW Stevens Point
16
Summary – p. 2
• You use the width attribute of the <table> element
to specify the size of a table.
• 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
WDMD 170 – UW Stevens Point
17
Assignment
• Revise your
GradingPage.htm page,
utilizing tables to organize
the multitudes of completed
exercises.
• Here’s how one student last
semester chose to do it. You
can use multiple tables (as is
done here) or a single table.
• The colors are provided by a
“style sheet”. (That’s NEXT
on our agenda!)
WDMD 170 – UW Stevens Point
18
End of eLesson
• Jump to the Beginning of this eLesson
• WDMD 170 Course Schedule
• D2L Courseware Site
WDMD 170 – UW Stevens Point
19