Tables in HTML

Basic Table

A simple table uses <table>, rows use <tr>, and cells use <td>:

<table>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
  <tr>
    <td>Banana</td>
    <td>Yellow</td>
  </tr>
</table>
      

This creates a simple two‑row table.

Table Headings

Use <th> for header cells. They appear bold by default:

<table>
  <tr>
    <th>Fruit</th>
    <th>Color</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Red</td>
  </tr>
</table>
      

Adding Borders

You can add borders using CSS. For example:

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

This makes your table easier to read.

Spanning Columns

Use colspan to make a cell stretch across multiple columns:

<td colspan="2">Fruit Colors</td>
      

Lesson Checkpoint

Before moving on, make sure you have:

1. Created a table in your index.html.
2. Used <table>, <tr>, <td>, and <th>.
3. Experimented with borders and colspan.
4. Committed your changes to GitHub.
5. Viewed your updated site on GitHub Pages.

Use the navigation bar to explore your site or review previous lessons.