Categories
HTML Tutorials

Applying borders to the table element

The table element defines the border attribute. When you apply this attribute, it tells the browser you are using the table to represent tabular data, rather than to lay out other elements. Most browsers respond to the border attribute by drawing borders around the table and each individual cell.

Using the border attribute
<html>
  <head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <table border="1">
      <caption>Results of the 2011 Fruit Survey</caption>
      <colgroup id="colgroup1">
        <col id="col1And2" span="2"/>
        <col id="col3"/>
      </colgroup>
      <colgroup id="colgroup2" span="2"/>
      <thead>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Color</th>
          <th colspan="2">Size & Votes</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Favorite:</th>
          <td>Apples</td>
          <td>Green</td>
          <td>Medium</td>
          <td>500</td>
        </tr>
        <tr>
          <th>2nd Favorite:</th>
          <td>Oranges</td>
          <td>Orange</td>
          <td>Large</td>
          <td>450</td>
        </tr>
        <tr>
          <th>3rd Favorite:</th>
          <td>Pomegranate</td>
          <td colspan="2" rowspan="2">
            Pomegranates and cherries can both come in a range of colors
                        and sizes.
          </td>
          <td>203</td>
        </tr>
        <tr>
          <th rowspan="2">Joint 4th:</th>
          <td>Cherries</td>
          <td rowspan="2">75</td>
        </tr>
        <tr>
          <td>Pineapple</td>
          <td>Brown</td>
          <td>Very Large</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th colspan="5">&copy; 2011 Adam Freeman Fruit Data Enterprises</th>
          </tr>
      </tfoot>
    </table>
  </body>
</html>

The value assigned to the border attribute must be 1 or the empty string (“”). This attribute doesn’t control the style of the border. You do that via CSS. You can see how Google Chrome responds to the presence of the border attribute below.