How to Make a Table in HTML

HTML (Hypertext Markup Language) is the cornerstone of web development, and as such, it is an essential language for any software developer to master. Tables are a fundamental component when creating a website or a web application, and in this article, we will show you how to make a table in HTML.

We will cover the basics, including how to create a simple table, how to add data to the table, how to add borders, and how to format your table. We will also cover some advanced techniques, such as how to merge cells in a table and how to make your table responsive for mobile devices.

Creating a Simple Table

The easiest way to make a table in HTML is by using the table tag. Here’s how to get started:

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

This code creates a simple table with two headings and two rows of data. Each row is enclosed in a tr tag, and each cell is enclosed in a td tag. The first row of the table contains the heading cells, which are enclosed in a th tag instead of a td tag. The th tag is used to indicate that the cell contains a header for the table. Without this tag, the cell would be indistinguishable from a regular data cell.

Adding Data to the Table

The example above used hardcoded data, but a better way to populate a table with data is to use a loop in your code. Here’s an example:

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <script>
    var products = [
      { name: 'Product 1', price: 10 },
      { name: 'Product 2', price: 20 },
      { name: 'Product 3', price: 30 },
    ];

    for (var i = 0; i < products.length; i++) {
      var product = products[i];
      document.write('<tr>');
      document.write('<td>' + product.name + '</td>');
      document.write('<td>' + product.price + '</td>');
      document.write('</tr>');
    }
  </script>
</table>

This example creates a table with two columns, “Product” and “Price”. The data is populated from an array using a for loop. The loop iterates over each element in the array and generates a new row for each product in the table.

Styling Your Table

CSS (Cascading Style Sheets) is used to style HTML elements, and tables are no exception. Here’s an example of how to add borders to your table:

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

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
</table>

This code adds a 1 pixel border to the table and all of its cells. By default, HTML tables do not have borders, so this is a useful trick to make your table stand out. You can change the border color, width, and other properties to fit your needs.

Merging Cells in a Table

You can merge two or more cells in a table using the colspan attribute. The following example merges the first two cells of the first row:

<table>
  <tr>
    <th colspan="2">Heading 1 & 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

The colspan attribute specifies the number of columns that a cell should span. In this case, we’re setting it to 2, which means the cell will span two columns.

Making Your Table Responsive

In today’s mobile-centered world, it’s important that your table is responsive and looks good on mobile devices. The easiest way to achieve this is by using CSS media queries. Here’s an example:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

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

  @media screen and (max-width: 600px) {
    th,
    td {
      display: block;
    }

    td:first-child {
      border-top: none;
    }
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>$10</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>$20</td>
  </tr>
</table>

In this example, we’re using CSS to define how the table should look on a small screen (under 600 pixels wide). We’re changing the cells’ display property to block, which causes them to stack one on top of the other instead of being displayed in a single row. We’re also removing the top border from the leftmost cell in each row to create a cleaner look.

Conclusion

Tables are an essential component of any website or web application, and knowing how to create, style, and format them is crucial for any software developer. In this article, we covered the basics of how to make a table in HTML, including how to add data, how to add borders, and how to merge cells. We also showed you an example of how to make your table responsive for mobile devices. With this knowledge, you’ll be well on your way to creating beautiful, functional tables for your web projects.

📕 Related articles about HTML

• How to Link HTML Pages: A Comprehensive Guide to Achieve Accurate and Easy Page Navigation
• How to Use PHP in HTML
• How to Use jQuery in HTML
• An In-Depth Guide on How to Create Login Page in HTML
• How to Create a CSS File for HTML: A Comprehensive Guide
• Understanding HTML Classes for Web Development