How to work with tables Chapter 10

Learning Outcomes Applied Use HTML to create tables with merged cells, captions, headers, and footers. Use CSS and the CSS3 structural pseudo-classes to format the tables that you create. Use the HTML5 figure and figcaption elements to treat a table as a figure. Use HTML to provide accessibility for tables. Knowledge Describe these components of a table: rows, columns, cells, header cells, data cells, table header, table footer, and table body. Describe the proper use of tables, now that CSS should be used for page layout. Describe the use of nesting and wrapping with tables. Describe the use of the table attributes for accessibility. 

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

HTML Elements for Coding Tables <table> Contains the table, (block display) <tr> Contains a table row <td> Contains a table data cell <th> Contains a table header cell <caption> Configures a description of the table, (block display); must be inserted immediately after the <table> tag.

<table> <tr> <th>Book</th> <th>Year Published</th> <th>Sales</th> </tr> <td>PHP and MySQL</td> <td>2014</td> <td>$372,381</td> . <th>Total Sales</th> <td></td> <td>$2,154,786</td> </table> HTML Table Example

HTML colspan Attribute <table> <tr> <td colspan="2">Birthday List</td> </tr> <td>James</td> <td>11/08</td> <td>Karen</td> <td>4/17</td> </table>

HTML rowspan Attribute <table> <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>

Grouping Table Content <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table

Table Row Groups Example <caption>Work Schedule</caption> <thead> <tr> <th>Day</th> <th>Hours</th> </tr> </thead> <tbody> <td>Monday</td> <td>4</td> <td>Tuesday</td> <td>3</td> </tbody> <tfoot> <td>Total</td> <td>7</td> </tfoot> </table> Table Row Groups Example

Enclosing Tables in Figures You can enclose a table in figure element and use the figcaption element in place of the table caption element <figure> <figcaption>Total Sales by Book</figcaption> <table> . </table> </figure>

Accessibility and Tables Use the caption element to provide the title/caption for the table OR enclose the table in figure element and use figcaption to provide the title/caption for the table. Use table header elements (<th> tags) to indicate column or row headings. Other attributes that provide for accessibility: headers & id scope

Table accessibility: headers, scope and id scope attribute Used on th elements; specifies whether a header cell is a header for a column, row, or group of columns or rows; typical values "col" or "row" id attribute Used on th elements to identify the element headers attribute Used on td elements; specifies a space-separated list of id's (from the th's) to one or more header cells the header cell is related to

The HTML for a table that provides for accessibility <caption>Total sales for books published from 2008 to 2012</caption> <thead> <tr> <th id="hdr_book" scope="col">Book</th> <th id="hdr_year" scope="col">Year Published</th> <th id="hdr_sales" scope="col">Sales</th> </tr> </thead> <tbody> <td headers="hdr_book">PHP and MySQL</td> <td headers="hdr_year">2014</td> <td headers="hdr_sales">$372,381</td>

The HTML for a table that provides for accessibility (cont.) <tr> <td headers="hdr_book">JavaScript and jQuery</td> <td headers="hdr_year">2015</td> <td headers="hdr_sales">$305,447</td> </tr> </tbody> <tfoot> <th id="hdr_total" scope="row">Total Sales</th> <td></td> <td headers="hdr_sales hdr_total">$2,154,786</td> </tfoot> </table>

Using CSS to Style a Table CSS Property Align a table: table { width: 75%; margin: auto; } Align within a table cell: text-align background-color padding border-spacing or border-collapse height vertical-align width border, border-style, or border-spacing background-image caption--side

CSS border-collapse property The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML. Values: separate, collapse Default Value: separate Recommended declaration: table{border-collapse:collapse;} separated borders collapsed borders

CSS3 Structural Pseudo-classes Purpose :first-of-type Applies to the first element of the specified type. :first-child Applies to the first child of an element. (CSS2 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

CSS that uses Pseudo-classes th:first-child, td:first-child {text-align: left; } th:nth-child(2), td:nth-child(2) {text-align: center; } tbody tr:nth-child(even) {background-color: silver; }