Basic Table Elements and Attributes in HTML: Part 1

---

---

---

---

---

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

---