Mastering HTML Tables: Colspan & Rowspan

Go beyond basic tables. Learn to merge cells and create complex, structured layouts for your data with `colspan` and `rowspan`.

Welcome! Let's learn how to build complex tables by merging cells, a key skill for data presentation.

/* Let's build a table! */

Spanning Columns with colspan

The colspan attribute is used on a table header <th> or data <td> element to make a single cell stretch horizontally across multiple columns. For example, <th colspan="3"> would create a header that spans the width of three columns.

Spanning Rows with rowspan

Similarly, the rowspan attribute makes a cell stretch vertically across multiple rows. This is perfect for side headers or data that applies to several rows. For instance, <td rowspan="2"> creates a cell that occupies the height of two rows.

Combining Both for Complex Layouts

The true power of table layouts comes from combining colspan and rowspan. You can create complex structures like calendars or detailed reports by carefully planning which cells should span across which rows and columns. This gives you precise control over your data presentation.

Practice Zone

Interactive Test 1: Build a Table

Arrange the tags to create a simple 2x2 table.

Arrastra en el orden correspondiente.

Arrastra las opciones:

<table>

<tr>

</tr>

</table>

Completa el código:

______

Unlock with Premium

Interactive Test 2: Span the Cells

Complete the code to make the header span 2 columns and the side cell span 2 rows.

Rellena los huecos en cada casilla.

<table border="1">
  <tr>
    <th >Monthly Report</th>
  </tr>
  <tr>
    <td >Expenses</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>$300</td>
  </tr>
</table>

Unlock with Premium

Practice Example: Code Editor

Create a 3x3 table. The top-left cell should be empty. The header for column 2 should span two columns (`colspan="2"`). The header for row 2 should span two rows (`rowspan="2"`).

* Write the code below. Correct characters will be shown in green and incorrect ones in red.

<table border="1">
  <tr>
    <th></th>
    <th colspan="2">Morning</th>
  </tr>
  <tr>
    <th rowspan="2">Tasks</th>
    <td>Meeting</td>
    <td>Code Review</td>
  </tr>
  <tr>
    <td>Debugging</td>
    <td>Documentation</td>
  </tr>
</table>

Unlock with Premium

Knowledge Check

Which attribute is used to combine table cells vertically across multiple rows?

Unlock with Premium

Making Your Tables Dynamic

While HTML defines the table structure, CSS and JavaScript bring it to life, making it readable and interactive.

1. Styling Tables with CSS

CSS is essential for styling tables. You can control borders, padding, colors, and even create "zebra-striped" rows for better readability using the :nth-child selector.

/* CSS for alternating row colors */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

Name	Role
Alice	Admin
Bob	User

2. Manipulating Tables with JavaScript

JavaScript can dynamically add, remove, or modify table rows and cells. This is crucial for displaying data fetched from a server without reloading the page.

// JS to add a new row
const table = document.querySelector('table');
const newRow = table.insertRow();
newRow.insertCell().textContent = 'Charlie';
newRow.insertCell().textContent = 'Guest';

Practical Takeaway: Use HTML for the logical structure of your table, CSS for its appearance, and JavaScript for any dynamic behavior. This separation of concerns is fundamental to web development.

HTML Table Glossary

<table>: The main container for all table-related content.
<thead>, <tbody>, <tfoot>: Elements used to group the header, body, and footer content of a table, respectively. Useful for styling and structure.
<tr>: Stands for "table row." This element defines a horizontal row of cells.
<th>: Stands for "table header." Defines a header cell. Browsers typically render its content as bold and centered.
<td>: Stands for "table data." Defines a standard data cell within a row.
colspan: An attribute for <th> or <td> that specifies how many columns a cell should span.
rowspan: An attribute for <th> or <td> that specifies how many rows a cell should span.