HTML Tables

HTML Tables: Structuring Data in Rows and Columns

Tables allow you to display data in a grid format with rows and columns. Let's learn how to create effective HTML tables.

1. Basic Table Structure

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

2. Table Elements

• <table> - Defines the table
• <tr> - Table row
• <th> - Table header cell
• <td> - Table data cell
• <caption> - Table caption
• <thead> - Groups header content
• <tbody> - Groups body content
• <tfoot> - Groups footer content

3. Advanced Table Features

Colspan and Rowspan

<table>
  <tr>
    <th colspan="2">Combined Header</th>
  </tr>
  <tr>
    <td rowspan="2">Combined Cell</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

Complete Table Example

<table>
  <caption>Monthly Savings</caption>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$150</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$250</td>
    </tr>
  </tfoot>
</table>

4. Styling Tables with HTML Attributes

<table border="1" cellpadding="10" cellspacing="0" width="100%">
  <tr>
    <th bgcolor="#f2f2f2">Header</th>
    <th bgcolor="#f2f2f2">Header</th>
  </tr>
</table>

Note: While these HTML attributes work, it's better to use CSS for styling tables in modern web development.

Tables are perfect for displaying structured data, but avoid using them for page layout - that's what CSS is for!