Using Tables in HTML

Tables let you present data in a structured way using rows and columns. HTML tables are ideal for things like pricing lists, schedules, or statistics.

Table Structure

Tables start with the <table> tag. Rows are created using <tr>, headers with <th>, and cells with <td>.

<table>
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>0.2$</td>
  </tr>
</table>

Example: Rendered Table

Here’s an example of how a simple HTML table looks when rendered in the browser. This helps you visualize how the code appears.

Special Cell Attributes

You can use colspan and rowspan on <td> elements to make a cell span multiple columns or rows.

<td colspan="2">Occupies two columns</td>

<td rowspan="2">Occupies two rows</td>

Semantic Table Elements

You can use <thead>, <tbody>, and <tfoot> tags to make your table structure more organized and easier to understand.

When to Use Tables

Use tables when you need to display structured data. Don’t use them for layout or design — modern CSS solutions are better suited for that.