xp 1 tutorial 4 designing a web page with tables
TRANSCRIPT
1
XP
Tutorial 4
Designing a Web Page with Tables
2
XP
Objectives
Create a text table Create a table using the <table>, <tr>,
and <td> tags Create table headers and captions Control the appearance of a table and
table text Create table cells that span several rows
or columns Use nested tables to enhance page design
Text Tables: Column Alignment Problems with Proportional Fonts
Columns look aligned
Columns lose alignment
Columns lose alignment
Proportional fonts assign a different amount of space for each character depending on the width of that character
Text Tables: Column Alignment with Fixed-Width Fonts
Fixed-width or mono-space fonts use the same amount of space for each character.
Use a fixed width font to ensure that the columns in your text tables remain in alignment.
Columns align regardless of font size
5
XP
Using the <pre> Tag The <pre> tag creates preformatted text and
retains any spaces or line breaks indicated in the HTML file.
The <pre> tag displays text using a fixed-width font.
By using the <pre> tag, the columns will retain their alignment no matter what font the browser is using.
Text Table Created with the <pre> Tag
text will appear in the browser as it appears here
7
XP
A Graphical Table can include background colors and colored borders with shading can control the size of tables cells, rows, columns and alignment
of text within the table
8
XPUsing the <table>, <tr>, and <td> Tags
Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure.
Each row of the table is indicated using a two-sided <tr> (for table row).
Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells.
9
XP
HTML Structure of a Tablebeginning of
the table structure
first row of six in the table
end of the table structure
table cells
10
XP
Creating Headings with <th>
HTML provides the <th> tag for table headings.
Text formatted with the <th> tag is centered within the cell and displayed in a boldface font.
The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text.
11
XPIdentifying the Table Heading,Body, and Footer HTML allows you to identify the different parts
of your table using the <thead>, <tbody>, and <tfoot> tags. <thead> is used for the table heading <tbody> is used for the table body <tfoot> is used for the table footer
These tags do not format the table, but they do contain collections of rows called row groups.
12
XPThe Table Heading, Body, and Footer Syntax
<table><thead>
<tr> heading information . . .</thead><tfoot>
<tr> footer information . . .</tfoot><tbody>
<tr> first group of table rows . . .</tbody><tbody>
<tr> second group of table rows . . .</tbody></table>
thead must be listed before tfoot
Both thead & tfoot must appear before tbody
13
XP
Creating a Table Caption
A caption is used to provide descriptive information. The syntax is:<caption>caption text</caption>
<caption style="font-weight: bold; text-align: left">
Race Results</caption> The <caption> tag must appear directly after
the opening <table> tag.
14
XPModifying the Appearance of a Table
You can modify the appearance of a table by adding: gridlines borders background color
HTML also provides tags and attributes to control the placement and size of a table.
15
XP
Adding a Table Border By default, browsers display tables without
table borders. The syntax for creating a table border is:
<table border=“value”> value is the width of the border in pixels
Unless you set the border size to 0 pixels, the size of the internal gridlines is not affected by the border attribute.
Tables with different borders sizes
<table border="5" bordercolor="brown“ bordercolorlight="tan“><caption style="font-weight: bold; text-align: left">
Race Results</caption>
17
XP
Table Frames The frames attribute determines which sides
of the table will have borders. <table frame=“type”>
type is “box” (default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, “void”
18
XP
Creating Table Rules The rules attribute controls how the table
gridlines are drawn. <table rules=“type”>
type is “all”, “rows”, “cols”, “none”, “groups”
19
XP
Controlling Cell Spacing The cellspacing attribute controls the amount
of space inserted between table cells. <table cellspacing=“value”>
value is the width of the interior borders the default cell spacing is 2 pixels
20
XP
Setting Cell Padding To control the space between the table text
and the cell borders, add the cellpadding attribute; refers to the space within the cells.
<table cellpadding=“value”> value is the distance from the table text to
the cell border the default cell padding value is 1 pixel
21
XPSetting the Cell Spacing to 0 andCell Padding to 4 Pixels
<table border="5" bordercolor="brown" bordercolorlight="tan"
cellspacing="0" cellpadding="4“ ><caption style="font-weight: bold; text-align:
left">Race Results</caption>
22
XP
Setting the Table Width <table width=“value”>
value is the width of the table in pixels or as a percentage of the display area
If you specify an absolute size for a table in pixels, its size remains constant, regardless of a user’s monitor’s size.
<table border="5" bordercolor="brown" bordercolorlight="tan”cellspacing="0" cellpadding="4" width="70%">
23
XP
Setting Cell and Column Width To set the width of an individual cell, add the
width attribute to either the <td> or <th> tags.
The syntax is: width=“value” value can be expressed either in pixels or
as a percentage of the table width a width value of 30% displays a cell that is
30% of the total width of the table
24
XP
Spanning Rows and Columns A spanning cell is a cell that occupies more
than one row or column in a table. Spanning cells are created by inserting the
rowspan and colspan attribute in a <td> or <th> tag.
The syntax for these attributes is: rowspan=“value” colspan=“value” value is the number of rows or columns that
the cell spans in the table
25
XP
Example of Spanning Cells
this cell spans three columns
This cell spans two
columns and two
rows
This cell spans
three rows
26
XPA Table Structure with a Row-Spanning Cell
HTML code
resulting table
four table cells in the first row
only three table cells are required
for the second and third rows
27
XP
Adding Spanning Cells to a Table<thead><tr><th colspan="2">Runner</th>
<th>Time</th><th>Origin</th></tr></thead>
<tbody><tr><td rowspan="3">Men</td><td>1. Peter Teagan</td><td>2:12:34</td><td>San Antonio, Texas</td></tr>
<tr><td>2. Kyle Wills</td><td>2:13:05</td><td>Billings, Montana</td></tr>
<tr><td>3. Jason Wu</td><td>2:14:28</td><td>Cutler, Colorado</td></tr>
<tr><td rowspan="3">Women</td><td>1. Laura Blake</td><td>2:28:21</td><td>Park City, Colorado</td></tr>
<tr><td>2. Kathy Lasker</td><td>2:30:11</td><td>Chicago, Illinois</td></tr>
<tr><td>3. Lisa Peterson</td><td>2:31:14</td><td>Seattle, Washington</td></tr></tbody>
28
XPResults of a Table with Spanning Cells
29
XP
Formatting Table Contents By using the align and valign attributes, you can
specify the text’s horizontal and vertical placement.
30
XP
Formatting Table Text Apply the same text and font styles to table
text. The style cascade down through the table
structure. <table border="5" style="font-family: Arial,
Helvetica, sans-serif; font-size:1em">- - -<tbody style="font-size: .8em">
Setting the background colors in the table
<tr style="background-color: yellow">
<td rowspan="3" valign="top” style="background-color: lightgreen">Women</td>
<td rowspan="3" valign="top“ style="background-color: lightblue">Men</td>
<table style="background-color: white">
Color styles cascade down thru the table structure
32
XPSetting the background image to a table A background-image style can be applied to
the entire table, to a row group, a row, or an individual cell using the style below
background-image: url(url)
33
XP
Aligning a Table on a Web Page By default, a browser places a table on the left
margin of a Web page, with surrounding text placed above and below the table.
To float the table, use the style below:float: positionwhere position is none (default), left, or right
<tablestyle="float: right; margin: 5 0 5 5">
34
XP
Working with Column Groups
To define a column group, add the following:<colgroup span=“value”>
columns </colgroup>value is the number of columns in the group, and columns are definitions for individual columns within the group
<colgroup span=“5” style=“background-color: white”>
<col style=“color: black” span=“2” /><col style=“color: red” /><col style=“color: blue” span=“2” />
</colgroup>
35
XP
Using Tables for Layout
1. Specify different backgrounds for the page and the table.
2. Columnar layout3. Sectional layout
Fixed-width and Fluid Layouts Challenges of Table Layouts
Table layout of the Gazette home page
4) address
1) newspaper logo
2) list of links 3) articles
90% of page width
content flows intothe rest of the page
120 pixels
<table width=“90%” cellpadding=“5”>
</table>
<tr><td colspan=“2”align=“center”></td>
</tr>
<tr><td width=“120” rowspan=“2”
valign=“top”></td>
<! - - Articles - - > <td valign=“top”></td></tr>
<tr><td valign=“top” align=“center”></td></tr>
Table layout for the article section
Marathon story
Highway 6 story Links tostories &features
60% 40%
<table cellspacing=“5” cellpadding=“5”>
</table>
<tr><td colspan=“2” valign=“top”></td></tr>
<tr><td width=“60%” valign=“top”></td><td width=“40%” valigh=“top”></td>
</tr>