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

Rumman Ansari   Software Engineer   2024-07-05 04:12:41   6326  Share
Subject Syllabus DetailsSubject Details 1 Questions
☰ TContent
☰Fullscreen

Table of Content:

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 <table> Element Creates a Table
    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
    8. The rules Attribute
    9. The summary Attribute
    10. The width Attribute
  • The <tr> Element Contains Table Rows
    1. The align Attribute
    2. The bgcolor Attribute
    3. The char Attribute
    4. The charoff Attribute
    5. The valign Attribute
  • The <td> and <th> Elements Represent Table Cells
    1. The abbr Attribute
    2. The align Attribute
    3. The axis Attribute
    4. The bgcolor Attribute
    5. The char Attribute
    6. The charoff Attribute
    7. The colspan Attribute
    8. The headers Attribute
    9. The height Attribute
    10. The nowrap Attribute
    11. The rowspan Attribute
    12. The scope Attribute
    13. The valign Attribute
    14. The width Attribute
  • Adding a <caption> to a Table
  • Spanning Columns Using the colspan Attribute
  • Spanning Rows Using the rowspan Attribute
  • Splitting Up Tables Using a Head, Body, and Foot
  • Grouping Columns Using the <colgroup> Element
  • Columns Sharing Styles Using the <col> Element
  • Nested Tables

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>&nbsp;</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



Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.