HTML Tables

Level : Intermediate
Mentor: Shailendra Chauhan
Duration : 00:00:50

<table>:

The <table> element is used to create a structured table in HTML. It allows you to organize data in rows and columns, making it easier to display information in a tabular format on a web page.

Example:

<table>
  <tr>
    <td>Mohan</td>
    <td>Kumar</td>
  </tr>
  <tr>
    <td>Sohan</td>
    <td>Kumar</td>
  </tr>
</table>

<thead>:

The <thead> element is used to define the header section of a table. It typically contains one or more <tr> (table row) elements that represent the column headings.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data goes here -->
  </tbody>
</table>

<tbody>:

The <tbody> element is used to group the main content of a table, excluding the header and footer. It contains one or more <tr> (table row) elements that represent the table data.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mohan</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Sohan</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

<tfoot>:

The <tfoot> element is used to define the footer section of a table. It typically contains one or more <tr> (table row) elements that represent summary information or additional notes related to the table.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table data goes here -->
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Table Footer</td>
    </tr>
  </tfoot>
</table>

<th>:

The <th> element is used to define a heading cell within the table. It is typically used in the <thead> element to create column headers.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mohan</td>
      <td>21</td>
    </tr>
  </tbody>
</table>

<td>:

The <td> element is used to define a standard data cell within the table. It is used in the <tbody> and <tfoot> elements to represent the actual data of the table.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Mohan</td>
      <td>21</td>
    </tr>
    <tr>
      <td>Sohan</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

rowspan Attribute:

The rowspan attribute is used to span a cell across multiple rows in a table. It specifies the number of rows a cell should occupy vertically.

Example:

<table>
  <tr>
    <td rowspan="2">Spanned Cell</td>
    <td>Data 1</td>
  </tr>
  <tr>
    <td>Data 2</td>
  </tr>
</table>

colspan Attribute:

The colspan attribute is used to span a cell across multiple columns in a table. It specifies the number of columns a cell should occupy horizontally.

Example:

<table>
  <tr>
    <td colspan="2">Spanned Cell</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this