Syllabus

HTML Tables Explained: Rows, Columns & Merging Cells

Badar KhalilUpdated September 27, 2026 2 min read

HTML Tables: The Complete Guide to Rows, Columns, and Merging Cells

Focus keyword: HTML tables — one of the most searched HTML topics by beginners building data-driven web pages.

HTML tables are used to display tabular data — information organized into rows and columns, such as pricing charts, schedules, or comparison grids. While tables should never be used for page layout (that job belongs to CSS Grid/Flexbox), they remain essential for presenting structured, relational data in a way that's accessible and easy to scan.

1. The Basic Table Structure

Every HTML table starts with the <table> element. Inside it:

<tr> — defines a table row
<th> — defines a table header cell (bold, centered by default)
<td> — defines a table data cell

Trending best practice: wrap your table in semantic sections using <thead>, <tbody>, and <tfoot> for better accessibility and easier CSS styling — a technique widely recommended in modern semantic HTML5 guides.

2. Rows and Columns

A row is created with <tr>. The number of columns in a row is determined by how many <td> or <th> elements appear inside that row. All rows in a well-formed table should have the same number of columns (unless you're merging cells — see below).

3. Merging Cells: colspan and rowspan

Sometimes a cell needs to span across multiple columns or rows — for example, a heading that covers two columns, or a category label that spans three rows.

colspan="n" — merges a cell across n columns horizontally
rowspan="n" — merges a cell across n rows vertically

When you merge cells, remember to remove the equivalent number of cells from the rows being spanned, or your table will break visually.

4. Styling Tables with CSS

Modern, responsive tables use CSS properties like border-collapse, overflow-x: auto for mobile scrolling, and zebra-striping (nth-child(even)) for readability — all trending techniques in current responsive web design.

5. Accessibility Tip

Always use <th scope="col"> or <th scope="row"> to tell screen readers whether a header applies to a column or a row. This is a key part of web accessibility (a11y) best practices.

Try editing the live examples below to experiment with rows, columns, and merged cells!

Try it Yourself HTML

<table border='1' style='border-collapse: collapse; width: 100%;'>
  <thead>
    <tr>
      <th>Product</th>
      <th>Q1 Sales</th>
      <th>Q2 Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptops</td>
      <td>120</td>
      <td>150</td>
    </tr>
    <tr>
      <td>Phones</td>
      <td>200</td>
      <td>180</td>
    </tr>
  </tbody>
</table>

Output

Press Run to execute.

Try it Yourself HTML

<table border='1' style='border-collapse: collapse; width: 100%; text-align: center;'>
  <tr>
    <th colspan='3'>Yearly Report (Merged Header)</th>
  </tr>
  <tr>
    <th>Month</th>
    <th>Income</th>
    <th>Expense</th>
  </tr>
  <tr>
    <td rowspan='2'>Q1</td>
    <td>Jan</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>Feb</td>
    <td>$300</td>
  </tr>
</table>

Output

Press Run to execute.

Try it Yourself CSS

table {
  border-collapse: collapse;
  width: 100%;
  font-family: sans-serif;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}
tbody tr:nth-child(even) {
  background-color: #f5f7fa;
}
th {
  background-color: #2c3e50;
  color: white;
}
@media (max-width: 600px) {
  .table-wrapper {
    overflow-x: auto;
  }
}

Output

Press Run to execute.

Exercise: Build a Merged-Cell Class ScheduleHTML

Create an HTML table showing a weekly class schedule. Use colspan to merge a header cell across all 5 weekday columns, and rowspan to merge a 'Lunch Break' cell across the Monday-Friday row for the 12PM time slot.

Try it Yourself HTML

<table border='1'>
  <tr>
    <!-- TODO: add a colspan header here -->
  </tr>
  <tr>
    <th>Time</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
  </tr>
  <!-- TODO: add rows including a rowspan example -->
</table>

Output

Press Run to execute.

Show expected output

A table with a merged header row (colspan=5 or 6) and at least one merged cell using rowspan.

This is a self-check — compare your result with the expected output above.

Quiz: HTML Tables Quiz Pass 70%

Loading quiz…

Was this page helpful?