HTML

HTML tables are used to organize data in rows and columns. They provide a structured way to present information visually, such as displaying a schedule, price list, or comparison chart.

---

1. Basic HTML Table

The <table> tag defines a table in HTML. A table is made up of rows (<tr>), and rows contain cells (<td> for data and <th> for headers).

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Emma</td>
    <td>30</td>
    <td>Los Angeles</td>
  </tr>
</table>

---

2. Table Borders

The border attribute or CSS is used to add borders to the table and its cells.

Inline Border Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
</table>

Border Styling with CSS:

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

---

3. Table Header

The <th> element defines table headers. By default, it makes the text bold and center-aligned.

Example:

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>28</td>
    <td>Chicago</td>
  </tr>
</table>

---

4. Rowspan and Colspan

rowspan:

The rowspan attribute allows a cell to span multiple rows.

<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Details</th>
  </tr>
  <tr>
    <td>John</td>
    <td rowspan="2">25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Emma</td>
    <td>Los Angeles</td>
  </tr>
</table>

---

colspan:

The colspan attribute allows a cell to span multiple columns.

<table border="1">
  <tr>
    <th colspan="3">Student Details</th>
  </tr>
  <tr>
    <td>Name</td>
    <td>Age</td>
    <td>City</td>
  </tr>
  <tr>
    <td>Emma</td>
    <td>30</td>
    <td>Los Angeles</td>
  </tr>
</table>

---

5. Table Padding and Spacing

1. Cell Padding: Space inside a cell between its content and its border. <style> td { padding: 10px; } </style>
2. Cell Spacing: Space between table cells (use border-spacing for CSS or the cellspacing attribute in HTML). <table cellspacing="10" border="1"> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> </table> OR in CSS: <style> table { border-spacing: 10px; } </style>

---

6. Table Styling

You can style tables with CSS to make them visually appealing.

Example of Styled Table:

<style>
  table {
    width: 80%;
    margin: auto;
    border-collapse: collapse;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  th, td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
  }
  th {
    background-color: #f4f4f4;
    color: #333;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  tr:hover {
    background-color: #f1f1f1;
  }
</style>

---

7. Merging Headers with <thead>, <tbody>, and <tfoot>

To structure tables semantically, use:

• <thead>: Table header
• <tbody>: Table body
• <tfoot>: Table footer

Example:

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Emma</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">End of Table</td>
    </tr>
  </tfoot>
</table>

---

8. Responsive Tables

Tables can become cluttered on smaller screens. Use CSS to make them responsive.

Example:

<style>
  .table-container {
    overflow-x: auto;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: left;
  }
</style>

<div class="table-container">
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Emma</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </table>
</div>

---

9. Best Practices for HTML Tables

1. Use <th> for Headers: It improves accessibility and helps screen readers interpret the table correctly.
2. Avoid Using Tables for Layout: Use CSS for layouts instead of tables.
3. Add Captions: Use the <caption> tag to describe the table’s content. <table> <caption>Student Details</caption> </table>
4. Minimize Rowspan and Colspan: Overusing them can make the table harder to read and maintain.
5. Test for Responsiveness: Ensure tables work well on all devices.

---