Lesson 2.4: Tables – Rows, Columns, Attributes

Tables in HTML allow you to organize data into rows and columns, making it easy to display structured information such as schedules, price lists, or comparison charts.

📌 1. Basic Structure of a Table

The <table> element defines a table. Inside it, you use:

• <tr> → Table Row

• <td> → Table Data (cell)

• <th> → Table Header (bold and centered by default)

Example:

📌 2. Table Rows and Columns

• Each <tr> creates a new row.

• Inside each row, <td> or <th> create columns.

• The number of <td> in each row defines how many columns the table has.

👉 Example with 2 rows and 3 columns:

📌 3. Important Table Attributes

Though modern practice uses CSS for styling, some attributes are still useful:

• border → adds border to the table.

• cellpadding → space inside each cell.

• cellspacing → space between cells.

• width → sets width of the table.

• align → aligns the table.

👉 Example:

📌 4. Merging Rows and Columns

You can merge cells using:

• colspan → Merge columns

• rowspan → Merge rows

👉 Example:

📌 5. Caption for Tables

You can add a title using <caption> tag.

👉 Example:

✅ Summary of Key Points

• <table> creates a table.

• <tr> defines rows.

• <td> defines cells.

• <th> defines header cells.

• Attributes like border, cellpadding, cellspacing, colspan, and rowspan enhance tables.

• Use <caption> to give tables a title.