Chapters

Basic Table Elements and Attributes in HTML: Part 1

Rumman Ansari Software Engineer 2024-07-05 04:10:42 6462 Share
Subject Syllabus Details Subject Details 3 Questions

☰ TContent

☰Fullscreen

We already discuss about these below attributes

The align Attribute
The bgcolor Attribute
The border Attribute

The <table> Element Creates a Table

The align Attribute
The bgcolor Attribute
The border Attribute
The cellpadding Attribute
The cellspacing Attribute
The dir Attribute
The frame Attribute
The rules Attribute
The summary Attribute
The width Attribute

The <tr> Element Contains Table Rows

The align Attribute
The bgcolor Attribute
The char Attribute
The charoff Attribute
The valign Attribute

The <td> and <th> Elements Represent Table Cells

The abbr Attribute
The align Attribute
The axis Attribute
The bgcolor Attribute
The char Attribute
The charoff Attribute
The colspan Attribute
The headers Attribute
The height Attribute
The nowrap Attribute
The rowspan Attribute
The scope Attribute
The valign Attribute
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.

<span class="pln">
cellpadding</span><span class="pun">=</span><span class="str">"5"</span><span class="pln"> </span><span class="kwd">or</span><span class="pln">  cellpadding</span><span class="pun">=</span><span class="str">"2%"</span><span class="pln">
</span>

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

HTML Code

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"10"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Month</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Earning</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
            </span><span class="tag">&lt;td&gt;</span><span class="pln">January</span><span class="tag">&lt;/td&gt;</span><span class="pln">
            </span><span class="tag">&lt;td&gt;</span><span class="pln">$100</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

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

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">cellspacing</span><span class="pun">=</span><span class="atv">"10"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Month</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Earnning</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
            </span><span class="tag">&lt;td&gt;</span><span class="pln">January</span><span class="tag">&lt;/td&gt;</span><span class="pln">
            </span><span class="tag">&lt;td&gt;</span><span class="pln">$100</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

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

<span class="pln">
dir</span><span class="pun">=</span><span class="str">"rtl"</span><span class="pln">
</span>

HTML Code

This is a example of dir="rtl"

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">dir</span><span class="pun">=</span><span class="atv">"rtl"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Month</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;th&gt;</span><span class="pln">Earnning</span><span class="tag">&lt;/th&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
    </span><span class="tag">&lt;tr&gt;</span><span class="pln">
            </span><span class="tag">&lt;td&gt;</span><span class="pln">January</span><span class="tag">&lt;/td&gt;</span><span class="pln">
            </span><span class="tag">&lt;td&gt;</span><span class="pln">$100</span><span class="tag">&lt;/td&gt;</span><span class="pln">
    </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

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)

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"void"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 2 `<table frame="above">`

A border on the top only.

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"above"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 3 `<table frame="below">`

A border on the bottom only.

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"below"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 4 `<table frame="hsides">`

A border on the top and bottom.

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"hsides"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 5 `<table frame="lhs">`

A border on the left side of table.

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"lhs"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 6 `<table frame="rhs">`

A border on the right side of table.

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"rhs"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 7 `<table frame="vsides">`

A border on the left and right sides of table.

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"vsides"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 8 `<table frame="box">`

A border on all side

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"box"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example: 9 `<table frame="border">`

A border on all sides

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln"> </span><span class="atn">table</span><span class="pln"> </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"border"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Live Preview

Example:

Another example with mix of different attribute

<span class="pln">
</span><span class="tag">&lt;table</span><span class="pln">  </span><span class="atn">frame</span><span class="pun">=</span><span class="atv">"box"</span><span class="pln"> </span><span class="atn">border</span><span class="pun">=</span><span class="atv">"8"</span><span class="pln"> </span><span class="atn">cellpadding</span><span class="pun">=</span><span class="atv">"2"</span><span class="pln"> </span><span class="atn">cellspacing</span><span class="pun">=</span><span class="atv">"2"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Name</span><span class="tag">&lt;/th&gt;</span><span class="pln">
</span><span class="tag">&lt;th&gt;</span><span class="pln">Food</span><span class="tag">&lt;/th&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Jakir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rasgola</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sabir</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Masala Dosa</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Sourav</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Biryani</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rohan</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Chole Batura</span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
  </span><span class="tag">&lt;tr&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Rumman</span><span class="tag">&lt;/td&gt;</span><span class="pln">
        </span><span class="tag">&lt;td&gt;</span><span class="pln">Birayani </span><span class="tag">&lt;/td&gt;</span><span class="pln">
  </span><span class="tag">&lt;/tr&gt;</span><span class="pln">
</span><span class="tag">&lt;/table&gt;</span><span class="pln">
</span>

Basic Table Elements and Attributes in HTML: Part 1

The `cellpadding` Attribute

HTML Code

Live Preview

The `cellspacing` Attribute

HTML Code

Live Preview

The `dir` Attribute

HTML Code

Live Preview

The `frame` Attribute

Now we will discuss by By this examples

Example: 1 `<table frame="void">`

Live Preview

Example: 2 `<table frame="above">`

Live Preview

Example: 3 `<table frame="below">`

Live Preview

Example: 4 `<table frame="hsides">`

Live Preview

Example: 5 `<table frame="lhs">`

Live Preview

Example: 6 `<table frame="rhs">`

Live Preview

Example: 7 `<table frame="vsides">`

Live Preview

Example: 8 `<table frame="box">`

Live Preview

Example: 9 `<table frame="border">`

Live Preview

Example:

Live Preview

Related Questions

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

Select - Data selection and manipulation Part 1

Firstonly, FirstOnly10, FirstOnly100 - Data selection and manipulation Part 2

next statement - Data selection and manipulation Part 3

Basic Table Elements and Attributes in HTML: Part 1

The cellpadding Attribute

HTML Code

Live Preview

The cellspacing Attribute

HTML Code

Live Preview

The dir Attribute

HTML Code

Live Preview

The frame Attribute

Now we will discuss by By this examples

Example: 1 <table frame="void">

Live Preview

Example: 2 <table frame="above">

Live Preview

Example: 3 <table frame="below">

Live Preview

Example: 4 <table frame="hsides">

Live Preview

Example: 5 <table frame="lhs">

Live Preview

Example: 6 <table frame="rhs">

Live Preview

Example: 7 <table frame="vsides">

Live Preview

Example: 8 <table frame="box">

Live Preview

Example: 9 <table frame="border">

Live Preview

Example:

Live Preview

Related Questions

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

Select - Data selection and manipulation Part 1

Firstonly, FirstOnly10, FirstOnly100 - Data selection and manipulation Part 2

next statement - Data selection and manipulation Part 3

The `cellpadding` Attribute

The `cellspacing` Attribute

The `dir` Attribute

The `frame` Attribute

Example: 1 `<table frame="void">`

Example: 2 `<table frame="above">`

Example: 3 `<table frame="below">`

Example: 4 `<table frame="hsides">`

Example: 5 `<table frame="lhs">`

Example: 6 `<table frame="rhs">`

Example: 7 `<table frame="vsides">`

Example: 8 `<table frame="box">`

Example: 9 `<table frame="border">`