HTML · Tables

Basic Tables

Learn to create simple HTML tables for data

Find videos you like?

Save to resource drawer for future reference!

What are HTML Tables?

Display data in rows and columns

HTML tables are used to display data in an organized, grid-like format with rows and columns. Use the <table> element to create a table,<tr> for rows,<th> for header cells, and<td> for data cells.

When to Use

✓ Display data sets
✓ Comparisons
✓ Schedules
✓ Financial data
✓ Structured information
✓ Grade sheets

Basic Elements

<table>
  <tr>
    <th>Header</th>
  </tr>
  <tr>
    <td>Data</td>
  </tr>
</table>

Pro Tip

Always use tables for tabular data, never for layout. Use semantic elements like <thead>, <tbody>, <tfoot>!

Basic Table Structure

Essential elements for creating a table

<table>

Container for all table elements

<tr>

Table row - contains cells

<th>

Table header cell - bold and centered

<td>

Table data cell - contains content

Complete HTML Structure

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Student Grades Table

Simple data table with headers and values

This example shows a basic table displaying student grades. Notice the header row with <th> elements and data rows with <td> elements.

Student Grades

Basic table with rows and columns

Frontend

<h3>Student Grades</h3>
<table>
  <tr>
    <th>Name</th>
    <th>Math</th>
    <th>Science</th>
    <th>English</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
    <td>88</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
    <td>91</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>92</td>
    <td>94</td>
    <td>89</td>
  </tr>
</table>

Live Preview

Loading preview...

Weather Data Table

Table with alternating row colors

This example demonstrates using CSS to style tables with alternating row colors for better readability.

Weather Forecast

Table with alternating colors

Frontend

<h3>Weather This Week</h3>
<table>
  <tr>
    <th>Day</th>
    <th>Temperature</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>72°F</td>
    <td>Sunny</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>68°F</td>
    <td>Cloudy</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>65°F</td>
    <td>Rainy</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>70°F</td>
    <td>Partly Cloudy</td>
  </tr>
</table>

Live Preview

Loading preview...

Comparison Table

Table for comparing features or options

Comparison tables are perfect for displaying different options side-by-side. This example shows pricing plans with different features.

Feature Comparison

Comparison table with pricing plans

Frontend

<h3>Feature Comparison</h3>
<table>
  <tr>
    <th>Feature</th>
    <th>Basic</th>
    <th>Pro</th>
    <th>Enterprise</th>
  </tr>
  <tr>
    <td>Users</td>
    <td>1</td>
    <td>10</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>Storage</td>
    <td>10 GB</td>
    <td>100 GB</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>Support</td>
    <td>Email</td>
    <td>Priority</td>
    <td>24/7 Phone</td>
  </tr>
  <tr>
    <td>Analytics</td>
    <td>❌</td>
    <td>✓</td>
    <td>✓</td>
  </tr>
</table>

Live Preview

Loading preview...

Best Practices

✅ Do This

✓ Use for tabular data
✓ Use semantic elements
✓ Add border-collapse CSS
✓ Make headers distinct
✓ Use meaningful headers

❌ Avoid This

✗ Don't use for layout
✗ Don't forget headers
✗ Don't nest tables deeply
✗ Don't leave cells empty
✗ Don't use for spacing

Accessibility Tip

Always use <th> for headers with scope attribute to help screen readers understand table structure.

Common Use Cases

📊

Data Display

Organized information

📅

Schedules

Timetables and calendars

💰

Pricing

Plan comparisons

⚙️

Specifications

Product details

📈

Reports

Financial data

✓

Results

Test or survey data

Previous Topic

Description Lists

<dl>, <dt>, <dd> for term-description pairs and glossaries.

Next Topic

Table Structure

<thead>, <tbody>, <tfoot>, <colgroup>, <col> for organized tables.

Ask a Question

Have a question about Basic Tables? Ask our AI assistant.

🔐 Login to use AI Assistant

HTML Code Editor

Write and experiment with HTML code.

Output

Click "Run Code" to see the output.

Execution is only supported for Java, Spring, and JavaScript.

HTML · Tables

Basic Tables

Learn to create simple HTML tables for data

Find videos you like?

Save to resource drawer for future reference!

What are HTML Tables?

Display data in rows and columns

When to Use

✓ Display data sets
✓ Comparisons
✓ Schedules
✓ Financial data
✓ Structured information
✓ Grade sheets

Basic Elements

<table>
  <tr>
    <th>Header</th>
  </tr>
  <tr>
    <td>Data</td>
  </tr>
</table>

Pro Tip

Always use tables for tabular data, never for layout. Use semantic elements like <thead>, <tbody>, <tfoot>!

Basic Table Structure

Essential elements for creating a table

<table>

Container for all table elements

<tr>

Table row - contains cells

<th>

Table header cell - bold and centered

<td>

Table data cell - contains content

Complete HTML Structure

<table>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Student Grades Table

Simple data table with headers and values

This example shows a basic table displaying student grades. Notice the header row with <th> elements and data rows with <td> elements.

Student Grades

Basic table with rows and columns

Frontend

<h3>Student Grades</h3>
<table>
  <tr>
    <th>Name</th>
    <th>Math</th>
    <th>Science</th>
    <th>English</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>95</td>
    <td>88</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>87</td>
    <td>91</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Charlie</td>
    <td>92</td>
    <td>94</td>
    <td>89</td>
  </tr>
</table>

Live Preview

Loading preview...

Weather Data Table

Table with alternating row colors

This example demonstrates using CSS to style tables with alternating row colors for better readability.

Weather Forecast

Table with alternating colors

Frontend

<h3>Weather This Week</h3>
<table>
  <tr>
    <th>Day</th>
    <th>Temperature</th>
    <th>Condition</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>72°F</td>
    <td>Sunny</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>68°F</td>
    <td>Cloudy</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>65°F</td>
    <td>Rainy</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>70°F</td>
    <td>Partly Cloudy</td>
  </tr>
</table>

Live Preview

Loading preview...

Comparison Table

Table for comparing features or options

Comparison tables are perfect for displaying different options side-by-side. This example shows pricing plans with different features.

Feature Comparison

Comparison table with pricing plans

Frontend

<h3>Feature Comparison</h3>
<table>
  <tr>
    <th>Feature</th>
    <th>Basic</th>
    <th>Pro</th>
    <th>Enterprise</th>
  </tr>
  <tr>
    <td>Users</td>
    <td>1</td>
    <td>10</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>Storage</td>
    <td>10 GB</td>
    <td>100 GB</td>
    <td>Unlimited</td>
  </tr>
  <tr>
    <td>Support</td>
    <td>Email</td>
    <td>Priority</td>
    <td>24/7 Phone</td>
  </tr>
  <tr>
    <td>Analytics</td>
    <td>❌</td>
    <td>✓</td>
    <td>✓</td>
  </tr>
</table>

Live Preview

Loading preview...

Best Practices

✅ Do This

✓ Use for tabular data
✓ Use semantic elements
✓ Add border-collapse CSS
✓ Make headers distinct
✓ Use meaningful headers

❌ Avoid This

✗ Don't use for layout
✗ Don't forget headers
✗ Don't nest tables deeply
✗ Don't leave cells empty
✗ Don't use for spacing

Accessibility Tip

Always use <th> for headers with scope attribute to help screen readers understand table structure.

Common Use Cases

📊

Data Display

Organized information

📅

Schedules

Timetables and calendars

💰

Pricing

Plan comparisons

⚙️

Specifications

Product details

📈

Reports

Financial data

✓

Results

Test or survey data

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Description Lists

Table Structure

HTML Code Editor

Building Your Learning Module...

Basic Tables

When to Use

Basic Elements

Pro Tip

Complete HTML Structure

Student Grades

Weather Forecast

Feature Comparison

✅ Do This

❌ Avoid This

Accessibility Tip

Data Display

Schedules

Pricing

Specifications

Reports

Results

Description Lists

Table Structure

HTML Code Editor

Basic Tables

When to Use

Basic Elements

Pro Tip

Complete HTML Structure

Student Grades

Weather Forecast

Feature Comparison

✅ Do This

❌ Avoid This

Accessibility Tip

Data Display

Schedules

Pricing

Specifications

Reports

Results