An HTML table is used to organize data into rows and columns, creating a grid structure. Tables are ideal for displaying structured data like contact lists, schedules, and more. The <table>
element is the container for the entire table, while the <tr>
, <th>
, and <td>
elements define the rows, headers, and data cells, respectively.
Use tables when you need to display tabular data, such as financial reports, schedules, or lists of information. Tables should not be used for layout purposes, as CSS offers better methods for that.
HTML tables are made up of several key elements:
<table>
- Defines the table.<tr>
- Defines a row in the table.<th>
- Defines a header cell (bold and centered by default).<td>
- Defines a data cell (holds the table content).<table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> </tr> </table>
<!DOCTYPE html> <html> <head> <title>Table Example</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> <tr> <td>John</td> <td>25</td> <td>New York</td> </tr> <tr> <td>Sarah</td> <td>30</td> <td>Los Angeles</td> </tr> </table> </body> </html>
<th>
elements for table headers to improve accessibility.border
or CSS to add visual boundaries to your table for readability.HTML tables provide an effective way to organize and present data. Use them when displaying structured data, but avoid using them for layout purposes, as CSS offers better methods for that.
Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!