📘 Blog 6: Creating Tables in HTML — Organize Your Data Clearly

Welcome back! By now, you’ve learned how to structure text, add images, and create links and buttons. Now let’s learn how to organize data in a clean and structured way using HTML tables.

Tables are perfect for displaying schedules, price lists, product features, or any kind of tabular data.

📄 The Basic Table Structure

Tables are created using the <table> tag, with rows defined by <tr> and cells defined by <td> (for data) and <th> (for headers).

Example Basic Table

<table>
  <tr>
    <th>Course</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>HTML Basics</td>
    <td>1 Week</td>
  </tr>
  <tr>
    <td>CSS Fundamentals</td>
    <td>2 Weeks</td>
  </tr>
</table>

🧩 Important Table Tags

Tag	Meaning
`<table>`	Starts a table
`<tr>`	Table row
`<th>`	Table header cell (bold & centered by default)
`<td>`	Table data cell

✨ Adding Borders and Styling

Tables have no borders by default. You can add them with the border attribute or CSS.

<table border="1">
  ...
</table>

Recommended: Use CSS for more control.

htmlCopyEdit<table style="border-collapse: collapse; width: 100%;">
  <tr>
    <th style="border: 1px solid black; padding: 8px;">Name</th>
    <th style="border: 1px solid black; padding: 8px;">Age</th>
  </tr>
  <tr>
    <td style="border: 1px solid black; padding: 8px;">Alex</td>
    <td style="border: 1px solid black; padding: 8px;">25</td>
  </tr>
</table>

🔄 Merging Cells — `colspan` and `rowspan`

You can merge cells horizontally or vertically.

Horizontal Merge (`colspan`)

<td colspan="2">Merged Cell</td>

Vertical Merge (`rowspan`)

<td rowspan="2">Merged Cell</td>

🎨 Example: Stylish Table

<table style="border-collapse: collapse; width: 60%;">
  <tr style="background-color: #f2f2f2;">
    <th style="border: 1px solid #ddd; padding: 8px;">Product</th>
    <th style="border: 1px solid #ddd; padding: 8px;">Price</th>
    <th style="border: 1px solid #ddd; padding: 8px;">In Stock</th>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Laptop</td>
    <td style="border: 1px solid #ddd; padding: 8px;">$800</td>
    <td style="border: 1px solid #ddd; padding: 8px;">Yes</td>
  </tr>
  <tr>
    <td style="border: 1px solid #ddd; padding: 8px;">Headphones</td>
    <td style="border: 1px solid #ddd; padding: 8px;">$150</td>
    <td style="border: 1px solid #ddd; padding: 8px;">No</td>
  </tr>
</table>

💡 Tips for Using Tables

✅ Use tables only for tabular data — not for general layout (use CSS for layout).
✅ Always include <th> for headers — it improves accessibility and clarity.
✅ Use CSS to make your tables beautiful and consistent with your design.

✅ Summary

Use <table> for creating tables.
Use <tr>, <th>, and <td> to structure rows and cells.
Use colspan and rowspan to merge cells.
Style with CSS to improve readability and appearance.

🚀 What’s Next?

In the next blog, we’ll explore HTML forms, which let you collect input from users — like contact forms, sign-up forms, and surveys. You’ll learn how to create input fields, buttons, and more!

Stay tuned and keep coding! 💬✨