HTML Tables

What are Tables?
Tables are used to organize and display data in rows and columns. They are especially useful for structured data like schedules, pricing, and comparisons.

Basic Table Structure

                     <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>Hamza</td> <td>22</td> <td>Pakistan</td> </tr> <tr> <td>John</td> <td>25</td> <td>USA</td> </tr> </table> 
                

Table Elements

<table> → Defines a table.
<tr> → Defines a row.
<th> → Table header (bold & centered by default).
<td> → Table data cell.
border → Adds border to the table.
colspan / rowspan → Merge cells horizontally or vertically.

Example Student Marks Table

                     <table border="1"> <tr> <th>Student</th> <th>Math</th> <th>Science</th> <th>English</th> </tr> <tr> <td>Ali</td> <td>85</td> <td>90</td> <td>88</td> </tr> <tr> <td>Sara</td> <td>92</td> <td>89</td> <td>95</td> </tr> </table> 
                

Key Points to Remember

Always use <th> for headers.
Use colspan and rowspan to merge cells.
Tables should be used for data, not for page layout.
Add CSS for better table styling instead of border attribute.

Practice Exercise

👉 Create a file named tables.html. Add:

A table with 3 columns: Name, Age, Country.
At least 3 rows of student data.
Try merging cells using colspan or rowspan.

Pro Tip 💡

Use CSS properties like border-collapse, padding, and text-align to make tables more professional.