DISPLAYING DATA WITH TABLES - HTML5 - page 109

Tabular data can be anything from a set of numbers to graphics to descriptive text. If you've
ever ordered parts for your car (or just about anything else), chances are, the parts are listed in
a tabular format. Usually, you'll i nd a description of the part, the part number, the year model
the part is for, the car model, and the price.

h e key to understanding tabular data is that it's laid out in rows and columns for displaying
information in common categories. Further, the purpose of a table is to clarify information so
that the user can i nd what she needs.

TABLE BASICS
h e basic elements of a table are

h e table itself, <table>
h e table rows, <tr>
h e table cells, <td>
h e table headers, <th>

Generally, a table caption <caption> is used at the top of the table. A clear table generally
has clearly marked column and row headings. h e cell in the upper-let corner is ot en let
blank so that the i rst column doesn't label the row heads; however, the standards state that no
cell be let empty. So, the corner cell in BasicTable.html contains “r/c” to i ll the space — for
now, at least. h e following example shows the basic table elements in a simple table. h e row
and columns both have headings, and the data cells represent data placed in the labeled rows
and columns.

113

<! DOCTYPE HTML >
< html >
< head >
< meta http - equiv = ”Content-Type” content = ”text/html; charset=UTF-8” >
< title > Basic Table </ title >
</ head >
< body >
< table >
< caption >
Rows and Columns in a Table
</ caption >
< tr >
< td > r / c
< th > Column 1
< th > Column 2
< th > Column 3
< tr >
< th > Row 1
< td > data a
< td > data b
< td > data c
< tr >