Basics of Web Design Chapter 9 Tables revised

HTML Tables were often used to format the layout of a web page; now CSS is the preferred method for layout Tables are used now to 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, th, and td elements Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. 2

The Table Element <table> < table> Element Contains the table tr < > Element Contains a table row td < > Element Contains a table data cell <th> Element Contains a table header cell <caption> Element Configures a description of the table Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. 3

<table border="1"> <caption>Birthday List</caption> <tr> <td>Name</td> <td>Birthday</td> </tr> HTML Table Example 1 <tr> <td>James</td> <td>11/08</td> Birthday List </tr> <td>Karen</td> <td>4/17</td> </tr> <td>Sparky</td> <td>11/28</td> </tr> </table> Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. 4

<table border="1"> <tr> <th>Name</th> <th>Birthday</th> </tr> <td>James</td> HTML Table Example 2 Using the <th> Element <td>11/08</td> </tr> <td>Karen</td> <td>4/17</td> </tr> <td>Sparky</td> <td>11/28</td> </tr> </table> Copyright © 2016 Terry Ann Morris, Ed. D. 5

HTML border Attribute Indicates the table is specifically not used for page layout Optional border="1" Visible browser default border="" No visible browser default border Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. 6

HTML colspan Attribute <table border="1"> <tr> <td colspan=“ 2”> Birthday List</td> </tr> <td>James</td> <td>11/08</td> </tr> <td>Karen</td> <td>4/17</td> </tr> </table> Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. 7

HTML rowspan Attribute <table border="1"> <tr> <td rowspan="2">This spans two rows</td> <td>Row 1 Column 2</td> </tr> <td>Row 2 Column 2</td> </tr> </table> Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. 8

Accessibility and Tables For a simple table, Use table header elements (<th> tags) to indicate column or row headings. Put descriptive text in the caption element or directly in the web page For a simple table, where a column or row heading is marked up with td rather than <th> or where data cells marked up with td also function as a row or column header, use <td scope="col"> for a column heading or <td scope ="row"> for a row heading Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D.

Using scope Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. <table> <caption> Word Schedule</caption> <tr> <th>Day</th> <th>Hours</th> </tr> <td scope="row">Monday</td> <td>4</td> </tr> <td scope="row">Tuesday</td> <td>3</td> </tr> <td scope="row">Total</td> <td>7</td> </tr> </table>

Accessibility: headers & id Attributes Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. <table> <caption> Word Schedule</caption> <tr> <th id="day">Day</th> <th id="hours">Hours</th> </tr> <td headers="day">Monday</td> <td headers="hours">4</td> </tr> <td headers="day">Tuesday</td> <td headers="hours">3</td> </tr> <td headers="day">Total</td> <td headers="hours">7</td> </tr> </table>

– Accessibility for Complicated Tables one approach is to simplify the table, e. g. put the city right before the date, e. g. San Jose 25 -Aug-97 Travel Expense Report Meals San Jose 25 -Aug-97 37. 74 26 -Aug-97 27. 28 subtotals 65. 02 Seattle 27 -Aug-97 96. 25 28 -Aug-97 35. 00 subtotals 131. 25 Totals 196. 27 Copyright © 2016 Terry Ann Morris, Ed. D. Hotels Transport subtotals 112. 00 224. 00 45. 00 90. 00 379. 02 109. 00 218. 00 442. 00 36. 00 72. 00 162. 00 421. 25 800. 27 12

Code for Complex Table If the table is not restructured, one can use the headers and id attributes to associate the data with the appropriate headings. c 1, c 2, c 3, . . . are the id's of the column headings and r 1, r 2, r 3, . . . are the id's of the row headings. <table border="1"> <caption>Travel Expense Report</caption> <tr> <td></td> <th id="c 2">Meals</th> <th id="c 3">Hotels</th> <th id="c 4">Transport</th> <td id="c 5">subtotals</td></tr> <th id="r 2">San Jose</th> <td></td> </tr> <tr><td id="r 3" >25 -Aug-97</td> <td headers="c 2 r 3">37. 74</td> <td headers="c 3 r 2 r 3">112. 00</td> <td headers="c 4 r 2 r 3">45. 00</td> Copyright © 2016 Terry Ann Morris, Ed. D. 13

Complex Table code continued <td></tr> <td id="r 4">26 -Aug-97</td> <td headers="c 2 r 4">27. 28</td> <td headers="c 3 r 2 r 4">112. 00</td> <td headers="c 4 r 2 r 4">45. 00</td>. . . <tr><th id="r 10">Totals</th> <td headers="c 2 r 10">196. 27</td> <td headers="c 3 r 10">442. 00</td> <td headers="c 4 r 10">162. 00</td> <td headers="c 5 r 10">800. 27</td> </tr> </table> The highlighted cell with the value 37. 74, for example, is associated with the date "25 -Aug-97" (id="r 3"), the city "San Jose, " (id="r 2") and expense item "Meals" (id="c 2"). To make it readable, the subject cell is coded: < td headers="c 2 r 3">37. 74</td> Assistive technology might then read this cell "Meals, San Jose, 25 -Aug-97, 37. 74" or "37. 74 , Meals, San Jose, 25 -Aug-97. " Copyright © 2016 Terry Ann Morris, Ed. D. 14

Using CSS to Style a Table HTML Attribute CSS Property and example align Align a table: table { width: 75%; margin: auto; } Align within a table cell or caption: Use text-align property bgcolor table, tr, th, td {background-color: yellow} cellpadding table, td, th {padding: 10 px} cellspacing height table {border-collapse: separate; border-spacing: 10 px 50 px} – first value is horizontal, second is vertical, only for separate borders model table {border-collapse: separate} sets whether the table borders are collapsed into a single border, or separate as in standard html td, th {height: 50 px} valign tr, td, th {vertical-align: top} default is middle width table, td, tr {width: 80%} table, td, tr {width: 800 px} Copyright © 2016 Terry Ann Morris, Ed. D. These particular values would more likely be applied to table

CSS 3 Structural Pseudo-classes Pseudo-class Purpose : first-of-type Applies to the first element of the specified type. : first-child : last-of-type Applies to the first child of an element. (CSS 2 selector) Applies to the last element of the specified type. : last-child Applies to the last child of an element : nth-of-type(n) Applies to the “nth” element of the specified type. Values: a number, odd, or even Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. 16

Table Row Groups <thead> table head rows <tbody > table body rows <tfoot> table footer rows Copyright © 2016 Terry Ann Morris, Ed. D. Copyright © 2018 Terry Ann Morris, Ed. D. <table> <caption>Work Schedule</caption> <thead> <tr> <th>Day</th> <th>Hours</th> </tr> </thead> <tbody> <tr> <td>Monday</td> <td>4</td> </tr> <td>Tuesday</td> <td>3</td> </tr> </tbody> <tfoot> <tr> <td>Total</td> <td>7</td> </tr> </tfoot> </table>