Table of contents
There are many attributes that define the visual aspect of a table in HTML, but most of them can be replaced by style sheets. The benefits of using style sheets are many and the best way to use them is in external files. This way you can define classes that can later be used in the document with a "class" attribute declaration. Every tag that inserts visual elements contains this "class" attribute. To learn more about style sheets, please refer to our Cascading Syle Sheets (CSS) tutorial. We also strongly recommend to use style sheets to replace the deprecated tags and attributes.
First of all we'll show this example where attributes are defined to set some of the visual characteristics of the table. These attributes are: cellpadding, cellspacing, frame, rules and border. To learn more about these attributes see the HTML table tag page (and the pages of all other tags used in a table). This will help you to learn the full functionality of the tags.
| Code | View | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table border="1" frame="void" rules="groups" cellpadding="5" summary="Example for some visual characteristics of a table with grouping."> <colgroup style="width: 5.32em" /> <colgroup align="right" span="3" style="width: 3.04em" /> <colgroup style="width: 6.84em" /> <thead> <tr> <td></td> <th>VIT A</th> <th>VIT B</th> <th>VIT C</th> <th>Balance</th> </tr> </thead> <tbody> <tr> <th>January</th> <td>12.8</td> <td>42.6</td> <td>5.2</td> <td>Not completed</td> </tr> <tr> <th>Feubrary</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> <td>Not completed</td> </tr> <tr> <th>March</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> <td>Completed</td> </tr> </tbody> <tbody> <tr> <th>April</th> <td>10.5</td> <td>40.6</td> <td>7.4</td> <td>Completed</td> </tr> <tr> <th>May</th> <td>15.6</td> <td>25.2</td> <td>15.1</td> <td>Completed</td> </tr> <tr> <th>June</th> <td>10.1</td> <td>36.6</td> <td>4.8</td> <td>Completed</td> </tr> </tbody> </table> |
|
As this site is intended to teach all about HTML only, we'll define a small example of how a table's presentational attributes are defined using Cascading Style Sheets (CSS). To learn more about style sheets please refer to our Cascading Syle Sheets (CSS) tutorial. In this example we'll use the HTML style tag, that must be defined somewhere in the head of the document (see the HTML head tag), to set the CSS classes. The style classes for this example should be defined something like this:
And the application of these classes to a table should be done like this:
| Code | View | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <table class="exampletable" cellpadding="5" summary="Example for some visual characteristics of a table using Cascading Style Sheets."> <colgroup style="width: 5.32em" class="exampleheadercell" /> <colgroup align="right" span="3" style="width: 3.04em" class="examplelightcell" /> <colgroup style="width: 6.84em" class="exampledarkcell" /> <thead> <tr class="exampleheadercell"> <td></td> <th>VIT A</th> <th>VIT B</th> <th>VIT C</th> <th>Balance</th> </tr> </thead> <tbody> <tr> <th>January</th> <td>12.8</td> <td class="exampleredcell">42.6</td> <td>5.2</td> <td>Not completed</td> </tr> <tr> <th>Feubrary</th> <td>10.5</td> <td>30.1</td> <td>10.4</td> <td>Not completed</td> </tr> <tr> <th>March</th> <td>9.5</td> <td>31.5</td> <td>5.4</td> <td>Completed</td> </tr> </tbody> </table> |
|
Note how some cells receive many classes definitions (from cells, rows and columns). To solve these ambiguities, Cascading Style Sheets use a hierarchy that for this case is "cell > row > column" and goes through it searching for presentational attributes (the first definition overrides the rest).
There are more tags and attributes, some of them visual, that gives more information to browsers or spiders about the table. As you might read on this site, many of the tags and attributes produce a visual effect that can be achieved through other ways, but for some reason are there and haven't been deprecated. The main reason for most of them is that they give non-visual information that can be available for many other programs that may surf your site (e.g., spoken browsers, braille browsers, search engine spiders, mobile phones' browsers, etc.).
One of them, maybe the most important, is the caption of a table, defined through the HTML caption tag. The caption must describe briefly the nature of the table and is usually rendered somewhere near the table (it's position can be set using style sheets). Remember that the caption tag is only allowed right after the table start tag.
| Code | View | ||||||
|---|---|---|---|---|---|---|---|
| <table border="1" summary="Simple table example using caption."> <caption>Table's caption</caption> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table> |
|
You can also add information about the nature of the table using the summary attribute. The value of this attribute is intended to describe the table's nature in a longer way than the caption, helping to better understand the content of the table (see the HTML table tag).
Each cell may also have the "abbr" attribute, which gives an abbreviated version of the cell's content. The application of this attribute is subject to the browsers behavior, and will be probably rendered instead of the cell's content when the space is reduced (see the HTML td tag and the HTML th tag).