HTML, XHTML and CSS For Dummies
Book image
Explore Book Buy On Amazon

Creating tables can be error prone and difficult using the older HTML tags. In addition, they prove inflexible at times. It’s possible to create tables using another technique. All you need is a series of cascading

tags to perform the task.

[Credit: ©iStockphoto.com/Anton Cherstvenkov]
Credit: ©iStockphoto.com/Anton Cherstvenkov

Many developers have used tables for all sorts of tasks in the past. Of course, there is the use of tables to display data. However, tabular arrangements are also useful for creating forms to ensure the various elements align in a predictable manner. This second use of tables is problematic because it confuses some software such as screen readers. The problem becomes one of defining a well-organized page without creating problems for the people viewing it.

Using

tags to create a table makes it possible for viewers to see a table or a logical arrangement of controls with equal ease. This technique also has the benefit of not confusing screen readers and other software.

Defining the HTML for a

table looks somewhat like creating a table using the older tags, except you don’t have to worry about odd arrangements of arcane tags to do it. Here is the HTML for a table that contains a title, headings, and two rows of content.

<div class="Table">
    <div class="Title">
        <p>This is a Table</p>
    </div>
    <div class="Heading">
        <div class="Cell">
            <p>Heading 1</p>
        </div>
        <div class="Cell">
            <p>Heading 2</p>
        </div>
        <div class="Cell">
            <p>Heading 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 2 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 3</p>
        </div>
    </div>
</div>

Notice that each

level is defined using an easily recognized name, such as Table, Title, Heading, Row, and Cell. Using this naming method makes it a lot easier to figure out what each level of the table is supposed to do. You can find many different alternatives to this approach online, but this basic approach will serve you well.

The CSS for this table uses a few special properties and a little clever formatting. Here is the CSS used to make this example functional.

<style type="text/css">
    .Table
    {
        display: table;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }
</style>

Notice the use of the display property. This is the crucial property for your table because it tells the browser how to display a particular element. Otherwise, there isn’t anything strange of out of the normal about these styles. You define text attributes that help viewers differentiate between various table elements. Cells are separated from each other using a simple border. The following figure shows you how the table will appear when you view it in a browser.

image1.png

About This Article

This article can be found in the category: