Creating HTML Tables

Learn to create tables using the fundamental tags: <table>, <tr>, <th>, and <td> to structure your data.

Building Tables in HTML

Tables are perfect for displaying data in rows and columns, like a spreadsheet. Let's learn the basic tags you need to build one.

Syntax

Tables are defined with the <table> tag. Each row is defined with <tr>. Header cells are defined with <th>, and data cells with <td>.

Purpose

  • Present data in a structured and clear manner.
  • Facilitate data comparison in rows and columns.
  • Improve the readability of complex information in HTML documents.

Practice Zone


Interactive Test 1: Drag & Drop

Arrastra en el orden correspondiente.


Arrastra las opciones:

<table>...</table>
<tr>...</tr>
<th>Name</th>
<td>John</td>
<td>30</td>
<tr>...</tr>

Completa el código:

______
______
______
______
______
______

Interactive Test 2: Fill in the Blanks

Rellena los huecos en cada casilla.

<table>
  
  <tr>
    <td>Mary</td>
    <td>25</td>
  </tr>
</table>

Practice Example: Code Editor

Create a 2x2 table with headers for "Name" and "Age" and one row of data for "John", age "30".

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

<table border="1"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>John</td> <td>30</td> </tr> </table>

Knowledge Check

Which tag is used to define a header cell in an HTML table?