📊 HTML Tables Mastery

<table>
  <tr>
    <th colspan="3">Q1 Sales Report</th>
  </tr>
  <tr>
    <th>Product</th>
    <th>Units Sold</th>
    <th>Revenue</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>150</td>
    <td>$75,000</td>
  </tr>
  <tr>
    <td>Phone</td>
    <td>280</td>
    <td>$84,000</td>
  </tr>
</table>

<table>
  <tr>
    <th rowspan="3">Engineering</th>
    <th>Employee</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>John Smith</td>
    <td>Manager</td>
  </tr>
  <tr>
    <td>Sarah Johnson</td>
    <td>Developer</td>
  </tr>
  <tr>
    <th rowspan="2">Marketing</th>
    <td>Mike Brown</td>
    <td>Manager</td>
  </tr>
  <tr>
    <td>Emma Davis</td>
    <td>Designer</td>
  </tr>
</table>

.table-container {
  overflow-x: auto;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  -webkit-overflow-scrolling: touch;
}

table {
  min-width: 600px;
  width: 100%;
}

/* Mobile styles */
@media (max-width: 768px) {
  th, td {
    padding: 8px 12px;
    font-size: 14px;
  }
  
  .table-container {
    border: 1px solid #e2e8f0;
  }
}

/* Scroll indicator */
.table-container::-webkit-scrollbar {
  height: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.table-container::-webkit-scrollbar-thumb {
  background: #ff6b6b;
  border-radius: 3px;
}

/* Mobile: Stack cells vertically */
@media (max-width: 768px) {
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  tr {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 15px;
    margin: 15px 0;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  td {
    border: none;
    position: relative;
    padding-left: 50%;
    padding-bottom: 10px;
  }
  
  td:before {
    content: attr(data-label) ":";
    position: absolute;
    left: 15px;
    width: 45%;
    font-weight: 600;
    color: #ff6b6b;
  }
}

// Simple table sorting function
function sortTable(column) {
  const table = document.querySelector('table');
  const tbody = table.querySelector('tbody');
  const rows = Array.from(tbody.querySelectorAll('tr'));
  
  // Sort rows based on column content
  rows.sort((a, b) => {
    const aVal = a.children[column].textContent;
    const bVal = b.children[column].textContent;
    return aVal.localeCompare(bVal, undefined, {numeric: true});
  });
  
  // Re-append sorted rows
  rows.forEach(row => tbody.appendChild(row));
}

// Add click listeners to headers
document.querySelectorAll('th').forEach((header, index) => {
  header.addEventListener('click', () => sortTable(index));
  header.style.cursor = 'pointer';
});

// Table search functionality
function searchTable(searchTerm) {
  const table = document.querySelector('table');
  const rows = table.querySelectorAll('tbody tr');
  
  rows.forEach(row => {
    const text = row.textContent.toLowerCase();
    const matches = text.includes(searchTerm.toLowerCase());
    row.style.display = matches ? '' : 'none';
  });
}

// HTML for search input
<input type="text" id="tableSearch" 
       placeholder="Search table..."
       oninput="searchTable(this.value)"
       style="margin-bottom: 1rem; padding: 8px 12px; 
              border: 2px solid #e2e8f0; border-radius: 8px;">