HTML/Elements/table

From Web Education Community Group
< HTML‎ | Elements
Revision as of 13:18, 19 November 2011 by Rworth (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

<table>

The <table> element represents data with more than one dimension, in the form of a table.

Point

  • Tables must not be used as layout aids. There are a variety of alternatives to using HTML tables for layout, primarily using CSS positioning and the CSS table model.
  • Users might have difficulty understanding the content, authors should include explanatory information introducing the table. This information is useful for all users, but is especially useful for users who cannot see the table, e.g. users of screen readers.[Example B]
  • Tables have rows and columns given by their descendants. A table must not have an empty row or column.

HTML Attributes

  • summary = explanatory information introducing the table

See also global attributes.

Examples

Example A

[try it]:

<table>
  <caption>Characteristics with positive and negative sides</caption>
  <thead>
    <tr>
      <th>Characteristic</th>
      <th>Negative</th>
      <th>Positive</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Mood</th>
      <td>Sad</td>
      <td>Happy</td>
    </tr>
    <tr>
      <th>Grade</th>
      <td>Failing</td>
      <td>Passing</td>
    </tr>
  </tbody>
</table>

Table01.png

Example B

The following example is including explanatory information introducing the table by next to the table in the same figure [try it]:

<figure>
  <figcaption>Characteristics with positive and negative sides</figcaption>
  <p>Characteristics are given in the second column, with the
  negative side in the left column and the positive side in the right column.</p>
  <table>
    <thead>
      <tr>
        <th id="n">Negative</th>
        <th>Characteristic</th>
        <th id="p">Positive</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td headers="n r1">Sad</td>
        <th id="r1">Mood</th>
        <td headers="p r1">Happy</td>
      </tr>
      <tr>
        <td headers="n r2">Failing</td>
        <th id="r2">Grade</th>
        <td headers="p r2">Passing</td>
      </tr>
    </tbody>
   </table>
</figure>

Table02.png

HTML Reference

The HTML5 specification defines the <table> element in 4.9.1 The table element.

See also