HTML rules Attribute

Introduction

The rules attribute on <table> once controlled which internal grid lines were drawn — between rows, columns, groups, or all cells. Values include none, rows, cols, groups, and all. Important: rules is obsolete in HTML5 and modern browsers often ignore it. Use CSS borders on th and td instead. This tutorial explains rules for reading legacy HTML and understanding how it differs from validation “rules” in other technologies.

What You’ll Learn

Purpose of rules Attribute

In HTML 4, the rules attribute let authors choose which internal borders appeared inside a table — horizontal lines only (rows), vertical only (cols), lines between row/column groups (groups), every cell edge (all), or none at all (none).

It was often used together with the legacy border attribute on <table> to control the outer frame versus inner grid lines. Today, CSS gives full control over table borders with predictable results across browsers.

📝 Syntax

Legacy syntax on <table> (historical reference):

<table border="1" rules="rows">
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<!-- Modern equivalent -->
<table class="data-table">...</table>

Syntax Rules

• Valid only on <table> elements.
• Value is one of: none, groups, rows, cols, all.
• Default is none when omitted.
• Historically paired with border and frame on the same table.
• groups expects structural groups like thead, tbody, colgroup.
• JavaScript: tableElement.rules = "cols" (string property).
• Not related to JSON Schema rules or form validation logic.

💎 Values

The rules attribute accepts these keyword values:

• rules="none" — No internal borders (default).
• rules="rows" — Borders between rows only.
• rules="cols" — Borders between columns only.
• rules="groups" — Borders between row groups and column groups.
• rules="all" — Borders between all rows and columns.

<table rules="rows">...</table>   <!-- horizontal lines -->
<table rules="cols">...</table>   <!-- vertical lines -->
<table rules="all">...</table>    <!-- full grid -->
<table rules="groups">...</table> <!-- group separators -->

How it Works

With rules="rows", the browser was meant to draw horizontal dividers between table rows. In modern browsers this effect is unreliable or absent — CSS achieves the same result consistently.

Applicable Elements

Legacy rules vs modern CSS

Examples Gallery

Legacy rules="rows" markup, dynamic table.rules in JavaScript, and the modern CSS border replacement.

<table border="1" rules="rows">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

<table id="dynamicTable" border="1">...</table>

<script>
  document.getElementById("dynamicTable").rules = "cols";
</script>

<style>
  .data-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 360px;
  }
  .data-table th,
  .data-table td {
    border: 1px solid #cbd5e1;
    padding: 0.55rem 0.75rem;
    text-align: left;
  }
  .data-table th {
    background: #f1f5f9;
  }
</style>

<table class="data-table">
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>30</td></tr>
    <tr><td>Jane</td><td>25</td></tr>
  </tbody>
</table>

♿ Accessibility

• Borders aid readability — Visible grid lines help sighted users track rows; achieve this with CSS, not obsolete rules.
• Do not rely on rules — Assistive technology does not expose rules semantics.
• Use table headers — Pair styled tables with <th> and scope for screen readers.
• Add a caption — <caption> describes the table purpose.
• Contrast matters — Ensure border colors meet contrast guidelines when they carry meaning.

💡 Best Practices