Learn with us

HTML tables are used to organize and display data in a structured format with rows and columns. They provide a way to present tabular data, such as data sets, pricing information, schedules, and more. Here’s an example of how to create a basic HTML table:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
  <tr>
    <td>Data 4</td>
    <td>Data 5</td>
    <td>Data 6</td>
  </tr>
</table>

Let’s break down the components of the table structure:

Example

• <table>: This is the container element for the entire table.
• <tr>: This stands for table row and represents a row in the table.
• <th>: This stands for table header cell and represents a header cell in the table. By default, header cells are bold and centered.
• <td>: This stands for table data cell and represents a regular data cell in the table.

In the example above:

• The first <tr> represents the header row of the table. Each <th> element defines a header cell.
• The subsequent <tr> elements represent data rows. Each <td> element defines a data cell.

You can add more rows and columns to the table by adding more <tr>, <th>, or <td> elements as needed.

You can also customize the appearance of the table using CSS styles, such as applying borders, setting background colors, changing fonts, and more. Additionally, you can use CSS classes and IDs to target specific table cells or apply styling to different sections of the table.

HTML tables provide a flexible and powerful way to structure and present data. By using various table elements and attributes, you can create tables of different sizes and complexity to meet your specific needs.