📊 HTML Tables in Detail

HTML tables allow you to organize data into rows and columns. They're perfect for displaying tabular information like schedules, marksheets, and more.

🔍 Syntax: Use <table> to start a table, then add rows with <tr> and cells with <td> or <th>.

📋 Basic Table Example

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anjali</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>23</td>
  </tr>
</table>

<th> is used for header cells, while <td> is for data cells.

🔄 Using colspan and rowspan

<table border="1">
  <tr>
    <th colspan="2">Student Details</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Anjali</td>
  </tr>
</table>

colspan lets a cell span multiple columns. Similarly, rowspan can make a cell span multiple rows.

💡 Tip: Always close your <table> structure properly and avoid using too many nested tables!

🎨 Styling Tables (Basic CSS)

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
</style>

🎯 Try It Yourself

Create a table showing your weekly schedule with days as columns and subjects as rows.

Back to Courses 📚