Learn about HTML table with example

HTML table is a structured grid of rows and columns used to display tabular data in a structured and organized format. HTML tables consist of the following components:

• <table>: The <table> element is used to define the beginning and end of the table.
• <tr>: The <tr> (table row) element is used to define a row within the table.
• <td>: The <td> (table data) element is used to define individual cells within a row, containing the actual data.
• <th>: The <th> (table header) element is used to define header cells, typically used in the first row or column of the table to provide column or row headers.

Here's an example of a basic HTML table structure:

<table>

  <tr>

    <th>Header 1</th>

    <th>Header 2</th>

  </tr>

  <tr>

    <td>Data 1</td>

    <td>Data 2</td>

  </tr>

  <tr>

    <td>Data 3</td>

    <td>Data 4</td>

  </tr>

</table>

In the example above, we have a table with two columns and three rows. The first row (<tr>) contains the table headers (<th>), and the subsequent rows contain the table data (<td>).

You can add more rows (<tr>) and cells (<td>) as needed to represent your data. Additionally, you can use the <thead>, <tbody>, and <tfoot> elements to group the header, body, and footer sections of the table, respectively, for better structure and styling.

Here's an example of using the table sections:

<table>

  <thead>

    <tr>

      <th>Header 1</th>

      <th>Header 2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>Data 1</td>

      <td>Data 2</td>

    </tr>

    <tr>

      <td>Data 3</td>

      <td>Data 4</td>

    </tr>

  </tbody>

  <tfoot>

    <tr>

      <td colspan="2">Footer Text</td>

    </tr>

  </tfoot>

</table>

 

In this updated example, the table is divided into sections: <thead> for the table headers, <tbody> for the table body (data rows), and <tfoot> for the table footer.

To control the layout and appearance of the table, you can use CSS to style the table, headers, cells, and apply various formatting and styling options.

HTML tables are commonly used for displaying tabular data, such as financial data, schedules, product listings, and more.

HTML tables have several properties and attributes that can be used to control their structure, appearance, and behavior. Here are some commonly used properties and attributes for HTML tables:

1. border: The border attribute specifies the width of the table's border in pixels. For example, border="1" would create a table with a border width of 1 pixel.

2. cellpadding and cellspacing: The cellpadding attribute specifies the amount of space (in pixels) between the content of a table cell and its border, while cellspacing specifies the space between adjacent cells. For example, cellpadding="5" and cellspacing="3" would add 5 pixels of padding and 3 pixels of spacing, respectively.

3. colspan and rowspan: The colspan attribute is used to specify the number of columns a cell should span, while rowspan specifies the number of rows it should span. This allows cells to occupy multiple columns or rows. For example, colspan="2" would make a cell span two columns.

4. align and valign: The align attribute controls the horizontal alignment of the content within a cell and can be set to values like "left", "center", or "right". The valign attribute controls the vertical alignment and can be set to values like "top", "middle", or "bottom".

5. <caption>: The <caption> element is used to provide a title or caption for the table. It is typically placed as the first child of the <table> element.

6. <thead>, <tbody>, and <tfoot>: These elements help organize the structure of the table. <thead> represents the table header section, <tbody> represents the table body section (the main content), and <tfoot> represents the table footer section.

7. CSS Styling: Tables can be further customized and styled using CSS properties like background-color, color, font-size, border-collapse, and many more. CSS provides extensive control over the appearance and layout of tables.