Your SlideShare is downloading. ×
Chapter 4 class presentation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chapter 4 class presentation

724

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
724
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Intro to Web Design
  • 2. 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
  • 3.  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
  • 4. 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.
  • 5.  Nesting: placing a table inside another table For example: placing a data table inside a page layout table
  • 6.  Insert table: <table></table>: paired element tag Insert rows: <tr></tr>: paired element tag Insert columns: <td></td>: paired element tag
  • 7.  Do not leave empty cells Use the non-character code: &nbsp; Prevents cell from collapsing
  • 8.  There are 6 attributes used with table element <table>: 1. Align 2. Width 3. Border 4. Color 5. Cellpadding 6. Cellspacing
  • 9.  Page Layout Table: 1. Align: Always centered 2. Width: Use percentage (%) <table width=“75%” align=“center”> </table>
  • 10.  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>
  • 11.  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>
  • 12.  5 attributes with the table data tag 1. Align 2. Valign 3. Background color 4. Nowrap 5. Width
  • 13.  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>
  • 14. <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”>
  • 15.  Nowrap: forces cell contents to never wrap or go to next line; thus, other cells will automatically adjust
  • 16.  4 Advanced formatting features: 1. Spanning (Attribute) 2. Table Head (Element) 3. Scope (Attribute) 4. Caption (Element)
  • 17.  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>
  • 18.  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>
  • 19.  Caption for the Table <caption></caption> Visually positioned above or below table with “align” attribute <caption align= “top”>Minnesota Viking Merchandise Discounted</caption>
  • 20. 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;
  • 21. Intro to Web Design

×