Breadcrumbs

Too Easy XHTML - Tables [7]

XHTML offers an easy way to organize your data, known as tables. Tables organize data into a row and column environment for a tabular structure. It is the most efficient way of defining data, although many web designers often misuse tables, which we'll touch base on later.

Before we begin looking at code it is important that you know what tables are. Tables are divided into rows. These rows are further divided into table cells, which make up columns. Here is a visual example:

Example of table

Tables are a vast field in XHTML including many tags and attributes. Here we'll only be looking at the basics of tables to get you started.

Defining Tables and Table Elements

XHTML uses three main tags to define table parts - table (<table>), row (<tr>), and cell (<td>). Before you define any rows or cells you first have to define a table:

Code: XHTML

<table border="1">
    
</table>

Above I introduced you to the only table attribute that this tutorial will cover, border. The border attribute is for display and specifies the width of the table's border in pixels. This isn't a required attribute.

Now we can add rows and cells:

Code: XHTML

<table border="1">
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>

Example of table

Table cells (<td>) must be placed within rows (<tr>). Also make note that you cannot directly have content within the <tr> tag, this is considered wrong:

Code: XHTML

<table border="1">
    <tr>row 1</tr>
</table>

Table rows can only contain table cells or table headers. Those are the three building blocks of tables - tables, rows, and cells.

Table Headers

To further describe your tabular data you can set headers to describe the contents of that particular column. Table header tags (<th>) behave similar to cell tags (<td>). The only difference is that most web browsers bold table headers:

Code: XHTML

<table border="1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>

Example of table

Adding a Caption

You can further describe the data within your table using a table caption. Table captions help with accessibility in screen readers and text based browsers, for users who may not fully comprehend what the table contains. <caption> tags are placed directly within the <table> tag:

Code: XHTML

<table border="1">
    <caption>Demonstration Table</caption>
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <tr>
        <td>cell 3</td>
        <td>cell 4</td>
    </tr>
</table>

Example of table

Caption tags have no attributes and just contain text. Caption tags don't always look the greatest, but help greatly with accessibility. If you want to remove caption tags from view you can add a simple bit of CSS to your web page:

Code: XHTML

<style type="text/css">
    caption { display: none }
</style>

Place the above within your <head> tag and the captions won't appear, but still will render in a screen reader.

Proper Use of Tables

Preceding the CSS Boom tables were used for more than they were meant. The proper use of tables is to define tabular data. Tables were used to code layouts, creating twisted code that made the markup impossible to read.

Many designers still practice table layouts, although tables aren't meant for it. The messy, twisted code full of nested tables created mess markup. CSS relieved designers of this coding dilemma.

You should always use tables to define data in a record or spreadsheet format. Nothing is holding you back from using table layouts, but be reminded of their intended purpose.

Summary

You've learned the fundamentals of using tables in XHTML to organize data. Over the course of these seven lessons you've gotten a basic knowledge of XHTML and you're ready to start building your own website.