HTML Table Elements and Attributes: Rules, Summary, Width (Part 2)

We already discuss about these below attributes

1. The align Attribute
2. The bgcolor Attribute
3. The border Attribute
4. The cellpadding Attribute
5. The cellspacing Attribute
6. The dir Attribute
7. >The frame Attribute

The rules Attribute

The rules attribute is used to indicate which inner borders of the table should be displayed.

rules="ruleType"

The following table shows the possible values for the rules attribute:

Value	Purpose
none	No inner borders (the default)
groups	Displays inner borders between all table groups (groups are created by the <thead> , <tbody> , <tfoot> , and <colgroup> elements)
rows	Displays horizontal borders between each row
cols	Displays vertical borders between each column
all	Displays horizontal and vertical borders between each row and column

Support for this attribute is not perfect, and it has been deprecated in favor of the CSS border property, which achieves better results.

Examples one by one

Example 1: rules="none"

<table  rules="none">
  <tr>
<th>Name</th>
<th>Food</th>
  </tr>
  <tr>
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr>
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr>
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr>
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr>
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 2: rules="groups"

<table  rules="groups">
  <tr>
<th>Name</th>
<th>Food</th>
  </tr>
  <tr>
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr>
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr>
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr>
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr>
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 3: rules="rows"

<table  rules="rows">
  <tr>
<th>Name</th>
<th>Food</th>
  </tr>
  <tr>
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr>
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr>
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr>
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr>
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 4: rules="cols"

<table  rules="cols">
  <tr>
<th>Name</th>
<th>Food</th>
  </tr>
  <tr>
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr>
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr>
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr>
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr>
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 5: rules="all"

<table  rules="all">
  <tr>
<th>Name</th>
<th>Food</th>
  </tr>
  <tr>
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr>
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr>
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr>
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr>
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

The summary Attribute

The summary attribute is used to provide additional information about the <table> element. Unfortunately, this element is not allowed in HTML5. So, how can we provide this additional summary information? The simplest solution is to provide the additonal information directly above or below the table element.

<table summary="Summary describing Rainfall in Eastern Australia">
<thead>
<tr>
  <th> </th>
  <th>Sydney</th>
  <th>Canberra</th>
</tr>
</thead>
<tbody>
  <tr>
	<th>January</th>
		<td>18mm</td>
		<td>20mm</td>
  </tr>
  <tr>
  <th>February</th>
	  <td>7mm</td>
	  <td>9mm</td>
  </tr>
</tbody>
</table>

Live Preview

The width Attribute

The width attribute is used to specify the width of the table, and usually its value is given in pixels.

width="500"

width="70%"

<table  width="500">
  <tr>
<th>Name</th>
<th>Food</th>
  </tr>
  <tr>
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr>
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr>
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr>
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr>
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

The height Attribute

The height attribute is used to specify the height of the table, and usually its value is given in pixels.

height="500"

height="70%"

<table  height="500">
  <tr>
<th>Name</th>
<th>Food</th>
  </tr>
  <tr>
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr>
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr>
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr>
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr>
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview