Science Knowings: HTML Course For Social Media

HTML Tables

HTML Tables: Presenting Data in a Structured Way

Welcome back! In this session, we're leaving the world of lists and diving into HTML tables, a powerful way to present data in a structured and organized manner.

What are HTML Tables?

<table> elements in HTML are used to create tables. They consist of rows and columns, forming a grid-like structure that allows you to display data in a tabular format.

Why Use HTML Tables?

  • Organized Data Presentation: Tables provide a clear and structured way to present large amounts of data.
  • Data Manipulation: You can sort, filter, and perform calculations on table data using JavaScript or CSS.
  • Improved Accessibility: Tables enhance accessibility for users with disabilities who rely on screen readers.

Creating HTML Tables

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>30</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Table Structure

  • Row: A horizontal unit in a table, containing data cells arranged side by side.
  • Column: A vertical unit in a table, containing data cells stacked one on top of another.

Table Headers

<th> elements represent table headers. They provide labels for columns and are typically displayed in bold or italicized text.

Table Data

<td> elements represent table data. They contain the actual data values and are typically displayed in normal text.

Table Attributes

  • border: Sets the width of the table's border.
  • cellspacing: Sets the space between cells.
  • cellpadding: Sets the space between the cell border and its content.

Table Styling

You can use CSS to style tables, including background colors, text alignment, and border styles.

Table Responsiveness

To make tables responsive, use percentage widths and the CSS display: flex property to ensure they adapt to different screen sizes.

HTML Table Examples

  • Basic Table: A simple table with headers and data.
  • Sortable Table: A table with sortable columns using JavaScript.
  • Responsive Table: A table that resizes and adjusts its columns based on screen size.

Using HTML Tables vs. CSS Grids

While both HTML tables and CSS grids can be used to display data in a tabular format, tables are better suited for presenting structured data, while grids offer more flexibility and control over layout and design.

Next Up: HTML Forms

In the next session, we'll venture into the realm of HTML forms, the gateway for collecting user input on your web pages. Follow us to learn how to create and implement forms!