HTML Tables

Tables are used to display data in rows and columns - similar to a spreadsheet. In HTML, tables are created using the <table> tag.

1. Basic Table Structure

A table contains rows (<tr>) and header or data cells (<th> / <td>). Headers are bold by default.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>
      

2. Table Borders

Modern HTML uses CSS for borders instead of the old border attribute.

<table style="border: 2px solid black;">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Book</td>
    <td>$10</td>
  </tr>
</table>
      

3. Adding More Rows & Columns

Each row uses <tr>, and each column inside that row uses <td>.

<tr>
  <td>Charlie</td>
  <td>22</td>
  <td>Tokyo</td>
</tr>
      

Next Lesson → HTML Forms Explained

Previous Lesson → HTML Lists (Ordered & Unordered)