>_
CodeXPal
📄

HTML Tables

Beginner
70 XP
25 min
Lesson Content

HTML Tables

Tables are used to display data in rows and columns. They're perfect for organizing information like schedules, prices, or any tabular data.

Table Structure

  • <table> - Defines the table
  • <tr> - Defines a table row
  • <td> - Defines a table cell (data)
  • <th> - Defines a table header cell
  • <thead> - Groups header content
  • <tbody> - Groups body content
  • <tfoot> - Groups footer content

Basic Table Example

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

Table Attributes

  • colspan - Number of columns a cell should span
  • rowspan - Number of rows a cell should span
  • border - Adds borders (deprecated, use CSS instead)

Example with colspan

<table>
  <tr>
    <th colspan="2">Full Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>25</td>
  </tr>
</table>
Example Code

Create a table with headers and at least 2 rows of data.

<!DOCTYPE html>
<html>
  <head>
    <title>Table Practice</title>
  </head>
  <body>
    <!-- Create a table with Name, Email, and Phone columns -->
    <!-- Add at least 2 rows of data -->
  </body>
</html>

Expected Output:

Name
Study Tips
  • •Read the theory content thoroughly before practicing
  • •Review the example code to understand key concepts
  • •Proceed to the Practice tab when you're ready to code