3.3.1 Decorating Tables with CSS

This topic explains how to use CSS to style HTML tables, including adding borders and background colors to make tables visually appealing.

Definition

Decorating Tables with CSS: By using CSS, you can provide borders in a table as well as background colors. For this purpose, we initially need to state the style tag-pair just before the start of the table, and later inside the block, we need to set which style to opt for and where to apply it.

Core Concept

Decorating tables with CSS is like framing a picture. A table without CSS is just a grid of text with no visual boundaries—like a picture without a frame. CSS adds borders to define the edges of the table and its cells, and background colors to highlight different sections. This makes the table easier to read, more organized, and visually appealing. Just as a frame draws attention to a picture, CSS styling draws attention to the data in your table.

Detailed Explanation

Adding Borders to a Table

By using CSS, you can provide borders in a table. For this purpose, we initially need to state the style tag-pair just before the start of the table, and later inside the block, we need to set which style to opt for and where to apply it.

Example: Applying Borders to a Table

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

• `table, th, td` — Selects the table, table header cells, and table data cells.
• `border: 1px solid black;` — Applies a 1-pixel solid black border to each selected element.
• This creates a border around the table and around every cell.

Output: The table will have a 1-pixel solid black border around the table and all its cells.

Adding Background Color to a Table

We may add a background color of the table as well by adding the following code in the style tag-pair.

Example: Providing Table with a Background Color

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

• `th, td` — Selects the header cells and data cells.
• `background-color: aqua;` — Applies an aqua (light blue) background to each selected cell.

Output: The header cells and data cells will have an aqua background color, making the table more visually appealing.

Combining Borders and Background Color

You can combine both styles to create a fully decorated table.

Example: Complete Table Styling

```html <html lang="en"> <head> <title>Table Example</title> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { background-color: aqua; padding: 10px; } </style> </head> <body> <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> ```

• Black borders around the table and each cell
• Aqua background color for all cells
• Collapsed borders (single line between cells)
• 10 pixels of padding inside each cell

Frequently Used Color Names

Intermediate Level

CSS is used to decorate HTML tables with borders and background colors. To add borders, use the `border` property on `table`, `th`, and `td` selectors. To add background color, use `background-color` on `th` and `td`. The `border-collapse: collapse;` property merges adjacent borders into a single line. Padding can be added with `padding: 10px;` to create space inside cells. The `<style>` tag-pair is placed in the `<head>` section, or CSS can be applied inline or externally. Common color names include aqua, black, blue, green, red, white, yellow, etc.

Important Points

• - CSS decorates tables with borders and background colors.
• - Use `border` property to add borders.
• - Use `background-color` to add background colors.
• - Select `table, th, td` to target all table elements.
• - `border-collapse: collapse;` merges borders.
• - `padding` adds space inside cells.
• - Style tag-pair placed in `<head>` section.
• - Common color names: aqua, black, blue, green, red, white, yellow.

Remember

• - Border: `border: 1px solid black;`.
• - Background: `background-color: aqua;`.
• - Selectors: `table, th, td`.
• - Collapse: `border-collapse: collapse;`.
• - Padding: `padding: 10px;`.
• - Style Tag: In `<head>` section.
• - Colors: aqua, black, blue, green, red, white, yellow.

Common Mistakes

• - Forgetting units: `1px` needs the `px` unit.
• - Not using `border-collapse`: Without it, borders appear double.
• - Applying background to wrong selector: Use `th, td` for cells, `table` for the whole table.
• - Forgetting the `<style>` tag: CSS rules must be inside `<style>` or an external file.
• - Using deprecated HTML attributes: Use CSS instead of `border="1"` or `bgcolor="aqua"`.

Quick Revision

CSS decorates HTML tables with borders and background colors. Use the `border` property on `table`, `th`, and `td` selectors to add borders. Use `background-color` on `th` and `td` to add background colors. `border-collapse: collapse;` merges borders into a single line. `padding` adds space inside cells. The `<style>` tag-pair is placed in the `<head>` section. Common color names include aqua, black, blue, green, red, white, and yellow.

60-Second Revision

• Border: `border: 1px solid black;` on `table, th, td`.
• Background: `background-color: aqua;` on `th, td`.
• Collapse: `border-collapse: collapse;`.
• Padding: `padding: 10px;`.
• Style Tag: In `<head>`.
• Colors: aqua, black, blue, green, red, white, yellow.