Transcript table - Department of Computer and Information Science

Creating Tables
with XHTML & CSS
CSCI N241: Fundamentals of Web Design
Copyright ©2006  Department of Computer & Information Science
Goals
By the end of this lecture, you should
understand how to …
• … create a table using XHTML.
• … specify a caption for a table.
• … specify styles for a table.
• … use colspan and rowspan.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Tables in Web Development
• When we design a website, we use
tables to display, go figure, tabular
information (rows and columns of data).
• Although common in early web
development, today we consider the
practice of using tables for page layout
taboo!
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Creating a Table
• A table's structure consists of the following
elements:
–
–
–
–
–
<table> - defines the start/end of a table.
<caption> - creates a caption for the table.
<tr> - defines the structure of a table row.
<th> - defines the header row/column of a table.
<td> - defines a table's cell.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
The summary Attribute
• Some screen readers and other types of
web agents for users with special needs
might not be able to render a table's
content.
• One of the ways in which we can
increase the accessibility of our table is
to use the summary attribute. We can
add a brief description of our table as
the value of the summary attribute.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Table Architecture
<table>
<th>Name</th>
DISTRICT
NAME
<td>Visclosky</td>
PARTY
<tr>
1
Visclosky
DEM
</tr>
<tr>
2
Donnelly
DEM
</tr>
<tr>
3
Souder
REP
</tr>
<tr>
4
Buyer
REP
</tr>
<tr>
5
Burton
REP
</tr>
<tr>
6
Pence
REP
</tr>
<tr>
7
Carson
DEM
</tr>
<tr>
8
Ellsworth
DEM
</tr>
<tr>
9
Hill
DEM
</tr>
Table 1.1: Indiana's Congressional Delegation
N241: Fundamentals of Web Development
<caption>
Copyright ©2006  Department of Computer & Information Science
Table Examples
• Download and unpack the file
n241CreatingTables_Examples.zip.
• Open the file
examples/columnHeaders.html.
• Open the file
examples/rowHeaders.html.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• Open the file journal/journal.html
in your editor.
• Remove the entire <ol>…</ol> near
the top of the page detailing cities that
Tony has visited.
• Replace the <ol> with a table that
imitates the table on the next slide …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Code this Table!
City
Date
Temperature
Altitude
Population
Diner
Rating
Walla Walla, WA
June 15th
75°
1,204 ft
29,686
4/5
Magic City, ID
June 25th
74°
5,312 ft
50
3/5
Bountiful, UT
July 10th
91°
4,226 ft
41,173
4/5
Last Chance, CO
July 23rd
102°
4,780 ft
265
3/5
Truth or
Consequences, NM
August 9th
93°
4,242 ft
7,289
5/5
Why, AZ
August 18th
104°
860 ft
480
3/5
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Now, For Some Style!
• Add the following styles to
css/journal.css:
table
{
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
}
continued …
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Now, For Some Style!
td,th
{
border: thin dotted gray;
padding: 5px;
}
caption
{
font-style: italic;
padding-top: 8px;
}
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Cell Border & Padding
• The padding property specifies the amount
of space between a cell's content and the
border of that cell.
• The border-spacing property specifies the
space between cells.
• Don't like the double lines that make up a
cell's border? Try adding the following to
your table rule:
border-spacing: 0px;
(Be sure to view the updates in both Firefox
and IE!)
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Using border-collapse
• Internet Explorer does not support the
border-spacing property.
• Another solution is to use the bordercollapse property. We can set bordercollapse to collapse so that the browser
will not render any border spacing.
• In your table rule, replace the borderspacing declaration with the following:
border-collapse: collapse;
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Adding Color
• Let's add some color! Add the following rules to your
CSS:
th
{
background-color: #C60;
}
.altRowColor
{
background-color: #FCBA7A;
}
• Next, apply the .altRowColor to every other <tr>,
beginning with the <tr> for Magic City in
journal.html.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Spanning Across Rows & Columns
• At times, we might have data cells that
will need to span across more than one
column or row.
• To achieve this, we can use the
rowspan or colspan properties.
• The value of rowspan and colspan
should be an integer number that
represents the number of rows or
columns a particular <td> spans.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
rowspan & colspan Examples
• To see an example of rowspan, see
examples/rowspan.html.
• To see an example of colspan, see
examples/colspan.html.
• To see an example of rowspan &
colspan, see
examples/combinedSpan.html.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Let's Try One!
• In journal.html, find the row for Truth or
Consequences, NM. Update it to look like the rows
below:
August 9th
Truth or
Consequences,
NM
93°
5/5
4,242 ft
August 27th 98°
7,289
4/5
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science
References
• Freeman, Elisabeth and Eric
Freeman. Head First HTML with
CSS & XHTML. Sebastopol, CA:
2006.
• Neiderst-Robbins, Jennifer. Web
Design in a Nutshell, Third
Edition. Sebastopol, CA: 2006.
N241: Fundamentals of Web Development
Copyright ©2006  Department of Computer & Information Science