HTML Fundamentals Tutorial
About Lesson

<table> Element: Introduction to tables for displaying tabular data. Table rows (<tr>), table headers (<th>), and table data (<td>): Components of a table structure. Table attributes for controlling layout, borders, and accessibility features.

  • Definition:
    Tables (<table>) are used to display tabular data in rows and columns. They consist of table rows (<tr>), table headers (<th>), and table data (<td>).

  • Element Type:
    Block-level

  • Why Use This:
    Tables are an effective way to organize and present complex data sets in a systematic and easy-to-understand format. They provide a visual representation of information and facilitate comparison between different data points.

  • Available Resources:

    • Tabular data
  • Recommendation:
    Use tables to present data in a structured format, such as schedules, product listings, or financial data. Ensure tables are accessible and provide appropriate column headers (<th>) for screen reader users. Avoid using tables for layout purposes, as it may lead to accessibility issues and hinder responsive design.

  • Example:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>
  • Explanation:
    • The <table> element is used to create tables for displaying tabular data.
    • Table rows (<tr>), table headers (<th>), and table data (<td>) define the structure and content of the table.
    • Attributes like border can be used to control the appearance of the table (though styling with CSS is generally preferred).

These examples demonstrate the basic usage and functionality of each HTML element within the context of a web page.

Join the conversation