Download - Chapter 4 class presentation
![Page 1: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/1.jpg)
Chapter 4: Using
Tables to Organize a
Website
Intro to Web Design
![Page 2: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/2.jpg)
4. Understands how to jazz up web pages using the table feature by being able to:◦ Define a table and write codes for tables and nested
tables◦ Insert attribute for the table tag and the table data tags◦ Insert table borders◦ Add text inside table cells◦ Insert and format both page layout tables and data tables◦ Insert advanced formatting features for tables◦ Insert page layout structural tags (masthead, content,
footer)◦ Create a home page and relative pages for a website◦ Use all codes from Chapter 1 to present◦ Define key terms within the chapter
ESSENTIAL OUTCOMES
![Page 3: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/3.jpg)
Flag Key (Windows) + E: Opens up the Computer Dialog Box
Flag Key + D: Places all open documents on the task bar
Alt + Tab: Allows you to move through all open documents
Ctrl + C: copies Ctrl + V: pastes
REVIEW
![Page 4: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/4.jpg)
1. Page Layout Tables: used to set up webpage; always centered aligned & width is always 75%
2. Data Tables: used to display content that makes sense living in a table inside page layout table, such as calendars, schedules or product pricing.
Two Types of Tables
![Page 5: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/5.jpg)
Nesting: placing a table inside another table
For example: placing a data table inside a page layout table
Nesting a Table
![Page 6: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/6.jpg)
Nesting a Table
![Page 7: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/7.jpg)
Insert table: <table></table>: paired element tag
Insert rows: <tr></tr>: paired element tag
Insert columns: <td></td>: paired element tag
Three table tags:
![Page 8: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/8.jpg)
Do not leave empty cells Use the non-character code:
Prevents cell from collapsing
Empty Cells in Table
![Page 9: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/9.jpg)
There are 6 attributes used with table element <table>:1. Align2. Width3. Border4. Color5. Cellpadding6. Cellspacing
Attributes for Table Element<table></table>
![Page 10: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/10.jpg)
Page Layout Table:1. Align: Always centered2. Width: Use percentage (%)
<table width=“75%” align=“center”>
</table>
Align & Width Attributes
![Page 11: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/11.jpg)
Page Layout Table:1. Border: use “1” : remove border when
table is completed if you want no border2. Color: places background color to entire
table
<table width=“75%” align=“center” bgcolor=“purple” border=“1”>
</table>
Border & Color Attributes
![Page 12: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/12.jpg)
Cellpadding : adds white space to inside of cells, creating breathing room between cell border and content
Cellspacing : adds white space to outside of cells, creating breathing room between individual cells themselves.
<table cellpadding=“10”></table><table cellspacing=“15”></table>
Cellpadding & Cellspacing Attributes
![Page 13: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/13.jpg)
5 attributes with the table data tag1. Align2. Valign3. Background color4. Nowrap5. Width
Attributes for Table Data Tag<td></td>
![Page 14: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/14.jpg)
Horizontal alignment: aligns data going across page: left, center, right
Vertical alignment: aligns data up & down: top, middle, bottom
<td align=“center”></td>
<td align=“center” valign=“top”></td>
Align & Valign Attributes
![Page 15: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/15.jpg)
<td> element: will place same color within a row of columns
<td bgcolor=“red”><td bgcolor=“green”>
<tr> element: will place color in a single cell
<tr bgcolor=“white”><tr bgcolor=“blue”><tr bgcolor=“orange”>
Background ColorUse with both <td><tr>elements
![Page 16: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/16.jpg)
Nowrap: forces cell contents to never wrap or go to next line; thus, other cells will automatically adjust
No Wrap Attribute
![Page 17: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/17.jpg)
4 Advanced formatting features:1. Spanning (Attribute)2. Table Head (Element)3. Scope (Attribute)4. Caption (Element)
Advanced Table Structures
![Page 18: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/18.jpg)
In web design, spanning cells means to “merge cells” together
Span rows or columns together To merge 3 columns:
<td colspan=“3”>Row 1 Column 1</td>
To merge 3 rows:
<td rowspan=“3”>Row 1 Column 1</td>
Spanning Cells
![Page 19: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/19.jpg)
Spanning Cells Example
![Page 20: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/20.jpg)
Table Heading: creates a title for each individual column or row
<th></th>
Table Heading Attribute
<th scope=“row”>Data here</th><th scope=“column”>Data here</th>
Table Headings & Its Attribute
![Page 21: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/21.jpg)
Caption for the Table
<caption></caption>
Visually positioned above or below table with “align” attribute
<caption align= “top”>Minnesota Viking Merchandise Discounted</caption>
Caption Element
![Page 22: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/22.jpg)
Description HTML Code Symbol
Ampersand & &
Arrow double down ⇓
Arrow double left ⇐
Arrow double right ⇒
Arrow double up ⇑
Horizontal ellipsis … …
Registered Trademark ® ®
Trademark ™ ™
Spades ♠
Clubs ♣
Hearts ♥
Diamonds ♦
![Page 23: Chapter 4 class presentation](https://reader036.vdocuments.net/reader036/viewer/2022081414/54bb102a4a79591c2b8b458a/html5/thumbnails/23.jpg)
That’s all folks!
On to the hands on work!
Intro to Web Design