Layout: Placing Text and Objects in a Table

This section explains how to effectively position text and objects within a table using HTML. Tables are a powerful tool for organizing data into rows and columns. Understanding how to control the placement of content within these cells is crucial for creating clear and professional-looking documents.

Table Structure

A table is created using the

element. Within the table, data is organized into rows () and cells ( section defines the table header, and the section contains the main table data.

Basic Table Example

Here's a simple example of a table:

for data cells and	for header cells). The

Name	Age	City
Alice	25	New York
Bob	30	London
Charlie	22	Paris

Controlling Text and Object Placement

Within each table cell (), you can control the placement of text and objects using various HTML elements and attributes. Here are some common techniques:

1. Basic Text Formatting

You can use standard HTML formatting tags within table cells to control the appearance of text. These include:

• : Makes text bold.
• : Makes text italic.
• : Creates a hyperlink.

2. Aligning Text within Cells

The align attribute can be used to align text within a table cell. Possible values are left, center, and right.

Example:

This text is centered.

This text is left-aligned.

3. Inserting Images

You can insert images into table cells using the tag. Remember to include the alt attribute for accessibility.

Example:

Some text here.

4. Using Line Breaks

To force a line break within a table cell, you can use the
tag.

Example:

This is the first line. This is the second line.

5. Using Block-Level Elements

You can use block-level elements like

(paragraph) or

to create more complex layouts within table cells. These elements will take up the full width of the cell and can be styled using CSS.

Example:

This is a paragraph inside a table cell. This is a div inside the same cell.

Best Practices

When working with tables, consider these best practices:

• Use tables for displaying tabular data, not for layout.
• Keep tables simple and avoid unnecessary complexity.
• Use appropriate alignment to improve readability.
• Ensure that tables are accessible to users with disabilities by providing appropriate alt text for images.

Exercise

Create a table with the following data:

Product	Price	Description
Laptop	$1200	Powerful laptop for work and gaming.
Mouse	$25	Ergonomic wireless mouse.
Keyboard	$75	Mechanical keyboard with RGB lighting.