Articles → HTML → Rules Attribute In HTML

Rules Attribute In HTML






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




Picture showing the sample html table

Click to Enlarge


Rows




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




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>




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>




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>




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>




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