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.
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 |
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 |
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.
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 😊
