HTML Tables Overview

Introducing Tables

• An HTML table is a grid of cells.
• The <table> element is used to create a table.
• Tables can display various content like calendars, financial data, lists, images, text, links, and other tables.

The Death of Marat Table

• Each HTML table contains rows (<tr>) and cells (<td>).
• The <td> elements go inside the <tr> tags.
• Content goes inside the <td> tags.

Why Using Table Headings is Important

• Using the <th> element for table headings:
  • Makes the content within the element bold.
  • Helps with accessibility (screen readers).
  • Provides semantic information about the row being a header row.

Spanning Rows and Columns

• To cover multiple columns or rows with a single cell you can use the colspan and rowspan attributes.

Table Layout Considerations

• Using tables for page layout was popular in the 1990s, but is now discouraged for many reasons:
  • It can lead to "table bloat," where the HTML code becomes unnecessarily complex.
  • It is not semantic, meaning the markup does not accurately reflect the content's structure.
  • This can often result in larger HTML files.
  • Browsers can handle table layouts differently, leading to inconsistencies.

Additional Table Tags

• The following table tags are used for various purposes:
  • <caption> is used to define a caption for the table.
  • <thead> defines the table header.
  • <tbody> defines the table body.
  • <tfoot> defines the table footer.

Styling Tables

• You can style tables with CSS.
• Although legacy HTML attributes for styling tables still exist, they are deprecated:
  • width for setting cell width.
  • height for setting cell height.
  • cellspacing to add space between cells.
  • cellpadding to add space between cell content and its border.
  • bgcolor to change the background color of any table element.
  • background for adding a background image.
  • align for aligning the table in relation to its container.

Styling Tables with Borders

• CSS makes it easy to create borders around tables and individual table cells.

Styling Tables with Padding and Spacing

• You have full control over padding and spacing within tables and table cells using CSS.

Nth-Child Selectors

• CSS nth-child selectors enable interesting styling tricks for tables, such as hover effects and zebra stripe patterns.

This quiz covers the fundamentals of HTML tables, including how to create a table, the importance of table headings, and the use of attributes like colspan and rowspan. Learn about the structure of tables and best practices for accessibility and layout.