HTML Tables Tutorial with Examples: Become An Expert In 15 Minutes

Welcome to our HTML Tables Tutorial with Examples! 🎉 In this tutorial, we’ll guide you through the essentials of creating and styling tables in HTML, from basic structure to advanced designs.

You’ll learn how to make your tables responsive, accessible, and visually appealing, with practical and visual examples along the way. Let’s dive into mastering HTML tables and take your web design skills to the next level! ✨

1. Introduction to HTML Tables

What is an HTML Table? 🗃️

An HTML table is a structured presentation of data on a webpage, along rows and columns. It is great when one wants to present a list of information, comparisons, or any data that can easily be presented in a grid. Think about this: a table as a grid where every box can carry some information!

Brief History of HTML Tables in Web Design

HTML tables have been around as long as the internet itself. They were primarily used for layout in the early development years of the web, helping designers create complex web pages. However, over time, their primary function shifted back to displaying data, as CSS became the preferred method for layout.

Why Use Tables in Modern Web Development? (Pros and Cons)

Pros:

  • Structured Data: Perfect for displaying data in an organized way.
  • Easy to Read: Rows and columns help users quickly scan for information.
  • Semantic Meaning: Tables provide a clear way to present tabular data.

Cons:

  • Do Not Use for Layout: Do not use tables for page layout—CSS will do it better!
  • Responsive Issues: Tables can be a bit of a headache on small screens, but we will explore making them responsive shortly. 📱

Where Not to Use HTML Tables (Avoiding Layout-Based Tables) 🚫

Don’t use tables for layouts, such as creating entire web page structures. Instead, use CSS to create a layout. That way, you keep your HTML clean and your data structured correctly!

2. Anatomy of an HTML Table

Understanding the Structure: Table, Rows, and Cells

An HTML table consists of three main components:

  • Table: The entire table structure.
  • Rows: Lines on which data stretches horizontally.
  • Cells:  Individual boxes within a row where data is displayed.

Basic HTML Table Syntax (Step-by-Step Example) 📋

Here’s a simple example to get started with tables:

<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

Output:

HTML Tables Tutorial with Examples
HTML Tables Tutorial with Examples

Breaking Down the Code: Table Elements Explained

  • <table>: The container for the table.
  • <tr>: Defines a table row.
  • <th>: Defines a header cell (bold and centered by default).
  • <td>: Defines a standard data cell.

I know the above table looks quite bad, but worry not, we will make it beautiful, let’s continue.

3. Creating Table Rows and Cells

How to Define Rows with <tr> (Table Row) 📅

To create a new row in your table, simply use the <tr> tag. For example:

<tr>
    <td>Data Cell 1</td>
    <td>Data Cell 2</td>
</tr>

Using <td> to Create Data Cells 

<tr>
    <td>Banana</td>
    <td>Yellow</td>
</tr>

Using <th> to Create Header Cells 

<tr>
    <th>Fruit</th>
    <th>Color</th>
</tr>

Real-World Examples of Rows and Cells 🌍

Here’s a real-world example of a simple fruit table:

<table>
    <tr>
        <th>Fruit</th>
        <th>Color</th>
    </tr>
    <tr>
        <td>Banana</td>
        <td>Yellow</td>
    </tr>
    <tr>
        <td>Cherry</td>
        <td>Red</td>
    </tr>
</table>

Output:

HTML Tables Tutorial with Examples
HTML Tables Tutorial with Examples

4. Understanding Table Headers and Captions

Horizontal and Vertical Headers (<th>)

You can use <th> to create horizontal headers (as shown in previous examples). For vertical headers, define the first cell in each row as a <th> element:

<table>
    <tr>
      <th>Day</th>
      <th>Breakfast</th>
      <th>Lunch</th>
      <th>Dinner</th>
    </tr>
    <tr>
      <th>Monday</th>
      <td>Pancakes</td>
      <td>Salad</td>
      <td>Pizza</td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td>Omelette</td>
      <td>Soup</td>
      <td>Pasta</td>
    </tr>
    <tr>
      <th>Wednesday</th>
      <td>Cereal</td>
      <td>Sandwich</td>
      <td>Stir-fry</td>
    </tr>
  </table>

Output:

HTML Tables Tutorial with Examples, Verticle Table
HTML Tables Tutorial with Examples, Verticle Table

We will learn soon about Table Borders.

Creating Complex Table Headers (Multi-Level Headers)

For more complex headers, you can nest headers. Here’s how to create multi-level headers:

<table>
    <tr>
        <th colspan="2">Fruits</th>
        <th>Vegetables</th>
    </tr>
    <tr>
        <th>Fruit Name</th>
        <th>Color</th>
        <th>Veg Name</th>
    </tr>
    <tr>
        <td>Banana</td>
        <td>Yellow</td>
        <td>Carrot</td>
    </tr>
</table>



<!--Some simple CSS to design it-->
<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }

  th {
    background-color: #f2f2f2;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  tr:hover {
    background-color: #e0e0e0;
  }
</style>

Output:

HTML Tables Tutorial with Examples, Complex Table
HTML Tables Tutorial with Examples, Complex Table

Adding a Caption (<caption>) to Enhance Table Clarity 📝

You can provide a title for your table using the <caption> tag. Here’s how:

<table>
    <caption>Fruits and Vegetables</caption>
    <tr>
        <th>Fruit</th>
        <th>Color</th>
    </tr>
    <tr>
        <td>Apple</td>
        <td>Red</td>
    </tr>
</table>




<style>
  table {
    width: 50%;
    border-collapse: collapse;
    margin: 20px 0;
    font-family: Arial, sans-serif;
  }

  caption {
    font-size: 1.5em;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: center;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }

  th {
    background-color: #f2f2f2;
  }

  tr:nth-child(even) {
    background-color: #f9f9f9;
  }

  tr:hover {
    background-color: #e0e0e0;
  }
</style>

Output:

HTML Tables Tutorial with Examples, Table Caption
HTML Tables Tutorial with Examples, Table Caption

5. HTML Table Borders: From Basic to Advanced Styling

Adding Simple Borders Using CSS

To add borders to your table, use CSS like this:

<style>
table {
    border-collapse: collapse; /* Merges borders */
    width: 100%; /* Makes table full-width */
}

th, td {
    border: 1px solid black; /* Adds border */
    padding: 8px; /* Adds space inside cells */
}
</style>





<table>
  <tr>
      <th>Fruit</th>
      <th>Color</th>
  </tr>
  <tr>
      <td>Apple</td>
      <td>Red</td>
  </tr>
  <tr>
      <td>Banana</td>
      <td>Yellow</td>
  </tr>
  <tr>
      <td>Grapes</td>
      <td>Green</td>
  </tr>
</table>

Output:

HTML Tables Tutorial with Examples, Simple CSS
HTML Tables Tutorial with Examples, Simple CSS

Border Collapsing: Combining Borders for Clean Layouts

The border-collapse property combines adjacent borders into a single border. This gives a cleaner look to your table.

We have used this property in our above example.

Customizing Borders: Dotted, Dashed, and Double Lines 🎨

Here’s a list of various custom border styles you can use in CSS:

  • solid
  • dotted
  • dashed
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Here is examples of some custom borders.

HTML Tables Tutorial with Examples, Custom Borders
HTML Tables Tutorial with Examples, Custom Borders

Creating Rounded Borders for a Sleeker Look

To create rounded corners, use the border-radius property:

<style>
table {
  border: 1px solid black;
  border-radius: 10px; /* Rounded corners */
  overflow: hidden; /* Ensures rounded corners appear */
  height: 200px;
  width: 400px;
}

th, td {
  border: 1px solid black;
  border-radius: 10px; /* Rounded corners for cells */
}
</style>


<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

Output:

HTML Tables Tutorial with Examples, Rounded Borders
HTML Tables Tutorial with Examples, Rounded Borders

Using Border-Color to Add Style ✨

You can change the color of your table borders using border-color:

You need to change the color(black) property in border: 1px solid black; and you can also use border-color property separately.

HTML Tables Tutorial with Examples, Border Color
HTML Tables Tutorial with Examples, Border Color

6. Working with Table Dimensions

How to Set Table Widths (Fixed and Responsive)

You can set fixed or responsive widths for your table:

table {
    width: 80%; /* Fixed width */
}

To make it responsive, use percentages or media queries.

Adjusting Column Width for Consistency

Set widths for individual columns like this:

td:nth-child(1) {
    width: 50%; /* First column takes 50% */
}

Controlling Table Height for Vertical Alignment

You can control the height of your table with:

td {
    height: 50px; /* Fixed height */
}

Ensuring Responsive Behavior for Smaller Screens 📱

You can use media queries to ensure tables look good on small screens:

@media screen and (max-width: 600px) {
    table {
        width: 100%; /* Full width on small screens */
    }
}

7. Table Padding and Spacing

The Difference Between Cell Padding and Cell Spacing

  • Padding is the space inside a cell, between the cell border and its content.
  • Spacing (now replaced by border-spacing) is the space between cells.

Adjusting Padding for Content Comfort 🛋️

Use the padding property to adjust cell padding:

td {
    padding: 10px; /* Adds space inside cells */
}

Reducing or Increasing Space Between Cells 📏

To manage spacing, you can set border-spacing:

table {
    border-spacing: 5px; /* Space between cells */
}

Note:

This is just the first part of the HTML Tables. I will be uploading the next part in the upcoming days.

Also Read:

FAQs

1. What is an HTML table used for?

It is used to organize and display data in rows and columns on a webpage. It helps in presenting structured information, like charts, comparisons, or tabular data, in an easily readable format on a webpage.

2. Can I style HTML tables using CSS?

Yes! You can use CSS to style HTML tables. You can adjust borders and spacing and even add background colors and hover effects, CSS makes your tables more visually appealing and beautiful.

3. How can I make my HTML tables responsive for mobile?

You can use media queries or you can also use responsive units like percentage to write width and height.

4. What are <td> and <th> tags in HTML tables?

  • <td> tag defines a table data cell, which holds the actual content.
  • <th> tag defines a header cell, It is typically bold and centered to indicate column or row headings.

5. How can I merge cells in HTML tables?

You can merge cells horizontally using the colspan attribute in the <td> tag and vertically using the rowspan attribute. This is useful for creating more complex table layouts like calendars or schedules.

facebookShare on Facebook
TwitterPost on X
FollowFollow us
PinterestSave

Leave a Reply