Day 3: HTML Tables

Daily Objective

Construct structured data tables using semantic table tags and span cells across rows and columns.

1. Table Elements

• <table>: Container for tabular data.
• <thead>: Table header grouping header rows.
• <tbody>: Table body grouping data rows.
• <tr>: Table row.
• <th>: Header cell (bold and centered by default, accessible for screen readers).
• <td>: Standard data cell.

<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML Basics</td>
      <td>2 Weeks</td>
      <td>In Progress</td>
    </tr>
    <tr>
      <td>CSS Mastery</td>
      <td>4 Weeks</td>
      <td>Upcoming</td>
    </tr>
  </tbody>
</table>

2. Spanning Cells: colspan & rowspan

• colspan="2": Makes a cell span across 2 columns horizontally.
• rowspan="2": Makes a cell span across 2 rows vertically.

<tr>
  <td rowspan="2">Full-Stack Track</td>
  <td>HTML & CSS</td>
</tr>
<tr>
  <td>JavaScript</td>
</tr>

Daily Hands-on Practice (70%)

1. Build a weekly study schedule table with columns: Day, Time, Topic, and Completed (Yes/No).
2. Add a footer row using <tfoot> with a cell spanning all columns using colspan.