Shipsar Tutorials

whenever life put's you in a tough situtation, never say why me! but, try me!

Chapter 8: Tables in HTML5

Overview

HTML tables are used to display data in a structured, tabular format. Tables are composed of rows and columns, where data is organized into cells. Tables are defined using the <table> tag, and various other tags are used to structure the content inside the table.

Basic Table Structure

A simple HTML table consists of the <table> element, which contains table rows (<tr>), and each row contains table data cells (<td>). Header cells can be defined using the <th> tag.

Syntax

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Example

<table border="1">
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$1.00</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>$0.50</td>
    <td>20</td>
  </tr>
  <tr>
    <td>Cherries</td>
    <td>$3.00</td>
    <td>15</td>
  </tr>
</table>

This will render a table with three columns: "Product," "Price," and "Quantity," and three rows of data.

Table Elements and Attributes

1. <table>

The <table> tag is used to create a table. The content inside this tag is organized into rows and columns.

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

Example

<table border="2" cellpadding="5" cellspacing="10">
  ...
</table>

2. <tr>: Table Row

The <tr> tag defines a row in the table. It contains one or more <td> (table data) or <th> (table header) elements.

Example

<tr>
  <td>Row 1, Cell 1</td>
  <td>Row 1, Cell 2</td>
</tr>

3. <th>: Table Header

The <th> tag is used to define a header cell in a table. Header cells are usually bold and centered by default.

Example

<tr>
  <th>Name</th>
  <th>Age</th>
  <th>City</th>
</tr>

4. <td>: Table Data

The <td> tag defines a standard cell in a table, containing data.

Example

<tr>
  <td>John</td>
  <td>25</td>
  <td>New York</td>
</tr>

5. <caption>: Table Caption

The <caption> tag is used to add a title or caption to a table. It is placed directly after the opening <table> tag.

Example

<table border="1">
  <caption>
    Student Grades
  </caption>
  <tr>
    <th>Student</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>John</td>
    <td>A</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>B</td>
  </tr>
</table>

6. <thead>, <tbody>, <tfoot>

These tags are used to group the header, body, and footer content of a table, respectively.

  • <thead>: Contains header rows (<tr>).
  • <tbody>: Contains the main body content of the table.
  • <tfoot>: Contains footer rows, typically for summary data.

Example

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>$1.00</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td>$0.50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1.50</td>
    </tr>
  </tfoot>
</table>

7. Table Cell Spanning

  • colspan: Merges two or more columns into a single cell.
  • rowspan: Merges two or more rows into a single cell.

Example: Using colspan

<tr>
  <td colspan="2">Merged Cell</td>
</tr>

Example: Using rowspan

<tr>
  <td rowspan="2">Merged Row</td>
  <td>Row 1, Cell 2</td>
</tr>
<tr>
  <td>Row 2, Cell 2</td>
</tr>

Accessibility in Tables

Tables should be accessible to all users, including those using screen readers. Use appropriate tags like <th> and provide scope attributes to make tables more understandable.

Example

<table border="1">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">Apples</td>
      <td>$1.00</td>
      <td>10</td>
    </tr>
    <tr>
      <td scope="row">Bananas</td>
      <td>$0.50</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

Styling Tables with CSS

Tables can be styled using CSS to enhance their appearance and readability.

Example

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th,
  td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
  }
  th {
    background-color: #f4f4f4;
  }
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Summary

Tables in HTML5 are powerful tools for displaying structured data. They provide a variety of elements and attributes to customize the display of tabular data. With the use of <thead>, <tbody>, <tfoot>, and proper styling, tables can be both functional and aesthetically pleasing.