How to Build Tables in HTML5

Sometimes your web page includes data best presented in a table. You can use HTML5's full-featured table system to create tables like the one in this example:

image0.jpg

The basic structure of a table in HTML format is reasonably easy to understand; check out the code that created the table in the example:

<!DOCTYPE HTML>
<html lang = "en">
  <head>
    <title>basicTable.html</title>
    <meta charset = "UTF-8" />
    <style type = "text/css">
    table, td, th {
      border: 1px solid black;
    } 
    </style>
  </head>
  
  <body>
    <h1>A Basic Table</h1>
    <h2>HTML Superheroes</h2>
    <table>
      <tr>
        <th>Hero</th>
        <th>Power</th>
        <th>Nemesis</th>
      </tr>
    
      <tr>
        <td>The XMLator</td>
        <td>Standards compliance</td>
        <td>Sloppy Code Boy</td>
      </tr>
    
      <tr>
        <td>Captain CSS</td>
        <td>Superlayout</td>
        <td>Lord Deprecated</td>
      </tr>
    
      <tr>
        <td>Browser Woman</td>
        <td>Megacompatibility</td>
        <td>Ugly Code Monster</td>
      </tr>
    
    </table>
  </body>
</html>

Examining the code shows that a table is simply a set of carefully nested tags. The process for building a table is not difficult, but it does require some forethought.

  1. Plan your table so that you know how many columns you want, and which rows or columns will be headlines.

    Sketching out your table on paper first is a good idea, especially if it's at all complicated.

  2. Begin the table with the <table> tag.

    The <table></table> pair encloses the entire table.

  3. Create a table row with the <tr></tr> pair.

    A table is just a series of rows. You need the <tr></tr> pair to enclose each row of data.

  4. Signify headings with <th>.

    Often, the top row (and maybe the left-most column) contain headings. Use the <th></th> pair to signify text that should be treated as a heading cell. By default, such cells are generally bolder and centered, but that can be changed with CSS.

  5. Specify ordinary data cells with the <td></td> pair.

  6. Keep the number of cells consistent across rows.

    As you become more familiar with HTML5 tables, you can find ways to extend a cell across multiple rows or columns.

  7. Add CSS as needed.

    Tables have a basic format, which you can change with CSS — to add borders, for example.

Although HTML5 users have developed ways to use tables for layout purposes, CSS provides all the page layout techniques you need, so use HTML5 tables for their intended purpose: presenting tabular data.

blog comments powered by Disqus
Advertisement
Learning anything is easy with For Dummies eLearning!

Inside Dummies.com