xp 1 tutorial 4 designing a web page with tables
TRANSCRIPT
![Page 1: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/1.jpg)
1
XP
Tutorial 4
Designing a Web Page with Tables
![Page 2: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/2.jpg)
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
![Page 3: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/3.jpg)
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
![Page 4: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/4.jpg)
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
![Page 5: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/5.jpg)
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.
![Page 6: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/6.jpg)
Text Table Created with the <pre> Tag
text will appear in the browser as it appears here
![Page 7: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/7.jpg)
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
![Page 8: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/8.jpg)
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.
![Page 9: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/9.jpg)
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
![Page 10: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/10.jpg)
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.
![Page 11: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/11.jpg)
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.
![Page 12: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/12.jpg)
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
![Page 13: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/13.jpg)
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.
![Page 14: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/14.jpg)
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.
![Page 15: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/15.jpg)
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.
![Page 16: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/16.jpg)
Tables with different borders sizes
<table border="5" bordercolor="brown“ bordercolorlight="tan“><caption style="font-weight: bold; text-align: left">
Race Results</caption>
![Page 17: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/17.jpg)
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”
![Page 18: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/18.jpg)
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”
![Page 19: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/19.jpg)
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
![Page 20: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/20.jpg)
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
![Page 21: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/21.jpg)
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>
![Page 22: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/22.jpg)
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%">
![Page 23: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/23.jpg)
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
![Page 24: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/24.jpg)
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
![Page 25: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/25.jpg)
25
XP
Example of Spanning Cells
this cell spans three columns
This cell spans two
columns and two
rows
This cell spans
three rows
![Page 26: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/26.jpg)
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
![Page 27: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/27.jpg)
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>
![Page 28: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/28.jpg)
28
XPResults of a Table with Spanning Cells
![Page 29: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/29.jpg)
29
XP
Formatting Table Contents By using the align and valign attributes, you can
specify the text’s horizontal and vertical placement.
![Page 30: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/30.jpg)
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">
![Page 31: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/31.jpg)
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
![Page 32: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/32.jpg)
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)
![Page 33: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/33.jpg)
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">
![Page 34: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/34.jpg)
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>
![Page 35: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/35.jpg)
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
![Page 36: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/36.jpg)
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>
![Page 37: XP 1 Tutorial 4 Designing a Web Page with Tables](https://reader033.vdocuments.site/reader033/viewer/2022051416/56649dc75503460f94abb607/html5/thumbnails/37.jpg)
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>