3.2.4 Manipulating Data with Tables

This topic explains how to create and structure tables in HTML using the `<table>` tag and its related tags to display data in rows and columns.

Definition

Tables in HTML: Tables are a good way to enlist data which is visually appealing. HTML provides a 'table' tag-pair to allocate and designate data within the table.

Core Concept

An HTML table is like a spreadsheet or a grid. Just as a spreadsheet organizes data into rows and columns, an HTML table does the same on a webpage. You can use tables to display schedules, student records, product lists, or any data that fits into a grid. Each table has rows, and each row has cells. The first row is often used for headers, and the rest contain data. Tables make information easy to read and compare.

Detailed Explanation

Basic Table Structure

A table in HTML is created using the `<table>` tag. Inside the table, you define rows and cells.

Key Tags:

How Tables Work

• `<table>`: The container for the entire table.
• `<tr>`: Each row in the table is defined by a `<tr>` (table row) tag.
• `<th>`: The first row of the table is the header row and is generally used for headings. It is defined with the `<th>` tag-pair.
• `<td>`: Data is manipulated through the `<td>` tag-pair. Each `<td>` represents a single cell of data.

Example: Student Records Table

The following code creates a table showing student names, classes, and fee dues:

```html <html lang="en"> <head> <title>Table Example</title> </head> <body> <!-- Table structure --> <table> <tr> <th>Student Name</th> <th>Class</th> <th>Fee Dues</th> </tr> <tr> <td>Alia</td> <td>9</td> <td>200</td> </tr> <tr> <td>Zia</td> <td>9</td> <td>0</td> </tr> </table> </body> </html> ```

Output:

Explanation of the Code

• Line 7: `<table>` starts the table.
• Line 8: `<tr>` starts the first row (header row).
• Lines 9-11: `<th>` tags define the header cells: "Student Name", "Class", "Fee Dues".
• Line 12: `</tr>` ends the header row.
• Lines 13-17: The second row contains data cells (`<td>`) for Alia: "Alia", "9", "200".
• Lines 18-22: The third row contains data cells for Zia: "Zia", "9", "0".
• Line 23: `</table>` ends the table.

Table with Caption (Optional)

You can add a caption to describe the table:

```html <table> <caption>Student Fee Records</caption> <tr> <th>Student Name</th> <th>Class</th> <th>Fee Dues</th> </tr> ... </table> ```

Styling Tables with CSS

By default, tables have no borders. You can add borders using CSS:

```html <style> table, th, td { border: 1px solid black; } </style> ```

This will add a border around the table, header cells, and data cells.

Adding Background Color

You can also add a background color to table cells:

```html <style> th, td { background-color: aqua; } </style> ```

Table Attributes (Deprecated in HTML5)

Older HTML used attributes like `border`, `cellpadding`, and `cellspacing`. These are now deprecated in favor of CSS.

Example (Old Style): ```html <table border="1" cellpadding="5" cellspacing="0"> ```

Modern Approach: ```html <style> table { border-collapse: collapse; } table, th, td { border: 1px solid black; padding: 5px; } </style> ```

Intermediate Level

HTML tables are created with the `<table>` tag, containing rows (`<tr>`), header cells (`<th>`), and data cells (`<td>`). The first row is typically the header row using `<th>`, which is bold and centered by default. Data rows use `<td>`. Tables can have captions (`<caption>`). By default, tables have no borders; CSS is used to add borders, padding, and background colors. The structure is hierarchical: `<table>` → `<tr>` → `<th>`/`<td>`. Tables are useful for displaying structured data like schedules, records, and comparisons.

Important Points

• - `<table>`: Defines the table.
• - `<tr>`: Defines a row.
• - `<th>`: Defines a header cell (bold, centered).
• - `<td>`: Defines a data cell.
• - `<caption>`: Adds a title to the table (optional).
• - First row is usually the header row.
• - CSS is used for borders, colors, and padding.
• - Tables are for data, not layout.

Remember

• - Table: `<table>`.
• - Row: `<tr>`.
• - Header Cell: `<th>`.
• - Data Cell: `<td>`.
• - Caption: `<caption>`.
• - First Row: Header row (`<th>`).
• - Data: `<td>`.
• - CSS: For borders and colors.

Common Mistakes

• - Forgetting `</tr>` or `</td>`: Each row and cell must be closed properly.
• - Using `<td>` for headers: Use `<th>` for header cells.
• - Using tables for layout: Tables are for data, not page layout.
• - Forgetting CSS for borders: Tables have no borders by default.
• - Mixing up `<tr>` and `<td>`: `<tr>` is a row; `<td>` is a cell inside a row.

Quick Revision

HTML tables are created with the `<table>` tag and contain rows (`<tr>`), header cells (`<th>`), and data cells (`<td>`). The first row is typically the header row using `<th>`. Data rows use `<td>`. Tables can have captions (`<caption>`). CSS is used to add borders, padding, and background colors. Tables are used to display structured data like student records or schedules.

60-Second Revision

• `<table>`: Table.
• `<tr>`: Row.
• `<th>`: Header cell.
• `<td>`: Data cell.
• `<caption>`: Title (optional).
• First row = header (0).
• CSS for borders/colors.