Unit 4 Create and Use Tables

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : 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

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : 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.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Tables Unit 4 Page 1 Creating a Table Type to begin. You will type at the completion of your table. Type before the text for each row of the table. Type after the text for each row in a table. Type in front of the text for each header cell. Type after the text for each header cell. Type in front of the text for each data cell. Type after the text for each data cell.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Tables Unit 4 Page 1 Practice Assignment Create a progress report for yourself.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Tables Unit 4 Page 1 PeriodSubjectTeacherGrade to Date CommentsTeacher Initials

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : 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:

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Practice Table With Images Unit 4 Page 2 Practice: TextImage Text

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/09/2009 Period : Summary: Adding Borders To tables Unit 4 Page 3 In the 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 Practice: Add a border with color to your progress report.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/09/2009 Period : Summary: Adding a caption to a table Unit 4 Page 3 Type directly below the tag for the table you want to display a caption. Type the caption you want the table to display. Type after the caption. Practice: Add the caption Progress Report to your Progress Report table.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/09/2009 Period : Summary: NOWRAP Unit 4 Page 3 Position the cursor in the or tag for the cell that contains text you want to appear on one line. Type NOWRAP September 19, 2009 The web browser displays the text on one line.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/10/2009 Period : Summary: COLSPAN ROWSPAN Unit 4 Page 3 In the or 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. In the or 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.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/10/2009 Period : Summary: COLSPAN Unit 4 Page 3 Practice: Create a table of your favorite movies by genre: Favorite Movies SyFyComedyActionDramaHorror

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/10/2009 Period : Summary: ROWSPAN Unit 4 Page 4 Practice: Create a table of your musical artist: Image of ArtistName of Artist List favorite songs

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/11/2009 Period : Summary: Align Data Horizontally Align Data Vertically Unit 4 Page 4 Position the cursor in the tag for the cell ( or ), row or 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). Position the cursor in the 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).

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/14/2009 Period : 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 ( or ), row or you want to add color to. Type bgcolor=“?” replacing ? With the name or code for the you want to use (example: red or #FF0000). The Web browser displays the cell, row or entire table in the color you specified.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/14/2009 Period : 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 tag for the table you want to display a background image. Type background=“?” replacing ? with the location of the image on your computer. The Web browser displays the table with the background image you specified.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/15/2009 Period : Summary: Changing the size of a table on your Web page. Unit 4 Page 5 Position the cursor in the 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%). The Web browser displays the table with the width and height you specified.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/15/2009 Period : Summary: Changing the size of a cell to improve the layout of a table. Unit 4 Page 6 Position the cursor in the or 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%). 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.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/15/2009 Period : Summary: Cell Spacing Unit 4 Page 6 You can change the amount of space between each cell in a table. In the 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.

TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/15/2009 Period : 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 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. The Web browser displays the table with the cell padding you specified.