HTML Tables and their structure

What are HTML Tables?

No, they are not tables you eat on, but rather a way to display data in a structured format on a web page. Have you used the most popular spreadsheet software MS Excel? If so, you are already familiar with the concept of tables.

Tables are used to present data in rows and columns, making it easier to read and understand. In HTML, tables are created using the <table> tag, and they consist of several other tags to define the structure of the table.

Basic Structure of an HTML Table

The basic structure of an HTML table includes the following tags:

• <table>: This tag defines the table itself.
• <tr>: This tag defines a table row.
• <th>: This tag defines a table header cell.
• <td>: This tag defines a table data cell.
• <caption>: This tag defines a caption for the table.
• <thead>: This tag defines the header section of the table.
• <tbody>: This tag defines the body section of the table.
• <tfoot>: This tag defines the footer section of the table.

Example of a Simple HTML Table

<table>
  <caption>
    Sample Table
  </caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

Sample Table

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6

Huh, not so table looking, right? But it is a table. Let’s break it down: The <table> is the wrapper that defines the table container. Then there are 3 major tags: <thead>, <tbody>, and <tfoot>. A very familiar structure, right? Just like the <header>, <main> and <footer> of a web page.

The <tr> (short for “table row”) tag is used to define a row in the table. Inside each row, you can have header cells defined by the <th> (table header) tag or data cells defined by the <td> (table data) tag. They are basically the same thing, but the <th> often has a different style, such as bold text or centered alignment, to indicate that it is a header cell.

Adding a Table Footer

You can also add a footer to the table using the <tfoot> tag. The footer is typically used to summarize the data in the table or provide additional information. Here is an example of a table with a footer:

<table>
  <caption>
    Sample Table with Footer
  </caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Footer Information</td>
    </tr>
  </tfoot>
</table>

Sample Table with Footer

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Footer Information

Here we added a <tfoot> section to the table, which contains a single row with a single cell that spans all three columns using the colspan attribute. This is useful for providing summary information or notes about the table data.

Styling Tables

You might’ve seen that the tables above are not very visually appealing. But there is a way to style the table to make it look better. In fact, there is way to style almost everything in HTML, and tables are no exception. You can use CSS to style the table, such as changing the background color, font size, borders, and more. Here is an example of a styled table, and styling will be the topic of the next lesson:

<table style="border: 1px solid black; border-collapse: collapse; width: 100%;">
  <caption style="font-weight: bold; margin-bottom: 10px;">
    Styled Sample Table
  </caption>
  <thead>
    <tr>
      <th
        style="border: 1px solid black; padding: 8px; text-align: left; background-color: #f2f2f2;"
      >
        Header 1
      </th>
      <th
        style="border: 1px solid black; padding: 8px; text-align: left; background-color: #f2f2f2;"
      >
        Header 2
      </th>
      <th
        style="border: 1px solid black; padding: 8px; text-align: left; background-color: #f2f2f2;"
      >
        Header 3
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="border: 1px solid black; padding: 8px; text-align: left;">
        Data 1
      </td>
      <td style="border: 1px solid black; padding: 8px; text-align: left;">
        Data 2
      </td>
      <td style="border: 1px solid black; padding: 8px; text-align: left;">
        Data 3
      </td>
    </tr>
    <tr>
      <td style="border: 1px solid black; padding: 8px; text-align: left;">
        Data 4
      </td>
      <td style="border: 1px solid black; padding: 8px; text-align: left;">
        Data 5
      </td>
      <td style="border: 1px solid black; padding: 8px; text-align: left;">
        Data 6
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td
        colspan="3"
        style="border: 1px solid black; padding: 8px; text-align: left;"
      >
        Footer Information
      </td>
    </tr>
  </tfoot>
</table>

Styled Sample Table

Header 1	Header 2	Header 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Footer Information

Beautiful! Sorry if this was too much… You can see how the table is now more visually appealing with borders, padding, and background colors. You can customize the styles further to match your website’s design.

Conclusion

Tables are a powerful way to present data in a structured format on a web page. They consist of rows and columns, with header cells and data cells. You can also add captions, footers, and style the tables using CSS to make them visually appealing. In the next lesson, we will learn how to create your first HTML page and put all these concepts together.

Questions