When you have to mark up data that is best presented in rows and columns (tabular data), it calls for
the <table> element. Some common examples of tabular data are calendars (where rows are weeks
and columns are the different days of the week) or comparison charts. When you think of tabular data
like this, you often think of spreadsheets and all the riveting data that goes along with them.
Fortunately, marking up tabular data is relatively easy, and XHTML gives you plenty of semantic elements
to organize your data appropriately. Let’s start with some example data and walk through the
process of marking it up with semantic XHTML elements (see Table 4-1).
Table 4-1. Simple Table Example
_______________________________
First Name Last Name Birthday
_______________________________
George Washington February 22, 1732
Abraham Lincoln February 12, 1809
_______________________________
Table 4-1 shows the first and last names of two American presidents, George Washington and Abraham
Lincoln, along with their birthdays. First things first: let’s create a table in your XHTML document to
contain this data. You do this with open and close <table> tags to create the containing <table>
element:
<table>
</table>
Next, let’s add the first row. Table rows are defined with the <tr> element:
<table>
<tr>
</tr>
</table>
This row has three distinct cells. XHTML table cells are marked up using the <td> element, which
stands for table data:
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Birthday</td>
</tr>
</table>
You now have a table with one row and three cells in that row. But you can do even better, since this
row is obviously a header that introduces what data you’ll find in the rows that follow. Using XHTML,
you can use the <thead> element to mark up your header data and indicate that this row has this special
purpose:
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Birthday</td>
</tr>
</thead>
</table>
Just as this introductory row is special, if you look closely, you’ll notice that each of these three cells
are special: they are column headings, not ordinary table data. To indicate this in your markup, you’ll
replace the <td> elements with <th> elements, meaning table heading. The <th> element is used for
any table cell that is a heading for either a column or a row (column in your case) to differentiate it
from regular table data.
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Birthday</th>
</tr>
</thead>
</table>
Now that your header is in place, you can start adding the bulk of the table’s data. Just like your
header data was enclosed in a <thead> element, you will wrap your body data in a <tbody> element.
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
To insert your individual data cells, you use the <td> element, with each row put inside a separate
<tr> element as before:
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td>George</td>
<td>Washington</td>
<td>February 22, 1732</td>
</tr>
<tr>
<td>Abraham</td>
<td>Lincoln</td>
<td>February 12, 1809</td>
</tr>
</tbody>
</table>
When viewed in a browser, this XHTML table will look something like Figure 4-8.
Figure 4-8. A minimal table with column
headings rendered in a web browser
An important thing to note about XHTML tables is that using this minimal markup, columns are created
by implication based upon the number of individual table data cells that exist in each row. With
three table data cells per table row element, you create a three-column table. If you add a table data
cell to the rows, you’ll have made a table with four columns, and so on. Using certain attributes
described in just a moment, you can modify this behavior slightly, but the important thing to remember
is that (in most cases), only table rows are structurally grouped together in the markup, whereas
the columns are usually implied.
Before you call your table complete, however, you’ll add a few more things that will make it truly
exemplary of semantic XHTML markup. By design, a data table is a very visual element that relates
data in columns and rows so a viewer can grasp a complicated concept or more easily understand a
large data set. For much the same reasons that you added the alt attribute to the <img> element,
you’ll provide some additional data about this table in text form.
First, you’ll add a <caption> element, which is (obviously) meant to be a caption for the table. You can
use this to provide a title for the table or perhaps an overview of its purpose. In this example, you
could use “American Presidents” as the caption. Next, you’ll add a summary attribute on the <table>
element. A table’s summary attribute is meant to hold more detail about what information is actually
displayed in the table, and, just like the alt attribute on <img> elements, the summary is read aloud
to visually impaired users who are browsing your web page with the aid of a screen reader. Let’s see
this in code:
<table summary="This table compares the first name, last name, and
birth date of George Washington and
Abraham Lincoln.">
<caption>American Presidents</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td>George</td>
<td>Washington</td>
<td>February 22, 1732</td>
</tr>
<tr>
<td>Abraham</td>
<td>Lincoln</td>
<td>February 12, 1809</td>
</tr>
</tbody>
</table>
Tables can have as many rows and columns as you’d like. As mentioned earlier, the number of <th> or
<td> elements inside the <tr> element(s) dictates the number of columns in the table, and the number
of <tr> elements dictates the number of rows.
Both <th> and <td> elements accept attributes called rowspan and colspan. These attributes indicate
how many rows or columns this particular cell spans. The rowspan attribute, as you can infer, describes
how many rows the particular cell spans, and colspan defines how many columns the cell spans. Let’s
take a look at an example using your “American Presidents” table.
Instead of having the individual header cells for the first name and the last name, let’s merge those
into one title cell called Name. Similarly, let’s take both birthday cells and merge them into one with
new content that merely states “A long time ago”:
<table summary="This table compares the first name, last name,
and birth date of George Washington and Abraham Lincoln.">
<caption>American Presidents</caption>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<tr>
<td>George</td>
<td>Washington</td>
<td rowspan="2">A long time ago</td>
</tr>
<tr>
<td>Abraham</td>
<td>Lincoln</td>
</tr>
</tbody>
</table>
You’ll notice in the markup that you need only two <th> elements now because the first one is taking
the place of two of them. Similarly, you don’t need the third <td> for the birthday column in the last
row because it’s being filled by the <td> from the previous row by the rowspan value.
Let’s see what this looks like in the markup. As shown in Figure 4-9, we shaded the two cell groups you
modified so you can see what change took place, though the shade wouldn’t show up in the actual
browser window
Figure 4-9. Cells in a table can be
merged together to span multiple
rows or columns
As you can see, tables provide a lot of flexibility and can be a great way to display certain kinds of
data. Before the advent of Cascading Style Sheets in modern web development, however, tables were
more often used to control the visual layout of a web page, which polluted the document’s semantics
and made web designers bend over backward to try to find clever ways of making their designs fit into
the grid-like structure dictated by tables.
Even today, some websites that simply have to look right in old browsers use tables for this purpose.
If you can avoid doing this, great, but if not, then remember this if you remember nothing else:
include an empty summary attribute on the <table> element. Just as you would provide an empty alt
attribute value on an image that serves no semantic purpose, so too must you declare a meaningless
table if you use one!
0 comments:
Post a Comment