HTML Structure & Web Design Basics

1. Web Page Structure - Table HTML Structure & Web Design Basics Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

2. Learning Outcomes • Describe the recommended use of a table on a web page • Configure a basic table with the table, table row, table header, and table cell elements. • Configure table sections with the thead, tbody, and tfoot elements. • Configure a table to provide for accessibility • Use CSS to style an HTML table • Describe the purpose of CSS3 structural pseudo-classes Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

3. HTML Table • Tables are used on web pages to organize tabular information • Composed of rows and columns – similar to a spreadsheet. • Each individual table cell is at the intersection of a specific row and column. • Configured with table, tr, and td elements Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

4. The Table Element<table> • <table> Element Contains the table • <tr> ElementContains a table row • <td> ElementContains a table data cell • <th> ElementContains a table header cell • <caption> Element Configures a description of the table Capton { font-family: Verdana, sans-serif; font-weight: bold; font-size: 1.2em; padding-bottom: 5px} Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

5. HTMLTable Example Birthday List <table border="1"><caption>Birthday List</caption> <tr> <td>Name</td> <td>Birthday</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> <tr> <td>Sparky</td> <td>11/28</td> </tr> </table> Using the <th> Element <tr> <th>Name</th> <th>Birthday</th> </tr> Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

6. HTML border Attribute • Indicates the table is specifically not used for page layout • Optional • border=“1”Visible browser default border • border=“”No visible browser default border. Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

7. HTMLcolspan Attribute <table border="1"> <tr> <td colspan=“2”>Birthday List</td> </tr> <tr> <td>James</td> <td>11/08</td> </tr> <tr> <td>Karen</td> <td>4/17</td> </tr> </table> Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

8. HTMLrowspanAttribute <table border="1“> <tr> <td rowspan="2">This spans two rows</td> <td>Row 1 Column 2</td> </tr> <tr> <td>Row 2 Column 2</td> </tr></table> Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

9. Accessibility:headers & id Attributes <table> <caption> Word Schedule</caption> <tr> <th id="day">Day</th> <th id="hours">Hours</th> </tr> <tr> <td headers="day">Monday</td> <td headers="hours">4</td> </tr> <tr> <td headers="day">Tuesday</td> <td headers="hours">3</td> </tr> <tr> <td headers="day">Total</td> <td headers="hours">7</td> </tr> </table> Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

10. Using CSS to Style a Table Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

11. Using CSS Attributes <table border=1> <caption> Word Schedule</caption> <tr> <th id="day">Day</th> <th id="hours">Hours</th> </tr> <trbgcolor="#99CCFF"> <td >Monday</td> <td align=center >4</td> </tr> <tr> <td>Tuesday</td> <td align=left>3</td> </tr> <trbgcolor="#99CCFF"> <td >Total</td> <td align=right >7</td> </tr> </table> <TD vAlign=middle align=right width="502"> <A NAME="top"><font color="#185982" size=5> <TD>(<A Href="#top">go to the top</A>) </TD> Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

12. CSS3 Structural Pseudo-classes Eample: <tr:nth-of-type(even) {bgcolor="#eaeaea;}> <td>p:first-letter {font-size:3em; font-weight: bold; color: red} Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

13. <table> <caption>Work Schedule</caption> <thead> <tr> <th>Day</th><th>Hours</th> </tr> </thead> <tbody> <tr> <td>Monday</td><td>4</td> </tr> <tr> <td>Tuesday</td><td>3</td> </tr> </tbody> <tfoot> <tr> <td>Total</td><td>7</td> </tr> </tfoot> </table> Table Row Groups • <thead>table head rows • <tbody >table body rows • <tfoot> table footer rows Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design

14. Example – Student’s Program • <!-- Source File: sample_skills_for_project_2.html • * Purpose: Project 2 Assignment Student: KendijsJekabsons--> • <!doctype html> • <html> • <head><meta charset="utf-8"> • <title>eKenart | the one minute artworks</title></head> • <link rel="stylesheet" type="text/css" href="style/style.css"> • <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> • <div align="center"> • <imgsrc="images/blank.gif" width="32" height="40" border="0"> • <table border="0" cellpadding="0" cellspacing="0"> • <tr> • <td colspan="5" align="center"> • <imgsrc="images/blank.gif" width="32" height="20" border="0"></td> • </tr> • <tr> • <td background="images/line.gif"> • <imgsrc="images/blank.gif" width="2" height="21" border="0"></td> • <td><imgsrc="images/blank.gif" width="32" height="20" border="0"></td> • <td valign="top"> Week 10 03/18/2014 Course TECH 2150 Dr. Simon QiuTextbook Contents of Pearson Education, Basic of Web Design