Learn HTML Table Tag Elements:<table> Tag

HTML Table

An HTML < table> is used to store data in tabular format means row and column. A row can put many columns inside it. Row and column form many table cells. This table cell contains data.

  • HTML <table> tag is used to represent HTML table.
  • HTML <tr> tag is used to represent HTML table row.
  • HTML <td> tag is used to represent HTML table data.
  • HTML <th> tag is used to represent HTML table header.
  • HTML <thead> tag is used to group table header content.
  • HTML <tbody> tag is used to group table body content.
  • HTML <tbody> tag is used to group table footer content.

Quick Tips

Here <table> tag is used to create a table, the tag is used to highlight the header information, represents a cell of the table, represents table row while as represents the table body section.

HTML Table Example

General Syntax

<table>
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
  </tr>
</table>    

Source Code

Download
<table border="1">
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
  </tr>
</table>

Source Code : Output

First_Name Last_Name
Sonoo Jaiswal
James William

Code Explanation

Here <table> tag is used to create a table,<th> tag is used to highlight the header information, <td>represents a cell of the table ,<tr> represents table row while as represents the table body section.

HTML Table With Border

General Syntax

<table border="1"></table>    

Source Code

Download
<table border="1">
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
    <td>60</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Swati</td>
    <td>Sironi</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Chetna</td>
    <td>Singh</td>
    <td>72</td>
  </tr>
</table>

Source Code : Output

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

Code Explanation

HTML table border can be set by <table> boder attribute.

HTML Table Border Collapsing

General Syntax

<table border="1" style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
    <td>60</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Swati</td>
    <td>Sironi</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Chetna</td>
    <td>Singh</td>
    <td>72</td>
  </tr>
</table>    

Source Code

Download
<table border="1" style="border: 1px solid black; border-collapse: collapse;">
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
    <td>60</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
    <td>80</td>
  </tr>

  <tr>
    <td>Swati</td>
    <td>Sironi</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Chetna</td>
    <td>Singh</td>
    <td>72</td>
  </tr>
</table>

Source Code : Output

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

Code Explanation

HTML table border collapsing can be done by CSS border-collapse property:

table, th, td { border: 1px solid black; border-collapse: collapse; }

Table Row And Column Spanning Concept

HTML table row and column can be extended using rowspan and colspan attributes. Basically, it extends a single cell into either multi-column or multi-row.

HTML Table Colspan Example

General Syntax

<table>
  <tr>
    <th>Name</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>Smith Roy</td>
    <td>45678945</td>
    <td>45678925</td>
  </tr>
</table>    

Source Code

Download
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>Smith Roy</td>
    <td>45678945</td>
    <td>45678925</td>
  </tr>
</table>
<h4>HTML Table Rowspan Example</h4>
<table border="1">
  <tr>
    <th>Name:</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th rowspan="2">Phone:</th>
    <td>565789945</td>
  </tr>
  <tr>
    <td>455774555</td>
  </tr>
</table>

Source Code : Output

Name Phone
Smith Roy 45678945 45678925

HTML Table Rowspan Example

Name: John Doe
Phone: 565789945
455774555

Code Explanation

  • =>Table spanning concept works in row and column
  • =>Table colspan attribute extends a cell more than one column.
  • =>Table rowspan attribute extends a cell more than one row.

Creating Table With Table Header, Body & Footer Attribute

General Syntax

<table>
  <thead>
    <tr>
      <th>Items</th>
      <th>Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stationary</td>
      <td>2,000</td>
    </tr>
    <tr>
      <td>Fuiture</td>
      <td>10,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>12,000</td>
    </tr>
  </tfoot>
</table>    

Source Code

Download
<table border="1" style="table,th,td {border: 1px solid black;border-collapse: collapse;}">
  <thead>
    <tr>
      <th>Items</th>
      <th>Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Stationary</td>
      <td>2,000</td>
    </tr>
    <tr>
      <td>Fuiture</td>
      <td>10,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>12,000</td>
    </tr>
  </tfoot>
</table>

Source Code : Output

Items Expenditure
Stationary 2,000
Fuiture 10,000
Total 12,000

Code Explanation

HTML provides different table attributes <thead>, <tbody>, and <tfoot>.It creates most structure full table data having table header,table body and table footer.

HTML Table Captions

General Syntax

<table>
  <caption>Users Info</caption>
  <thead></thead>
  <tbody></tbody>
</table>    

Source Code

Download
<table border="1">
  <caption>Users Info</caption>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Peter Parker</td>
    <td>16</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Clark Kent</td>
    <td>34</td>
  </tr>
</table>

Source Code : Output

Users Info
No. Name Age
1 Peter Parker 16
2 Clark Kent 34

Code Explanation

HTML table caption can be provided by placing <caption> tag after <table> tag.It is basically denoted the the name of the table.

Online Test / Quiz

Our Tutorials

Html Tutorial HTML
Css Tutorial CSS
Bootstrap 5 Tutorial BOOTSTRAP 5
Bootstrap 4 Tutorial BOOTSTRAP 4
Materialize CSS Tutorial MATERIALIZE CSS
2021-22 © shapeyourpath.com