Creating HTML Tables

Learn to structure data with rows and columns using the essential HTML table tags: <table>, <tr>, <th>, and <td>.

📊

Welcome! Let's learn how to organize data on a webpage by building an HTML table from scratch.

/* Ready to build a table? */

The <table> Container

The entire table is wrapped in a <table> tag. This acts as the main container for all your rows and cells. Think of it as the spreadsheet file itself.

Creating Rows with <tr>

Data in a table is organized into horizontal rows. Each row is created with a <tr> (table row) tag. You'll have one <tr> for each row of data, including the header row.

Defining Headers with <th>

The first row of a table usually contains headers to describe the data in each column. These are created with the <th> (table header) tag. Browsers typically display header text as bold and centered.

Adding Data with <td>

Each individual piece of data is placed in its own cell using the <td> (table data) tag. These cells make up the rows of your table, following the header row.

Practice Zone

Interactive Test 1: Order the Tags

Drag the tags to build a simple table structure in the correct order.

Arrastra en el orden correspondiente.

Arrastra las opciones:

<td>

<tr>

<table>

<th>

Completa el código:

Container______

Row______

Header Cell______

Data Cell______

Unlock with Premium

Interactive Test 2: Headers vs. Data

Rellena los huecos en cada casilla.

<tr>
  <>Name</>
  <>Age</>
</tr>
<tr>
  <>John</>
  <>30</>
</tr>

Unlock with Premium

Practice Example: Code a Table

Create a complete 2x2 table. The headers should be "Product" and "Price". The first row of data should be "Apple" and "$1".

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

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
</table>

Unlock with Premium

Knowledge Check

Which tag is used to create a standard data cell in a table?

Unlock with Premium

Styling Your HTML Tables

Raw HTML tables are functional but plain. With a little CSS, you can make them much more readable and visually appealing.

1. Borders and Spacing

The most common styling is adding borders to the table and cells. `border-collapse: collapse;` is a key property to make borders look clean and single-lined. Padding adds space inside the cells.

/* CSS */
table, th, td {
  border: 1px solid #ccc;
  border-collapse: collapse;
}
th, td {
  padding: 12px;
}

Name	Age
Alice	30

2. Zebra Striping for Readability

Alternating row colors, known as "zebra striping," makes it easier for users to follow rows of data across a wide table. This is easily achieved with the `:nth-child(even)` or `:nth-child(odd)` pseudo-class.

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

Name	Age
Alice	30
Bob	25

Practical Takeaway: Good styling isn't just about looks; it's about usability. Simple CSS like borders, padding, and background colors can transform a confusing table into a clear and professional one.

HTML Table Tag Glossary

<table>: The main container for an entire table.
<tr>: Stands for "Table Row." Defines a horizontal row of cells.
<th>: Stands for "Table Header." A special type of cell for column or row headings. Text inside is usually bold and centered by default.
<td>: Stands for "Table Data." The standard cell for holding the main content of the table.
<thead>, <tbody>, <tfoot>: Structural tags used to group the header, body, and footer content of a table, respectively. Useful for styling and accessibility.
colspan / rowspan: Attributes for `th` or `td` elements that allow a single cell to span across multiple columns (`colspan`) or rows (`rowspan`).