BASICS OF WEB DESIGN Chapter 9 Table Basics

HTML 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 Tables formerly were used for layout but this use is now discouraged in favor of using CSS for layout 2

HTML Table Elements <table> Contains the table <tr> Contains a table row <td> Contains a table data cell <th> Contains a table header cell <caption> Configures a description of the table 3

HTML Table Example <table border="1"> <caption>Birthday List</caption> <tr> <td>Name</td> <td>Birthday</td> </tr> <td>James</td> <td>11/08</td> </tr> <td>Karen</td> <td>4/17</td> </tr> <td>Sparky</td> <td>11/28</td> </tr> </table> Birthday List 4

<table border="1"> <tr> <th>Name</th> <th>Birthday</th> </tr> <td>James</td> <td>11/08</td> </tr> <td>Karen</td> <td>4/17</td> </tr> <td>Sparky</td> <td>11/28</td> </tr> </table> HTML Table Example 2 Using the <th> Element 5

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> 6

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> 7

Accessibility and Tables For a simple table, the W 3 C recommends using <th> to indicate row and column headings and the caption element to provide a title/caption for the table <table> <caption>Work Schedule</caption> <tr><th>Day</th> <th>Hours</th> </tr> <tr><td>Monday</td> <td>4</td> </tr> <tr><td>Tuesday</td> <td>3</td> </tr> <tr><td>Total</td> <td>7</td> </tr> </table>

Complex Tables For complex tables, headers & id are preferred by the W 3 C For simple tables, use of <th> is usually sufficient (without use of the scope attribute -- see http: //www. w 3. org/TR/2014/NOTEWCAG 20 -TECHS-20140916/H 63 ) 9

<table> <caption> Work 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: headers & id Attributes

– 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 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 11

Code for Complex Table Here is sample HTML mark up for the data cells of this table using the headers attribute. 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> 12

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. " 13

Using CSS to Style a Table HTML Attribute CSS Property to use instead– the table, th, td below indicates which tags the property can be applied to align Align a table: table { width: 75%; margin: auto; } Align within a table cell: text-align bgcolor table, th, td {background-color: yellow} cellpadding 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 "separated borders" model table {border-collapse: collapse} sets whether the table borders are collapsed into a single border or separated as in standard HTML. td, th {height: 50 px; } valign td, th {vertical-align: top} default is bottom width border table, th, td {width: 80%} table, th, td {width: 800 px} table, th, td {border: 1 px solid black; } background table, th, td {background-image: url('cat. jpg')}

<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> Table Row Groups <thead> table head rows <tbody > table body rows <tfoot> table footer rows Styling these tags permits you to style different portions of the table in different ways

CSS 3 Structural Pseudoclasses Pseudo-class Purpose : first-of-type Applies to the first element of the specified type. : first-child Applies to the first child of an element. (CSS 2 selector) : last-of-type 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 While not limited to tables, these can be useful in styling <tr> and <td> tags, e. g. alternating background colors for rows 16