Chapter 4: Using Tables to Organize a Website Intro to Web Design
Jan 18, 2015
Chapter 4: Using
Tables to Organize a
Website
Intro to Web Design
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
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
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
Nesting: placing a table inside another table
For example: placing a data table inside a page layout table
Nesting a Table
Nesting a Table
Insert table: <table></table>: paired element tag
Insert rows: <tr></tr>: paired element tag
Insert columns: <td></td>: paired element tag
Three table tags:
Do not leave empty cells Use the non-character code:
Prevents cell from collapsing
Empty Cells in Table
There are 6 attributes used with table element <table>:1. Align2. Width3. Border4. Color5. Cellpadding6. Cellspacing
Attributes for Table Element<table></table>
Page Layout Table:1. Align: Always centered2. Width: Use percentage (%)
<table width=“75%” align=“center”>
</table>
Align & Width Attributes
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
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
5 attributes with the table data tag1. Align2. Valign3. Background color4. Nowrap5. Width
Attributes for Table Data Tag<td></td>
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
<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
Nowrap: forces cell contents to never wrap or go to next line; thus, other cells will automatically adjust
No Wrap Attribute
4 Advanced formatting features:1. Spanning (Attribute)2. Table Head (Element)3. Scope (Attribute)4. Caption (Element)
Advanced Table Structures
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
Spanning Cells Example
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
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
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 ♦
That’s all folks!
On to the hands on work!
Intro to Web Design