Articles → HTML → Rules Attribute In HTML

Rules Attribute In HTML






The Objective Of This Tutorial





Technical Knowledge





Rules






<table rules= "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


  1. IE 9+
  2. Firefox
  3. Opera
  4. Chrome
  5. Safari



Create An HTML Table




<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



Picture showing the sample html table
Click to Enlarge


Rows




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

Try It



Picture showing the table with values of rules attribute as rows
Click to Enlarge


Cols




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

Try It



Picture showing the table with values of rules attribute as cols
Click to Enlarge


Groups




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

Try It



Picture showing the table with values of rules attribute as groups
Click to Enlarge


None




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

Try It



Picture showing the table with values of rules attribute as none
Click to Enlarge


All




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

Try It



Picture showing the table with values of rules attribute as all
Click to Enlarge


Browser Support


Internet ExplorerFirefoxChromeSafariOperaEdge
9.0YesYesYesYesYes



Posted By  -  Karan Gupta
 
Posted On  -  Thursday, September 22, 2011
 
Updated On  -  Wednesday, March 15, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250