Articles → HTML → Rules attribute in HTML

Rules attribute in HTML

In HTML we can control the way borders in HTML tables are displayed. This means, that we can specify whether we want to display the border between the rows or the border between the columns of the table.

Objective of this Tutorial

The objective of this tutorial is to impart information regarding the ‘rules’ attribute and its properties.

Technical knowledge

In order to understand this tutorial you should have knowledge of HTML.

Rules

HTML provides rules attribute that can be used to specify which parts of the inside borders of the table you want to display. In this tutorial we will explore different values of the attribute and compare the output.

Syntax for rules is as follows:

<table rules= "values">

There are 5 attributes values:

     1. rows – to display lines between rows

     2. cols – to display lines between columns

     3. groups – to display lines between rows and column groups

     4. none – to hide all the lines

     5. all – to display all the lines between rows and columns

The ‘rules’ attribute is supported by following browsers:

     1. IE 9+

     2. Firefox

     3. Opera

     4. Chrome

     5. Safari

IE 8 and its versions before that do not support this attribute and Chrome and Safari may display it incorrectly.

Create a HTML table

Let us find out the output of each value one by one. The first requirement for working on this attribute is to create a HTML table and add controls.

<html>
<body>
    <form method="Post">
    <table border="1">
        <thead>
            <tr>
                <td>
                    Label
                </td>
                <td>
                    Fields
                </td>
            </tr>
        </thead>
        <tr>
            <td>
                User Name
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
        <tr>
            <td>
                Address
            </td>
            <td>
                <input type="text" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

The output for the code mentioned above looks like this:

Click to Enlarge

rows

When 'rules' is set to value 'rows' then all the horizontal borders are displayed between all table rows. The code for this is shown below:

<table border="1" rules="rows">
  <!--Internal rows and columns will remain same-->
</table>

The output will be as shown below:

Click to Enlarge

cols

When ‘rules’ is set to value ‘cols’ then all the vertical borders are displayed between the columns of the table. Have a look at the example given below:

<table border="1" rules="cols">
  <!--Internal rows and columns will remain same-->
</table>

The output for this would be as follows:

Click to Enlarge

groups

When ‘rules’ is set to value ‘groups’ then horizontal borders appears between all tHead, tBody, and tFoot objects. Here, have a look at the following example:

<table border="1" rules="groups">
  <!--Internal rows and columns will remain same-->
</table>

The output for this piece of code will be as follows:

Click to Enlarge

none

When ‘rules’ are set to ‘none’ then all the interior borders of the table are removed as shown below:

<table border="1" rules="none">
  <!--Internal rows and columns will remain same-->
</table>

The output for this will be as shown below:

Click to Enlarge

all

As the name suggests all the borders of the table are displayed when ‘rules’ are set to ‘all’

<table border="1" rules="all">
  <!--Internal rows and columns will remain same-->
</table>

Output:

Click to Enlarge

Browser support

Internet Explorer	Firefox	Chrome	Safari	Opera	Edge
9.0	Yes	Yes	Yes	Yes	Yes

Posted By -	Karan Gupta

Posted On -	Thursday, September 22, 2011

Updated On -	Wednesday, March 15, 2017

Query/Feedback

Your Email Id

Subject

Query/Feedback	Characters remaining 250