unit 4 create and use tables. title cornell notes topic: notes: name: date: 09/08/2009 period :...
TRANSCRIPT
Unit 4
Create and Use Tables
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/08/2009Period:
Summary:
Reasons for using tables
Unit 4
Page 1
• Display lists of information ~ a great way to neatly display lists of information.
•Create newspaper columns ~ to present information in columns like those found in a newspaper
•Control web page layout ~control the placement of text and images on your web pages
•Create borders ~ add colored borders
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/08/2009Period:
Summary:
Parts of a
Table
Unit 4
Page 1
Row
A row is a horizontal line of data.
Header Cell
A header cell contains text that describes the data in a row or column.
Data Cell
A data cell contains data.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/08/2009Period:
Summary:
Tables
Unit 4
Page 1
Creating a Table
Type <table> to begin. You will type </table> at the completion of your table.
Type <tr> before the text for each row of the table. Type </tr> after the text for each row in a table.
Type <th> in front of the text for each header cell. Type </th> after the text for each header cell.
Type <td> in front of the text for each data cell. Type </td> after the text for each data cell.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/08/2009Period:
Summary:
Tables
Unit 4
Page 1
Practice Assignment
Create a progress report for yourself.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/08/2009Period:
Summary:
Tables
Unit 4
Page 1
Period Subject Teacher Grade to Date
Comments Teacher Initials
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/08/2009Period:
Summary:
Adding Images to Tables
Unit 4
Page 2
You can add an image to a cell in a table. This helps control the placement of the image on your web page.
This would look like:
<table>
<tr>
<td> <img src=“?”> </td>
</tr>
</table>
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/08/2009Period:
Summary:
Practice Table
With Images
Unit 4
Page 2
Practice:
Text Image
Image Text
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/09/2009Period:
Summary:
Adding Borders
To tables
Unit 4
Page 3
In the <table> tag for the table you want to display a border, type border = ? replacing ? With the thickness you want to use for the border in pixels.
By default the border displays in grey or silver. To change the border color type bordercolor=? replacing the ? With a named color
<table border=6 bordercolor=blue>
Practice: Add a border with color to your progress report.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/09/2009Period:
Summary:
Adding a caption
to a table
Unit 4
Page 3
Type <caption> directly below the <table> tag for the table you want to display a caption.
Type the caption you want the table to display.
Type </caption> after the caption.
Practice:
Add the caption Progress Report to your Progress Report table.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/09/2009Period:
Summary:
NOWRAP
Unit 4
Page 3
Position the cursor in the <th> or <td> tag for the cell that contains text you want to appear on one line.
Type NOWRAP <td NOWRAP>September 19, 2009</td>
The web browser displays the text on one line.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/10/2009Period:
Summary:
COLSPAN
ROWSPAN
Unit 4
Page 3
In the <th> or <td> tag for the cell you want to span across columns, type colspan= ? replacing the ? with the number of columns you want the cell to span across.
<th colspan=?>
In the <th> or <td> tag for the cell you want to span down rows, type rowspan= ? replacing the ? with the number of rows you want the cell to span down.
<td rowspan=?>
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/10/2009Period:
Summary:
COLSPAN
Unit 4
Page 3
Practice:
Create a table of your favorite movies by genre:
Favorite Movies
SyFy Comedy Action Drama Horror
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/10/2009Period:
Summary:
ROWSPAN
Unit 4
Page 4
Practice:
Create a table of your musical artist:
Image of Artist Name of Artist
List favorite songs
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/11/2009Period:
Summary:
Align Data
Horizontally
Align Data
Vertically
Unit 4
Page 4
Position the cursor in the tag for the cell (<th> or <td>), row <tr> or <table>tag for the row containing the data you want to align horizontally.
Type align= ? replacing the ? with the way you want to align the data (left, center, or right).
<tr align =left>Position the cursor in the <tr> tag for the row containing the data you want to align vertically.Type valign= ? replacing the ? with the way you want to align the data (top, middle, or bottom).
<tr valign=middle>
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/14/2009Period:
Summary:
Adding color
to a table
Unit 4
Page 5
You can add color to a cell, a row, or an entire table to emphasize important information.
Position the cursor in the tag for the cell (<th> or <td>), row <tr> or <table> you want to add color to.
Type bgcolor=“?” replacing ? With the name or code for the you want to use (example: red or #FF0000).
<tr bgcolor=red>
The Web browser displays the cell, row or entire table in the color you specified.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/14/2009Period:
Summary:
Adding a background image to a table
Unit 4
Page 5
You can add a background image to a table to enhance the appearance of the table.
Position the cursor in the <table> tag for the table you want to display a background image.
Type background=“?” replacing ? with the location of the image on your computer.
<table border=5 background=“background.jpg”>
The Web browser displays the table with the background image you specified.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/15/2009Period:
Summary:
Changing the size of a table on your Web page.
Unit 4
Page 5
Position the cursor in the <table> tag for the table you want to resize.
To change the width, type width=“?” replacing ? with a width in pixels (example: 600) or as a percentage of the window (example:50%). The press the Spacebar.
To change the height, type height=“?” replacing ? with a width in pixels (example: 300) or as a percentage of the window (example:50%).
<table border=5 width=600 height=300>
The Web browser displays the table with the width and height you specified.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/15/2009Period:
Summary:
Changing the size of a cell to improve the layout of a table.
Unit 4
Page 6
Position the cursor in the <th> or <td>tag for the cell you want to resize.
To change the width, type width=“?” replacing ? with a width in pixels (example: 200) or as a percentage of the window (example:50%). The press the Spacebar.
To change the height, type height=“?” replacing ? with a width in pixels (example: 100) or as a percentage of the window (example:50%).
<th width=200 height=100>
The Web browser displays the cell with the width and height you specified. All the cells in the same row also display the new width or height.
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/15/2009Period:
Summary:
Cell Spacing
Unit 4
Page 6
You can change the amount of space between each cell in a table.
In the <table> tag for the table you want to change, type cellspacing=“?” replacing ? with the amount of space you want to appear between each cell in pixels.
<table border=8 cellspacing=10>
TITLECORNELL NOTES
TOPIC: NOTES:
Name: Date:09/15/2009Period:
Summary:
Cell Padding
Unit 4
Page 6
You can change the amount of space around the contents of each cell in a table.
In the <table> tag for the table you want to change, type cellpadding=“?” replacing ? with the amount of space you want to appear around the contents of each cell in pixels.
<table border=8 cellpadding=10>
The Web browser displays the table with the cell padding you specified.