HTML rules Attribute

The obsolete HTML rules attribute was historically used on the <table> element to control which borders were displayed between rows, columns, and groups of table cells.

Historical Syntax

The rules attribute was placed on the <table> element and used a keyword to determine where internal dividing lines were displayed.

<table rules="all">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Garden Gloves</td>
    <td>$12.00</td>
  </tr>
</table>

In this example, rules="all" requested dividing lines between both rows and columns.

Historical Values

The rules attribute supported several values for controlling the internal lines of a table.

Value Historical Effect
none Displayed no internal rules.
groups Displayed rules between row groups and column groups.
rows Displayed horizontal rules between rows.
cols Displayed vertical rules between columns.
all Displayed rules between rows and columns.

Historical Elements

The obsolete rules attribute was associated with the <table> element.

Element Historical Purpose
<table> Controlled which dividing lines appeared between rows, columns, and groups within a table.

Historical Use

The rules attribute allowed authors to control internal table borders without defining the appearance of each individual cell.

<table rules="rows">
  <tr>
    <th>Plant</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>Tomato</td>
    <td>Vegetable</td>
  </tr>
  <tr>
    <td>Rose</td>
    <td>Flower</td>
  </tr>
</table>

With rules="rows", horizontal dividing lines were requested between table rows while vertical lines between columns were not.

The rules attribute controlled internal table lines. The historical frame attribute separately controlled which borders appeared around the outside of the table.

Why It Became Obsolete

The rules attribute controlled presentation directly through HTML. Modern HTML uses CSS to control table borders and other visual characteristics.

CSS provides much more precise control because borders can be applied to specific cells, rows, columns, headers, and table sections. Their width, style, and color can also be controlled independently.

Modern Alternative

Use CSS borders to create the internal dividing lines that were historically controlled by rules.

Historical HTML

<table rules="rows">
  ...
</table>

Modern HTML

<table class="row-rules">
  <tr>
    <th>Plant</th>
    <th>Type</th>
  </tr>
  <tr>
    <td>Tomato</td>
    <td>Vegetable</td>
  </tr>
  <tr>
    <td>Rose</td>
    <td>Flower</td>
  </tr>
</table>

Modern CSS

.row-rules {
  border-collapse: collapse;
}

.row-rules th,
.row-rules td {
  padding: 10px;
  border-bottom: 1px solid #999;
}

This example creates horizontal lines between table cells. CSS can also create vertical lines or borders on every side of each cell when a different appearance is required.

Play in Editor

Learn More About CSS Tables and Borders

The CSS tutorials explain how to style tables and control borders:

  • CSS Styling Tables - Learn how CSS controls the appearance of HTML tables.
  • CSS Borders - Learn how to control border width, style, and color with CSS.

Legacy Browser Support

The rules attribute was supported by older browsers as part of traditional HTML table presentation.

Modern browsers may continue to recognize legacy uses for compatibility with older webpages, but new and updated webpages should use CSS borders to control internal table lines.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Other obsolete presentational attributes historically associated with tables include:

  • frame - Historically controlled which borders appeared around the outside of a table.
  • border - Historically controlled table and cell borders.
  • bordercolor - Historically controlled border color in supporting browsers.
  • cellpadding - Historically controlled spacing inside table cells.
  • cellspacing - Historically controlled spacing between table cells.

Specifications

The rules attribute on the <table> element is obsolete and should not be used in modern HTML. CSS should be used to control borders between table cells. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.