HTML Table

HTML provides tables as a tool for organizing and displaying data in rows and columns.
Tables are essential for presenting structured information in a tabular format.
They offer flexibility in defining headers, rows, columns, and additional attributes.
Let's explore the attributes and examples of HTML tables to understand their complete functionality.

1. Basic Table Structure:

The most common use of a table is to display data in rows and columns. Here's a basic example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

2. Table Headers:

You can use the <th> element to define headers for rows or columns:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>

3. Table Captions:

You can add a caption to the table using the <caption> element:

<table>
  <caption>List of Employees</caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>Manager</td>
  </tr>
</table>

4. Table Borders and Styling:

You can add borders and styles to the table using CSS:

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

5. Spanning Rows and Columns:

You can span multiple rows or columns using the rowspan and colspan attributes:

<table>
  <tr>
    <td colspan="2">Header</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td rowspan="2">Data 2</td>
  </tr>
  <tr>
    <td>Data 3</td>
  </tr>
</table>

6. Table Accessibility:

Ensure your table is accessible by providing appropriate header cells and using semantic markup:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

7. Use Cases:

Tables are perfect for displaying tabular data, such as schedules, pricing lists, or product catalogs.
They're commonly used in reports, dashboards, and financial statements to present structured information in a concise format.
Tables can be employed in conjunction with JavaScript libraries or frameworks to create dynamic and interactive data tables.
They facilitate data comparison, analysis, and visualization, enabling users to make informed decisions based on the presented information.
Tables can be used for accessibility purposes, providing structured data for screen readers and alternative navigation options for users with disabilities.

Conclusion:

HTML tables offer a versatile way to organize and present structured data on a web page.

Archive

Html Table