How do I Create a Table in Html?

By Faraz - June 05, 2023

Learn how to create tables in HTML effortlessly with this beginner's guide. Follow simple instructions and examples to understand the syntax and structure for creating tables in HTML.

Join us on Telegram

Read Also

Create a Stunning Resume with Tailwind CSS (Source Code)

To create a table in HTML, you can use the <table>, <tr>, <th>, and <td> elements. Here's an example of the basic structure:

<!DOCTYPE html>
<html>
<head>
  <title>Table Example</title>
</head>
<body>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </table>
</body>
</html>

OUTPUT


    
      Header 1
      Header 2
      Header 3
    
    
      Row 1, Cell 1
      Row 1, Cell 2
      Row 1, Cell 3
    
    
      Row 2, Cell 1
      Row 2, Cell 2
      Row 2, Cell 3

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

Let's break down the structure:

The <table> element is used to create the table itself.
Inside the table, each row is created using the <tr> element.
Within each row, you can use the <th> element to define table headers (usually placed in the first row) and the <td> element to define table cells.

In the example above, we have a table with three columns and two rows. The first row contains table headers, and the subsequent rows contain table cells.

You can add more rows by adding additional <tr> elements within the <table> element. Similarly, you can add more columns by adding additional <th> or <td> elements within each <tr> element.

To add borders to your table in HTML, you can use CSS. Here's an example of how you can modify the previous code to add borders to the table:

<!DOCTYPE html>
<html>
<head>
  <title>Table Example with Borders</title>
  <style>
    table {
      border-collapse: collapse;
    }
    
    th, td {
      border: 1px solid black;
      padding: 8px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
      <td>Row 1, Cell 3</td>
    </tr>
    <tr>
      <td>Row 2, Cell 1</td>
      <td>Row 2, Cell 2</td>
      <td>Row 2, Cell 3</td>
    </tr>
  </table>
</body>
</html>

OUTPUT



    
      Header 1
      Header 2
      Header 3
    
    
      Row 1, Cell 1
      Row 1, Cell 2
      Row 1, Cell 3
    
    
      Row 2, Cell 1
      Row 2, Cell 2
      Row 2, Cell 3

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

In this example, we've added some CSS styles within the <style> tags in the <head> section:

border-collapse: collapse; is used to collapse the borders of adjacent cells into a single border.
border: 1px solid black; adds a solid black border of 1 pixel width to each table header (<th>) and table cell (<td>).
padding: 8px; adds 8 pixels of padding to the content within each table header and table cell, giving it some space inside the borders.

You can adjust the border style, width, color, and padding values according to your preferences.

Read Also

Creating a Stunning Portfolio Website from Scratch using HTML, CSS, and JavaScript

I hope you found the above information helpful. Please let me know in the comment box if you have an alternate answer 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: html table, create a table in html, html table tags, html table structure, how to create a table using html, questions

End of the article