Chapter 4 class presentation
Upcoming SlideShare
Loading in...5

Chapter 4 class presentation






Total Views
Views on SlideShare
Embed Views



1 Embed 618 618


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Chapter 4 class presentation Chapter 4 class presentation Presentation Transcript

  • 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
  •  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
  • 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.
  •  Nesting: placing a table inside another table For example: placing a data table inside a page layout table
  •  Insert table: <table></table>: paired element tag Insert rows: <tr></tr>: paired element tag Insert columns: <td></td>: paired element tag
  •  Do not leave empty cells Use the non-character code: &nbsp; Prevents cell from collapsing
  •  There are 6 attributes used with table element <table>: 1. Align 2. Width 3. Border 4. Color 5. Cellpadding 6. Cellspacing
  •  Page Layout Table: 1. Align: Always centered 2. Width: Use percentage (%) <table width=“75%” align=“center”> </table>
  •  Page Layout Table: 1. Border: use “1” : remove border when table is completed if you want no border 2. Color: places background color to entire table <table width=“75%” align=“center” bgcolor=“purple” border=“1”> </table>
  •  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>
  •  5 attributes with the table data tag 1. Align 2. Valign 3. Background color 4. Nowrap 5. Width
  •  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>
  • <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”>
  •  Nowrap: forces cell contents to never wrap or go to next line; thus, other cells will automatically adjust
  •  4 Advanced formatting features: 1. Spanning (Attribute) 2. Table Head (Element) 3. Scope (Attribute) 4. Caption (Element)
  •  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>
  •  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>
  •  Caption for the Table <caption></caption> Visually positioned above or below table with “align” attribute <caption align= “top”>Minnesota Viking Merchandise Discounted</caption>
  • Description HTML Code SymbolAmpersand &amp; &Arrow double down &dArr;Arrow double left &lArr;Arrow double right &rArr;Arrow double up &uArr;Horizontal ellipsis &hellip; …Registered Trademark &reg; ®Trademark &trade; ™Spades &spades;Clubs &clubs;Hearts &hearts;Diamonds &diams;
  • Intro to Web Design