CS125 Spring 2014 Interim Tables The main purpose of an HTML table is to organize data in a two-dimensional grid. Many web designers have also used tables for the layout of entire web pages. This usage is now deprecated. CSS layouts are meant to replace table layouts. A table is made of rows, and optionally a caption: <table> <caption> ... </caption> <tr> ... </tr> <!-- table row --> <tr> ... </tr> <tr> ... </tr> <tr> ... </tr> </table> Each row may contain two kinds of cells: • standard cells: <td> ... </td> (table data) • header cells: <th> ... </th> (table header) Note: The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered above the table. 8-1
CS125 Spring 2014 Interim First example <table border="1"> <!-- the border attribute is deprecated in HTML5 --> <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> 8-2
CS125 Spring 2014 Interim First example with headers <table border="1"> <caption>Birthday List</caption> <tr> <th>Name</th> <th>Birthday</th> </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> 8-3
CS125 Spring 2014 Interim Common table attributes • border : Specifies the width of the borders around the table; example: border="1" • cellpadding : Specifies the space between the cell wall and the cell content; example: cellpadding="2" • cellspacing : Specifies the space between cells; example: cellspacing="5" • summary : Specifies a summary of the content of a table. It makes no visual difference in ordinary web browsers but it is used by screen readers; example: summary="This table contains ..." • width : Specifies the width of a table; examples: width="400" or width="75%" Side note: How to create an empty cell? 8-4
CS125 Spring 2014 Interim Common table cell attributes These attributes apply to both <td> and <th> elements: • align : Horizontally aligns the content in a cell; example: align="left" or align="center" or align="right" • valign : Vertically aligns the content in a cell; examples: valign="top" , valign="middle" , valign="bottom" , or valign="baseline" • colspan : Specifies the number of columns a cell should span; example: colspan="2" • rowspan : Specifies the number of rows a cell should span; example: rowspan="3" • headers : Specifies the table headers related to a cell. The headers attribute makes no visual difference in ordinary web browsers, but it can be used by screen readers; example: headers="name" (see Slide 8-7) 8-5
CS125 Spring 2014 Interim colspan and rowspan examples <table border="1" align="center"> <!-- the align attribute is deprecated in HTML5 --> <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> <br> <table border="1" align="center"> <tr> <td rowspan="2"> <img src="./pics/cake.png" alt="cake" height="100" width="100"> </td> <td>James</td> </tr> <tr> <td>11/08</td> </tr> </table> 8-6
CS125 Spring 2014 Interim Tables and accessibility • Use <th> elements to indicate column or row headings • Use <table> element’s “summary” attribute to give an overview of the table contents • For complex tables: associate table cell values with their corresponding headers – Use <th> tag “id” attribute – Use <td> tag “headers” attribute <table border="1" width="75%" summary="This table lists my educational background. Each row describes educational experience at a specific school."> <tr> <th id="school">School Attended</th> <th id="years">Years</th> <th id="subject">Subject</th> <th id="degree">Degree Awarded</th> </tr> <tr> <td headers="school">Schaumburg High School</td> <td headers="years">2000 - 2005</td> <td headers="subject">College Prep</td> <td headers="degree">H.S. Diploma</td> </tr> </table> 8-7
CS125 Spring 2014 Interim Table row groups The <tbody> tag is used to group the body content in an HTML table. This element should be used in conjunction with the “thead” and “tfoot” elements. The “thead” element is used to group the header content in an HTML table and the “tfoot” element is used to group the footer content in an HTML table. These three elements are meant to group table rows, that is, <tr> elements, together. <tfoot> must appear before <tbody> within a table, so that a browser can render the footer before receiving all the rows of data. Note that these elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table’s layout. 8-8
CS125 Spring 2014 Interim Table row groups: Example <table border="1" width="75%" summary="This table lists my educational background."> <thead> <tr> <th>School Attended</th> <th>Years</th> </tr> </thead> <tbody> <tr> <td>Schaumburg High School</td> <td>2005 - 2009</td> </tr> <tr> <td>Harper College</td> <td>2009 - 2010</td> </tr> </tbody> </table> 8-9
CS125 Spring 2014 Interim Styling tables with CSS HTML attribute CSS property align To align a table: table { width: 75%; margin: auto; } To align within a table: text-align valign vertical-align cellpadding padding cellspacing To configure a shared common border and eliminate space between table cells: table, td, th { border-collapse: collapse; } height height width width background-image background-color color caption-side 8-10
Recommend
More recommend
