Table header in HTML

Table header in HTML
 
Table header in HTML
  • Currently 4 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 4/5 (2 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


If there are too many tables on the page, it's convenient to set a header for each of them. The header would contain the name of the table and its description. For this purpose, there is a special HTML tag caption, which sets the position of the text relative to the table. The easiest way is to place the text at the top or at the bottom of the table, if you position the text elsewhere different browsers will interpret the tag caption in a different way, so the result may not be the same. By default, the header is placed at the top of the table in the center, its width does not exceed the width of the table but if the text is too long, the line brake is automatically implemented. To change title's position use the parameter align of the tag caption, which can have the following values.

  • left - aligns the header to the left edge of the table. Firefox browser puts the text to the side of the table, Internet Explorer, and Opera place the header at the top, with left alignment.
  • right - Internet Explorer and Opera place the header at the top of the table and align it to the right edge. Firefox displays the header to the right edge of the table.
  • center - the header is located at top of the table at its center. This location is specified in the browser by default.
  • top - the result is similar to the parameter center, but because it's included in the HTML 4 specifications, it's understood by all browsers.
  • bottom - the header is placed at the bottom of the table at its center.

As you can see, if the location of the header is to the right or left edge, it's difficult to get a universal code that would work the same way in different browsers. In this case, in styles to assist us there is an attribute text-align. Its purpose is to align the text to the desired edge. Example 1 shows how to set the header at the top of the table and align it to the right. Please note that the tag caption is inside the container table, that's its standard location.

Example 1. Creating table header with the tag caption.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head> 
    <style type="text/css">
      caption {
        text-align: right; /* Right alignment */
        font-style: italic; /* Italic text */
      }
    </style>
  </head> 
  <body>
    <table width="70%" border="1" cellpadding="4" cellspacing="0" align="center">
      <caption>Change in resource extraction by year</caption>
      <tr>
        <th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</th>
      </tr>
      <tr>
        <td>Oil</td><td>43</td><td>51</td><td>79</td>
      </tr>
      <tr>
        <td>Gold</td><td>29</td><td>34</td><td>48</td>
      </tr>
      <tr>
        <td>Wood</td><td>38</td><td>57</td><td>36</td>
      </tr>
    </table>
  </body>
</html>

Below you can see the result of the example. Notice that the header is not strictly aligned to the right edge of the table, because it as well as the contents of the cells, is effected by settings of the parameter cellpadding. Try to imagine that the header is just another cell, that is why cellpadding and cellspacing are effecting it.

The tag caption is very convenient to create a header, because the header becomes connected to the table and isn't shifted beyond the set limits. However, the same result can be achieved by using styles, as shown in example 2.

Example 2. Creating table header with styles.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      .caption {
        margin: 0px 15%; /* Paddings — top and the sides from the text */
        padding-bottom: 4px; /* Paddings — bottom from the text */
        text-align: right; /* Right alignment*/
        font-style: italic /* Italic text */
      }
    </style>
  </head> 
  <body>
    <p align="center" class="caption">Change in resource extraction by year</p>
    <table width="70%" border="1" cellpadding="4" cellspacing="0" align="center">
    ...
    </table>
  </body>
</html>

In this example a new class named "caption" is created, which is applied to the paragraph (tag p). In this case, the table on the web page is centered, that's why the same should happen with the paragraph. For this purpose, add margins to the left and right by setting the parameter margin. We do not indicate the width, because it is calculated by subtracting from the total width of the window (100%) double indentation on the left (in the example 15%). So it appears that the width of the text block coincides with the width of the table. If you use pixels as units, we recommend using the tag caption.


 

Read also

Table parameters in HTML

Table parameters in HTML

Creating tables in HTML

Creating tables in HTML

Table alignment in HTML

Table alignment in HTML

Tables and borders in HTML

Tables and borders in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation