HTML Tables

An HTML tables are 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

Source Code

          <table>
  <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>

Try it now

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

Source Code

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

Try it now

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

HTML Table Border Collapsing

Source Code

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

Try it now

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

Source Code

          <table>
  <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>
  <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>

Try it now

=>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

Source Code

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

Try it now

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

HTML Table Captions

Source Code

          <table>
  <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>

Try it now

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

Question set 1

HTML Tables

Quick Tips

HTML Table Example

HTML Table With Border

HTML Table Border Collapsing

Table Row And Column Spanning Concept

HTML Table Colspan Example

Creating Table With Table Header, Body & Footer Attribute

HTML Table Captions

Online Test / Quiz

Web Tutorials