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.

The Objective Of This Tutorial

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

Technical Knowledge

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.

The syntax for rules is as follows: -

<table rules= "values">

There are 5 attributes values: -

rows → to display lines between rows
cols → to display lines between columns
groups → to display lines between rows and column groups
none → to hide all the lines
all → to display all the lines between rows and columns

The ‘rules’ attribute is supported by the following browsers: -

IE 9+
Firefox
Opera
Chrome
Safari

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

Create An 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 an 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>

Try It

The output for the code mentioned above looks like this: -

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>

Try It

The output will be as shown below: -

Picture showing the table with values of rules attribute as rows

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>

Try It

The output for this would be as follows: -

Picture showing the table with values of rules attribute as cols

Groups

When ‘rules’ is set to value ‘groups’ then horizontal borders appear 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>

Try It

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

Picture showing the table with values of rules attribute as groups

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>

Try It

The output for this will be as shown below: -

Picture showing the table with values of rules attribute as none

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>

Try It

Output

Picture showing the table with values of rules attribute as all

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	**