HTML Tables

Building tabular layouts for complex spreadsheets or data reports.

HTML tables allow developers to arrange data into rows and columns using a set of structured child tags.

Table Structure Tags

<table>: The table element wrapper.
<thead>: Groups the header content.
<tbody>: Groups the body content.
<tfoot>: Groups the footer content.
<tr>: Table row container.
<th>: Header cell (automatically bolded and centered by default).
<td>: Data cell containing standard text.

Example

html

<table>

<thead>

<tr>

<th>Name</th>

<th>Age</th>

</tr>

</thead>

<tbody>

<tr>

<td>Nathish</td>

<td>20</td>

</tr>

</tbody>

</table>

Interview questions

What is the purpose of the <thead>, <tbody>, and <tfoot> tags inside a <table>?

They provide semantic layout structure to the table data. This assists accessibility tools, enables styling hooks, and allows browsers to print long tables with header and footer rows repeating across pages.

Practice

Build a table representing a shopping cart invoice containing Item, Qty, and Price, including a total row at the bottom.

Hint: Put the product rows in <tbody>, headers in <thead>, and the total invoice in <tfoot>.