HTML Tutorial

HTML TABLES

HTML Tables

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.

When to Use Tables?

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.

Table Elements

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).

Syntax

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Example

<!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>

Best Practices

Always use <th> elements for table headers to improve accessibility.
Ensure each row within the table is properly organized and structured.
Use border or CSS to add visual boundaries to your table for readability.
Ensure tables are responsive when viewed on smaller screens, possibly using CSS media queries.

Conclusion

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.

🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review

Topics