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.