HTML Tables

Rows, cells, headers, borders and spanning.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

Tables arrange data into rows and columns.

<table> wraps the whole table.
<tr> is a table row.
<th> is a header cell (bold and centred by default).
<td> is a data cell.
<caption> gives the table a title.

Spanning cells

colspan="2" makes a cell span two columns; rowspan="2" makes it span two rows.

Groups

<thead>, <tbody> and <tfoot> group the header, body and footer rows.

Key Takeaways: HTML Tables

Mastering HTML Tables helps you write clean and reliable HTML code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

HTML Tables Code Example

HTML

<style>
  table { border-collapse: collapse; font-family: Arial; }
  th, td { border: 1px solid #CBD5E1; padding: 8px 14px; }
  th { background: #071A2F; color: white; }
  tbody tr:nth-child(even) { background: #F1F5F9; }
</style>

<table>
  <caption>Course fees</caption>
  <thead>
    <tr><th>Course</th><th>Duration</th><th>Fee</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML &amp; CSS</td><td>4 weeks</td><td>Rs 8,000</td></tr>
    <tr><td>JavaScript</td><td>6 weeks</td><td>Rs 12,000</td></tr>
    <tr><td>Python</td><td>8 weeks</td><td>Rs 15,000</td></tr>
  </tbody>
  <tfoot>
    <tr><td colspan="2">Total</td><td>Rs 35,000</td></tr>
  </tfoot>
</table>

Free sign-in required · Google login available

HTML Tables Practice Exercises

Check what you learned in “HTML Tables”.

/ 3 solved

Fill in the blank

Complete the table row with a header cell and a data cell.

<table>
  <>
    <>Name</>
    <>Ali</>
  </>
</table>

✓ Correct! Not quite. Try again.

Multiple choice

Which attribute makes a cell span two columns?

colspan="2" rowspan="2" span="2" cols="2"

✓ Correct! Not quite. Try again.

Code challenge

Build a table with a header row (Name, City) and one data row (Sara, Karachi).

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services