HTML Tables
HTML tables are used to display data in rows and columns. They are commonly used for showing structured information such as schedules, prices, reports, and comparison data.
Basic HTML Table
An HTML table is created using the <table> element.
Each row is defined with <tr>,
and each cell is defined with <td>.
| Name | Age | City |
| Ali | 22 | Lahore |
Table Headers
The <th> element is used to define table header cells.
Table headers are bold and centered by default.
| Name | Age | City |
|---|---|---|
| Ahmed | 25 | Karachi |
Table Caption
The <caption> tag is used to add a title or description to a table.
| Name | Marks |
|---|---|
| Sara | 88 |
Rowspan and Colspan
The rowspan and colspan attributes allow cells
to span multiple rows or columns.
| Name | Contact | |
|---|---|---|
| Usman | Phone | |
Table Border
Borders can be added using the border attribute
or preferably using CSS.
| Product | Price |
|---|---|
| Book | $10 |
Best Practices for Tables
- Use tables only for tabular data, not for layout
- Always use table headers for better accessibility
- Add captions to explain table content
- Style tables using CSS instead of HTML attributes
Common Mistakes with Tables
- Using tables for page layout
- Missing
<th>elements - Overcomplicated rowspan and colspan usage
- Poor readability due to lack of styling