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:
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:
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 π