Learn SQL

How to Make a Table in HTML: Your Ultimate Guide to Mastery

By Cristian G. Guasch •  Updated: 09/18/23 •  8 min read

Dipping your toes into the world of web development? I’ve got you covered. We’ll start with something basic yet essential: creating a table in HTML. It’s a skill you’ll find handy time and again, whether you’re setting up a webpage for your business, crafting an online portfolio, or even working on a complex web project.

HTML tables might seem intimidating at first glance, but trust me, they’re not as complicated as they look. Tables are essentially just rows and columns that help organize and display data effectively on your webpage. Think of it like arranging information on an Excel spreadsheet.

Don’t worry if all this sounds slightly overwhelming right now. By the end of this guide, you’ll be able to create an HTML table with confidence. So let’s dive straight in!

Understanding HTML and Tables

Let’s dive right in! Hypertext Markup Language, or as we fondly know it, HTML, is the backbone of most web pages. It’s like the skeleton that gives structure to the content on a webpage. Now, one crucial part of this skeleton is tables.

HTML tables are used to arrange data – text, images, links, other tables, etc., into rows and columns of cells. They’re incredibly useful for displaying data in a grid format – kind of like an Excel spreadsheet on your webpage!

Now you may be wondering how do I make a table with HTML? Well, it’s not rocket science! You simply need to use the <table> tag. This tells the browser “Hey there! We’re about to start a table.” Then you’ll need to add rows using the <tr> tag which stands for ‘table row’. Inside these rows you can place your data using either <td> (table data) tags or <th> (table header) tags.

For example:

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

This simple piece of code will create a two-column table with headers and single row of data under those headers. Not too bad right?

Now here’s where things get interesting. You can also nest tables within another table if needed! Just start another <table> tag inside any given <td>.

Here’s an example:

<table border="1">
   <tr>
      <td>This is normal cell.</td>

      <!-- Nested Table starts -->
      <td><table border="2"> 
         <tr><td>Nested table</td></tr>
      </table></td>
   </tr>
</table>

This example will create a two-column table where the second cell contains another nested single-cell table. Neat, huh?

So there you have it! Creating HTML tables is as simple as pie. And remember, with a little practice, you’ll start building tables in no time.

Before we dive into creating a table, let’s get our HTML document set up. Kicking off any HTML project, it’s crucial to start with the basic structure of an HTML document. I’m talking about the doctype declaration and those essential root elements.

First things first, at the very top of your document, you’ll need to include <!DOCTYPE html>. This may seem like a strange jumble of symbols and letters but trust me, it’s important! It simply tells your browser that this is indeed an HTML5 document.

Now let’s jump into the meat of our HTML sandwich – the <html> element. This root element wraps around all other elements in your file like a cozy blanket. Here’s how you’d write it out: <html lang="en">. You might be wondering what lang="en" is doing there? Well, that attribute specifies the language of your content – “en” for English in this case.

Within our snug <html> tag lie two main elements: <head> and <body>. The head element isn’t visible on your webpage but holds vital info such as metadata, scripts or stylesheets you might want to link to. It typically looks something like this:

<head>
  <meta charset="UTF-8">
  <title>Your Page Title</title>
</head>

Last but not least, we have our body element – <body>. This is where all visible webpage content goes; think text, images…and tables!

Now that we’ve got our barebones HTML file lined up and ready to go, it’s time for us to create some tables! But remember folks – Rome wasn’t built in a day and neither will your website be. So stay patient and keep practicing!

In my next section we’re going straight into constructing simple tables using various tags including ‘<table>’, ‘<tr>’, ‘<td>’, and ‘<th>’. So, stick around and let’s learn together!

Creating a Basic Table in HTML

Let’s dive right into the heart of creating a basic table in HTML. It’s simpler than you might think! You’ll start by using the <table> tag. Like so many other elements in HTML, it’s all about opening and closing tags.

<table>
</table>

In this simple shell of a table, there isn’t much happening yet. We’ve got our starting point though, and that’s half the battle won! Now let’s add some content within our humble little table.

To create rows in your table, you’ll use the <tr> tag (which stands for “table row”). Within each row, data is inserted using either the <td> tag (for “table data”) or <th> tag (for “table header”).

Here’s how you’d set up a basic two-row table:

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

Voila! There we have it – a simple HTML table with one header row and one data row.

But what if you want to build upon this? Well, variations of these tags can help further customize your tables. The colspan attribute allows a cell to span multiple columns while rowspan does the same for rows. Here’s an example:

<table>
   <tr>
      <th colspan="2">A Header Spanning Two Columns</th> 
   </tr>     
   <tr>       
     <td>Data Cell One A</td>       
     <td>Data Cell One B</td>   
   </tr>     
   <tr>        
     <td rowspan="2">A Cell Spanning Two Rows</td>       
     <td>Data Cell Two B</td>   
   </tr>     
   <tr>
     <td>Data Cell Three B</td>
   </tr>
</table>

This example demonstrates a header spanning two columns and a data cell spanning two rows. So, as you can see, HTML tables offer great flexibility! Now, it’s your turn to give it a shot. Happy coding!

Adding Styling and Features to Your HTML Table

After you’ve got the basics down, it’s time to elevate your HTML table game. You’ll be amazed at how a little bit of styling can transform a simple data display into a sleek, professional looking table. CSS is the secret sauce that’ll make this happen.

Let’s say you want to add some padding around your cells for better readability. Here’s how you’d do it:

<style>
td {
  padding: 15px;
}
</style>

In the above example, td refers to ‘table data’. The padding property gives space between the cell content and its border.

Next up? Changing background color. Let’s give our table rows alternating colors – a feature commonly called zebra striping:

<style>
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>

The nth-child(even) selector targets every even row, applying the specified background color.

Now let’s talk borders. A well-defined border can add structure and clarity to your table. Here’s an example:

<style>
table, td {
  border: 1px solid black;
}
</style>

This snippet applies a solid black border around both the entire table (table) and individual cells (td).

Not only can we modify styles using CSS, but we can also add features like hover effects:

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

With this code in place, anytime someone hovers over a row in your table, the background color changes!

All these examples show just how flexible HTML tables are when paired with CSS. From padding and colors to borders and hover effects – there’s plenty of room for customization!

Cristian G. Guasch

Hey! I'm Cristian Gonzalez, I created HTML Easy to help you learn HTML easily and fast.

Related articles