Fortalecimiento de las funciones de control, supervisión y sanción…

An HTML table contains rows and columns, and is used to organize and display information in a grid format. Some developers use tables for layout purposes, such as to position or align content with images, but that’s not the best use for tables.

Regarding markup, every HTML table begins with the <table> tag. Rows are marked by the

<tr> tag, column headers use the <th> tag, and cells are defined by the <td> tag.

The markup for a very basic two-column, five-row table is as follows. Comments have been added to indicate columns and rows, which are informational only and don’t appear when the document is viewed in a browser, is shown in Figure 3-11:

<table border="1">

<tr> <!--first row-->

<th>Quarter</th> <!--first column in first row-->

<th>Total Sales</th> <!--first row, second column-->

</tr>

<tr> <!--second row-->

<td>Q1</td>

<td>$4,349</td>

</tr>

CERTIFICATION READY How do you create a table?

2.4

Figure 3-10

An HTML document that includes article and aside elements

Aside

Building on a simple table, you can use the <caption> tag to add a caption above or below the table. To apply inline styles using HTML rather than CSS, use the <col> tag to apply styles to an entire column. (You’ll learn about inline formatting shortly.) The <colgroup>

tag groups columns within a table so you can apply formatting to the group rather than just a column.

When creating a long table that requires scrolling within a browser, use the <thead>,

<tfoot>, and <tbody> tags. The content within the table header and footer will remain on the page while the content marked by <tbody> will scroll between them.

The <thead> tag creates column headings (bolded by default), and the <tfoot> tag is used to display the last row, such as a totals row. The <tbody> tag defines all of the content between the header and footer.

The following is an example of the markup for a table with three columns and five rows, the first row being the column headings and the last row the table foot. The markup also includes a caption above the table. The markup is shown rendered by a browser in Figure 3-12:

<table>

<caption>Sales for Employee ID 2387</caption>

<colgroup span="2"

style="background-color:#EEE8AA;">

</colgroup>

You must include the thead and ^tfoot ele-ments before the ^tbody element so the browser can render the table header and footer before receiving all of the rows of data.

TAKE NOTE

*

Figure 3-11 A simple table

<tr> <!--third row-->

<td>Q2</td>

<td>$2,984</td>

</tr>

<tr> <!--fourth row-->

<td>Q3</td>

<td>$3,570</td>

</tr>

<tr> <!--fifth row-->

<td>Q4</td>

<td>$7,215</td>

</tr>

</table>

<colgroup

style="background-color:#00FA9A;">

</colgroup>

<thead>

<tr>

<th scope="col">Quarter</th>

<th scope="col">Total Sales</th>

<th scope="col">Goal Met?</th>

</tr>

</thead>

<tfoot>

<tr>

<th scope="col">Total</th>

<th scope="col">$18,118</th>

</tr>

</tfoot>

<tbody>

<tr>

<td>Q1</td>

<td>$4,349</td>

<td>Yes</td>

</tr>

<tr>

<td>Q2</td>

<td>$2,984</td>

<td>No</td>

</tr>

<tr>

<td>Q3</td>

<td>$3,570</td>

<td>Yes</td>

Figure 3-12

A more advanced version of a simple table

</tr>

<tr>

<td>Q4</td>

<td>$7,215</td>

<td>Yes</td>

</tr>

</tbody>

Notice in the preceding example the use of background color for grouped columns. This is an example of inline formatting. The style attribute uses one or more CSS properties and values, separated by semicolons. For HTML color, you can use either the color name or the hexadecimal code. The hexadecimal code #EEE8AA produces the pale goldenrod color. The hexadecimal code #00FA9A produces the spring green color. An HTML standard color chart is available at http://www.w3schools.com/html/html_colornames.asp.

You could also center the content in a cell, column, or column group using style="text-align:center". To string multiple properties and values in the same style attribute, use syntax similar to style="color:blue;text-align:center". CSS and its many proper-ties are covered in Lessons 4 through 6 of this book.

Table 3-3 summarizes the common elements used to build tables in HTML5.

Table 3-3

Common elements used to build tables

ELEMENT DESCRIPTION

col Defines a table column

colgroup Defines a group of columns in a table caption Marks text as a table caption

table Defines a table

tbody Defines a group of rows in a table for formatting and scrolling purposes

td Defines a table cell

tfoot Defines a group of footer rows in a table for formatting and scrolling purposes

th Defines a table header cell

thead Defines a group of heading rows in a table for formatting and scrolling purposes

tr Defines a table row

If you’ve created tables using HTML 4 or earlier, you might be familiar with the cell-padding, cellspacing, frame, rules, summary, and/or width elements. They are deprecated and not supported in HTML5.

TAKE NOTE

*