Bits of .NET

📊 Tables = Tabular Data

Tables display data in rows and columns. <table> is for tabular data, not layout. Use for reports, dashboards.

📝 Basic Table

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>UK</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>2</td>
      <td></td>
    </tr>
  </tfoot>
</table>

🎯 Table Styling

/* Basic table styling */
table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background: #f5f5f5;
  font-weight: bold;
}

/* Zebra striping */
tr:nth-child(even) {
  background: #f9f9f9;
}

/* Hover */
tr:hover {
  background: #f0f0f0;
}

/* Responsive table */
@media (max-width: 600px) {
  table, thead, tbody, tr, td, th {
    display: block;
  }
}

💡 Table Elements

• <table>: Container
• <thead>: Header group
• <tbody>: Body group
• <tfoot>: Footer group
• <tr>: Table row
• <th>: Header cell
• <td>: Data cell
• colspan: Merge columns
• rowspan: Merge rows