- The article element, <article></article>.
- Similarly, the navigation ( <nav></nav>.
- header ( <header></header>.
- and footer ( <footer></footer>.
- To illustrate, consider a web page using division elements with id and class attributes to define the various parts of the page.
- Example 2.18 shows the HTML.
- Example 2.18: HTML divisions.
- <title>Example 2.18</title>.
- <div id="header">.
- <div id="logo">.
- <div class="navigation">.
- <ul id="top-menu">.
- <li><a href="home.html">Home</a></li>.
- <li><a href="about.html">About</a></li>.
- <li><a href="what.html">.
- </a></li>.
- <div id="content">.
- <div id="footer">.
- <ul id="bottom-menu">.
- Figure 2.18: using division elements Example 2.18: HTML divisions (continued).
- The id and class attributes used in Example 2.18 may be useful to the next web developer who works with the code, but they do not provide any useful information to search robots, because they are arbitrary names.
- An HTML5-aware robot, on the other hand, would be able to make greater sense of the page.
- Tables are defined by table tags, <table></table>.
- enclosing one or more table row elements, <tr></tr>.
- There are two different kinds of table cells: table header cells ( <th></th>.
- and table data cells ( <td></td>.
- Before this change, designers could only set the background color of the entire page..
- Example 2.19 generates a simple three-row-by-three-column table, and Figure 2.19 shows the result..
- Example 2.19: HTML markup for a simple table.
- <head><title>Example 2.19</title></head>.
- <th></th>.
- <th>lunch</th>.
- <th>dinner</th>.
- <th>kitchen</th>.
- <td>23</td>.
- <td>.
- 30</td>.
- <th>.
- dining room </th>.
- 31 </td>.
- 45 </td>.
- For the table displayed in Figure 2.19, it is important to note the following..
- First, the table is only as wide as it needs to be.
- Second, the caption is centered above the table because that is where table captions are placed by default, not because the caption element appears before the table rows.
- Finally, no grid lines indicate the table’s borders and cells.
- Grid lines are a function of the border attribute specified in the table tag and any CSS border properties assigned to the table’s elements..
- The table element has optional subelements for marking up logical groups of rows.
- The table head element ( <thead></thead>.
- table foot element ( <tfoot></tfoot>.
- and table body element ( <tbody></tbody>.
- Example 2.19: HTML markup for a simple table (continued).
- <th>row 1, col 1 head</th>.
- <th>row 1, col 2 head</th>.
- <td>row 2, col 1</td>.
- <td>row 2, col 2</td>.
- <td>row 3, col 1</td>.
- <td>row 3, col 2</td>.
- <td>row 4, col 1</td>.
- <td>row 4, col 2</td>.
- <td>row 5, col 1</td>.
- <td>row 5, col 2</td>.
- <td>row 6, col 1</td>.
- <td>row 6, col 2</td>.
- Here are some of the more useful attributes that can be added to the table tag:.
- width The table’s width, specified as either an absolute number of pixels or a percentage.
- height The table’s height, specified as either an absolute number of pixels or a percentage.
- border The pixel width of the table’s border and grid lines cellspacing The number of pixels between the “walls” of adjacent cells cellpadding The number of pixels between the “walls” of a cell and its.
- bgcolor The table’s background color, expressed as an RGB value The align attribute can also be added to table row and cell elements.
- But the values control the text alignment property of the cell contents, not the float- ing properties of the element, as with the table element.
- The valign attribute (vertical alignment) controls the vertical positioning of the content within a cell.
- Alignment specified at the table cell level has precedence over row align- ment, which has precedence over table body, head, or foot alignment.
- The width attribute sets an initial maximum width for the table to occupy..
- A browser attempts to adjust the cell sizes and word-wrap the contents of the cells to fit within this value.
- However, content always has a minimum width that is determined by the number of letters in the longest word or the width of the widest image.
- Therefore, it is possible for a table to be wider than the value of the width attribute’s value.
- By contrast, the height attribute sets an initial minimum height for the table.
- below cell contents, depending on the value of the align attribute.
- Adding a border attribute with a positive integer to the table tag turns on the table’s grid lines and draws a border around the entire table, excluding any caption.
- The table border is always that number of pixels thick.
- To make it look better, we will add some attributes to the table defined in Example 2.19, along with some CSS styles.
- Example 2.20 shows the HTML that generates the page shown in Figure 2.20..
- Example 2.20: providing table alignment and spacing.
- <title>Example 2.20</title>.
- <th>dining room</th>.
- <td>31 </td>.
- <td>45</td>.
- The table shown in.
- Example 2.20: providing table alignment and spacing (continued).
- Figure 2.20 has additional padding in the table cells because the width attri- bute sets a minimum width of 80 percent of the available space for the table, causing the cells to be stretched horizontally..
- Example 2.21 illustrates these techniques..
- Example 2.21: A table with spanned rows and columns.
- <title>Example 2.21</title>.
- <th rowspan gt;</th>.
- <th colspan gt;Distance from sun</th>.
- <th rowspan gt;Year<br/>Length</th>.
- <th rowspan gt;Day<br/>Length</th>.
- <th>Kilometers</th><th>AUs</th>.
- <th>Mercury</th>.
- <td> lt;/td><td>.
- .38</td><td>88 days</td><td>59 days</td>