3.2.2 Tables in HTML

Introduction

An easy approach to organize information on webpages is with tables. HTML provides the option of tables for viewing data. Tables arrange data into rows and columns, making it easy to compare and understand information.

Definition

An HTML table is a structured way to display data in rows and columns on a web page. It is defined using the `<table>` tag and contains rows (`<tr>`), header cells (`<th>`), and data cells (`<td>`).

Main Idea

Tables are used to organize and present data in a grid format. Each table consists of:

• Rows (horizontal)
• Columns (vertical)
• Cells (intersection of row and column)

The `<table>` tag creates the table, `<tr>` creates rows, `<th>` creates header cells, and `<td>` creates data cells.

Core Concept

Detailed Explanation

Basic Table Structure

```html <table> <tr> <th>Patient Name</th> <th>Date</th> <th>Time</th> </tr> <tr> <td>Adil</td> <td>2024-05-10</td> <td>10:00 AM</td> </tr> <tr> <td>Zaki</td> <td>2024-05-15</td> <td>2:00 PM</td> </tr> </table> ```

Key Table Tags

• The `<th>` tag refers to a table's header cell. Contents in `<th>` cells are in bold and centered.
• The `<td>` tag applies to ordinary table cells. It contains the real data.
• The `<caption>` tag puts a heading or description to the table.
• The `<thead>`, `<tbody>`, `<tfoot>` tags divide rows into parts, such as headers, major data, and summary.
• The `colspan`/`rowspan` options allow cells to span several columns or rows, which is convenient for complicated layouts.

Example: Doctor's Visit Appointments Table

A sample website with a title is created such that a table in HTML is created to display an appointment list. The head section arranges the patient name, date, time, doctor, and reason for visit as labels on the top row of the table.

The actual information about appointments is in the `tbody` section. There are two sample appointments available right now, but we may add more. A `tr` tag is used for each appointment in a row, and a `td` tag is used for each piece of information inside an appointment.

```html <!DOCTYPE html> <html lang="en"> <head> <title>Doctor's Visit Appointments</title> </head> <body> <h1>Doctor's Visit Appointments</h1> <table> <thead> <tr> <th>Patient Name</th> <th>Date</th> <th>Time</th> <th>Doctor</th> <th>Reason for Visit</th> </tr> </thead> <tbody> <tr> <td>Adil</td> <td>2024-05-10</td> <td>10:00 AM</td> <td>Dr. Shams</td> <td>Follow-up</td> </tr> <tr> <td>Zaki</td> <td>2024-05-15</td> <td>2:00 PM</td> <td>Dr. Qamar</td> <td>Check-up</td> </tr> </tbody> </table> </body> </html> ```

Styling Tables with CSS

Though all information is visible on the website in the table, it is quite congested and hard to read. So, to tidy up and expand the table for better readability, we need to know about CSS properties.

border-collapse: The link between the borders of neighboring table cells is determined by `border-collapse`. The table becomes neater and more compact when the borders are set to "collapse" which causes them to combine into a single line. On the other hand, when the option is set to "separate," the edges stay distinct and the image seems larger.

padding: Padding is the distance between a cell's border and its content. Padding can be placed to the cell's four sides or specifically to its left, right, bottom, or top.

cellspacing: The space among the borders of neighboring table cells is known as 'cell spacing'. By adjusting the distance between cells, you may make the table appear lengthened.

text-align: Causes the left side of the cell text to align.

background-color: Sets the background color of the table or specific cells.

Example: Styled Table

```html <!DOCTYPE html> <html lang="en"> <head> <title>Doctor's Visit Appointments</title> <style> table { border: 2px solid lightgray; border-collapse: collapse; } th, td { padding: 10px; text-align: left; } th { background-color: lightblue; color: white; } tr:nth-child(odd) { background-color: gray; } </style> </head> <body> <h1>Doctor's Visit Appointments</h1> <table> <caption>List of upcoming appointments</caption> <thead> <tr> <th>Patient Name</th> <th>Date</th> <th>Time</th> <th>Doctor</th> <th>Reason for Visit</th> </tr> </thead> <tbody> <tr> <td>Adil</td> <td>2024-05-10</td> <td>10:00 AM</td> <td>Dr. Shams</td> <td>Follow-up</td> </tr> <tr> <td>Zaki</td> <td>2024-05-15</td> <td>2:00 PM</td> <td>Dr. Qamar</td> <td>Check-up</td> </tr> </tbody> </table> </body> </html> ```

Explanation:

• `border-collapse` removes additional lines between cells to make the arrangement look more organized.
• `padding` adds some space around each cell so that the cell's text becomes easier to read.
• `text-align` causes the left side of the cell text to align.
• To help the table headers be prominent, a gray background is provided.
• `nth-child(odd)` gives every alternate row a different background color.

Intermediate Level

At the intermediate level, you should understand the structure and styling of tables.

Structure:

• 0 = container.
• 0 = header section.
• 0 = body section.
• 0 = footer section.
• 0 = row.
• 0 = header cell.
• 0 = data cell.
• 0 = table title.

Styling:

• `border-collapse: collapse` = single-line borders.
• `padding` = space inside cells.
• 0 = align text.
• 0 = cell background.
• 0 = alternate row colors.

Important Points

• - Tables organize data in rows and columns.
• - Tags: `<table>`, `<tr>`, `<th>`, `<td>`, `<caption>`, `<thead>`, `<tbody>`, `<tfoot>`.
• - `<th>` = header cell (bold, centered).
• - 0 = data cell.
• - `border-collapse` controls border style.
• - `padding` adds space inside cells.
• - `cellspacing` adds space between cells.
• - `nth-child` gives alternate row colors.
• - `colspan`/`rowspan` merge cells.

Remember

• - Table = rows + columns.
• - 0 = container.
• - 0 = row.
• - 0 = header.
• - 0 = data.
• - 0 = title.
• - 0 = single line.
• - 0 = space inside.
• - 0 = space between.
• - 0 = alternate colors.

Common Mistakes

• - Forgetting to close `<tr>` and `<td>` tags.
• - Using `<td>` for headers instead of `<th>`.
• - Forgetting `border-collapse` and getting double borders.
• - Confusing `padding` (inside cell) with `cellspacing` (between cells).
• - Using tables for layout instead of data.
• - Not using `<caption>` for accessibility.
• - Forgetting that `<th>` is bold and centered by default.

Quick Revision

• HTML tables organize data in rows and columns.
• Tags: `<table>`, `<tr>`, `<th>`, `<td>`, `<caption>`, `<thead>`, `<tbody>`, `<tfoot>`.
• `<th>` = header (bold, centered); `<td>` = data.
• `border-collapse` = single-line borders.
• `padding` = space inside cells; `cellspacing` = space between cells.
• 0 = alternate row colors.
• 0/1 = merge cells.

60-Second Revision

• Table = rows + columns.
• `<table>` = container; `<tr>` = row; `<th>` = header; `<td>` = data.
• 0 = title.
• 0 = single line.
• 0 = inside; 1 = between.
• 0 = alternate colors.
• Warning: Use tables for data, not for layout.