Day 4 of HTML

Today I mastered HTML tables, learning how to create structured tabular data with proper semantics and styling. Here's everything I discovered about building tables:

---

📊 HTML Table Structure

HTML tables are built using a hierarchical structure of elements that organize data into rows and columns.

Basic Table Elements:

• <table> — container for the entire table
• <tr> — table row (horizontal)
• <th> — table header cell
• <td> — table data cell
• <caption> — table title/description

Simple Table Example:

<table>
  <tr>
    <th>No.</th>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>99</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Maria Santos</td>
    <td>95</td>
  </tr>
</table>

🏗️ Semantic Table Structure

For better accessibility and organization, use semantic table elements:

Table Sections:

• <thead> — groups header content
• <tbody> — groups body content
• <tfoot> — groups footer content

Well-Structured Table:

<table>
  <caption>Student Grades Report</caption>

  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Math</th>
      <th>Science</th>
      <th>Average</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>001</td>
      <td>John Doe</td>
      <td>95</td>
      <td>92</td>
      <td>93.5</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Jane Smith</td>
      <td>88</td>
      <td>94</td>
      <td>91</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="4">Class Average</td>
      <td>92.25</td>
    </tr>
  </tfoot>
</table>

🔗 Table Attributes

colspan Attribute:

Specifies how many columns a cell should span horizontally.

<table>
  <tr>
    <th colspan="3">Quarter 1 Results</th>
  </tr>
  <tr>
    <th>Student</th>
    <th>Math</th>
    <th>Science</th>
  </tr>
  <tr>
    <td>Alex</td>
    <td>90</td>
    <td>88</td>
  </tr>
</table>

rowspan Attribute:

Specifies how many rows a cell should span vertically.

<table>
  <tr>
    <th rowspan="3">Subjects</th>
    <th>Math</th>
    <td>95</td>
  </tr>
  <tr>
    <th>Science</th>
    <td>92</td>
  </tr>
  <tr>
    <th>English</th>
    <td>88</td>
  </tr>
</table>

Complex Table with Both Attributes:

<table>
  <caption>Student Performance Dashboard</caption>

  <thead>
    <tr>
      <th rowspan="2">Names</th>
      <th colspan="2">Core Subjects</th>
      <th rowspan="2">Average</th>
    </tr>
    <tr>
      <th>Mathematics</th>
      <th>Science</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Jaymar</td>
      <td>94</td>
      <td>92</td>
      <td>93</td>
    </tr>
    <tr>
      <td>Sarah</td>
      <td>89</td>
      <td>95</td>
      <td>92</td>
    </tr>
    <tr>
      <td>Mike</td>
      <td>91</td>
      <td>87</td>
      <td>89</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="3">Total Students</td>
      <td>3</td>
    </tr>
  </tfoot>
</table>

🎨 Basic Table Styling

Here's the CSS I used to style my tables:

table, tr, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

caption {
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.2em;
}

thead {
  background-color: yellow;
}

tbody {
  background-color: lightblue;
}

tfoot {
  background-color: lightgray;
}

th, td {
  padding: 8px;
  text-align: left;
}

th {
  font-weight: bold;
}

📋 Practical Table Examples

Product Comparison Table:

<table>
  <caption>Laptop Comparison</caption>

  <thead>
    <tr>
      <th>Feature</th>
      <th>Basic Model</th>
      <th>Pro Model</th>
      <th>Premium Model</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>RAM</td>
      <td>8GB</td>
      <td>16GB</td>
      <td>32GB</td>
    </tr>
    <tr>
      <td>Storage</td>
      <td>256GB SSD</td>
      <td>512GB SSD</td>
      <td>1TB SSD</td>
    </tr>
    <tr>
      <td>Price</td>
      <td>$899</td>
      <td>$1,299</td>
      <td>$1,899</td>
    </tr>
  </tbody>
</table>

Schedule Table:

<table>
  <caption>Weekly Class Schedule</caption>

  <thead>
    <tr>
      <th>Time</th>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>9:00 AM</td>
      <td>Math</td>
      <td>Science</td>
      <td>Math</td>
      <td>Science</td>
      <td>Review</td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td>English</td>
      <td>History</td>
      <td>English</td>
      <td>History</td>
      <td colspan="1">Free Period</td>
    </tr>
  </tbody>
</table>

♿ Table Accessibility

Best Practices:

• Always use <th> for headers
• Include scope attribute for complex tables
• Use <caption> to describe table content
• Provide alternative text for data tables

<table>
  <caption>Monthly Sales Report by Region</caption>

  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">January</th>
      <th scope="col">February</th>
      <th scope="col">March</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>$50,000</td>
      <td>$55,000</td>
      <td>$52,000</td>
    </tr>
    <tr>
      <th scope="row">South</th>
      <td>$48,000</td>
      <td>$51,000</td>
      <td>$49,000</td>
    </tr>
  </tbody>
</table>