HTML Tables

HTML tables are used to display data in rows and columns, similar to a spreadsheet. They are a powerful tool for presenting complex data in an organized and easy-to-read format.

To create a table in HTML, use the <table> element to define the table and the <tr> element to define each row. Within each row, use the <td> element to define each cell.

Below is a basic example of an HTML table:

<table>
  <tr>
    <th>Product Name</th>
    <th>Price</th>
    <th>Availability</th>
  </tr>
  <tr>
    <td>Product 1</td>
    <td>$10.00</td>
    <td>In Stock</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>$20.00</td>
    <td>Out of Stock</td>
  </tr>
  <tr>
    <td>Product 3</td>
    <td>$30.00</td>
    <td>In Stock</td>
  </tr>
</table>

In this example, the <table> element is used to define the table, and each row is defined with the <tr> element. The first row is a header row, and the <th> element is used to define the header cells. The remaining rows are data rows, and the <td> element is used to define the data cells.

You can also add borders, padding, and other styles to your table using CSS. Here is an example of how to add a border to a table:

<style>
  table {
    border: 1px solid black;
  }
  th, td {
    padding: 10px;
    border: 1px solid black;
  }
</style>

This CSS code adds a 1-pixel black border around the entire table, and a 1-pixel black border around each cell. It also adds 10 pixels of padding to each cell to create some space between the content and the cell border.

HTML tables are a versatile and powerful tool for displaying data in a structured and organized format. With a little bit of CSS, you can create tables that are both functional and visually appealing.