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.
rules attribute is obsolete and should not be used in modern HTML. Use CSS borders to control the lines displayed between 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 EditorLearn 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.
Related Attributes
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.
