Basic Table Elements and Attributes in HTML: Part 1

Rumman Ansari   Software Engineer   2024-07-05 04:10:42   6828  Share
Subject Syllabus DetailsSubject Details 3 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

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 cellpadding Attribute

The cellpadding attribute is used to create a gap between the edges of a cell and its contents. 


cellpadding="5" or  cellpadding="2%"

This attribute has been replaced by the padding property in CSS.

HTML Code 


<table cellpadding="10">
    <tr>
    <th>Month</th>
    <th>Earning</th>
    </tr>
    <tr>
            <td>January</td>
            <td>$100</td>
    </tr>
</table>

Live Preview

The cellspacing Attribute

The cellspacing attribute is used to create a space between the borders of each cell. 


cellspacing="6" or cellspacing="2%"

HTML Code 


<table cellspacing="10">
    <tr>
    <th>Month</th>
    <th>Earnning</th>
    </tr>
    <tr>
            <td>January</td>
            <td>$100</td>
    </tr>
</table>

Live Preview

The cellspacing attribute of <table> is not supported in HTML5.

The cellspacing attribute specifies the space, in pixels, between cells.

This attribute has been replaced by the margin property in CSS.

The dir Attribute

The dir attribute is used to set the base direction of text for display. It is essential for enabling HTML in right-to-left scripts such as Arabic, Hebrew, Syriac, and Thaana. Numerous different languages are written with these scripts, including Arabic, Hebrew, Pashto, Persian, Sindhi, Syriac, Dhivehi, Urdu, Yiddish, etc.

he dir attribute is supposed to indicate the direction of text that is used in the table. Possible values are ltr for left to right text and rtl for right to left


dir="rtl"

HTML Code

This is a example of dir="rtl" 


<table dir="rtl">
    <tr>
    <th>Month</th>
    <th>Earnning</th>
    </tr>
    <tr>
            <td>January</td>
            <td>$100</td>
    </tr>
</table>

Live Preview

The frame Attribute

The frame attribute was used to define the visible borders of a table. It is now deprecated and should no longer be used. frame , with greater control than the border attribute.

The following table shows the possible values for the frame attribute.

Value Purpose Example
void No outer border (the default) <table frame="void">
above A border on the top only <table frame="above">
below A border on the bottom only <table frame="below">
hsides A border on the top and bottom <table frame="hsides">
lhs A border on the left side of table <table frame="lhs">
rhs A border on the right side of table <table frame="rhs">
vsides A border on the left and right sides of table <table frame="vsides">
box A border on all sides <table frame="box">
border A border on all sides <table frame="border">

Support for the frame attribute is not perfect across browsers, and its role has been replaced by the CSS border property, which can give better results.

Now we will discuss by By this examples

Name Food
Jakir Rasgola
Sabir Masala Dosa
Sourav Biryani
Rohan Chole Batura
Rumman Birayani

Let's start

Example: 1 <table frame="void">

No outer border (the default) 


<table table frame="void">
  <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 <table frame="above">

A border on the top only. 


<table table frame="above">
  <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 <table frame="below">

A border on the bottom only. 


<table table frame="below">
  <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 <table frame="hsides">

A border on the top and bottom. 


<table table frame="hsides">
  <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 <table frame="lhs">

A border on the left side of table. 


<table table frame="lhs">
  <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: 6 <table frame="rhs">

A border on the right side of table. 


<table table frame="rhs">
  <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: 7 <table frame="vsides">

A border on the left and right sides of table. 


<table table frame="vsides">
  <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: 8 <table frame="box">

A border on all side


<table table frame="box">
  <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: 9 <table frame="border">

A border on all sides 


<table table frame="border">
  <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:

Another example with mix of different attribute


<table  frame="box" border="8" cellpadding="2" cellspacing="2">
  <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.