Organization tables in HTML

In web development, tables are a fundamental tool for organizing and displaying information in a structured way. In this article, we will learn how to use tables in HTML to create efficient organization of data on our pages.

The element <table>

The element <table> It is the main container of a table in HTML. Within this element, we will find different components that will allow us to define the structure and content of the table.

The tags y <th>

The label used to add a title or description to the table. This element is optional, but it is recommended to use it to provide clear context about the contents of the table. For example:

<table>
  <caption>Price table</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>T-shirt</td>
    <td>$20</td>
  </tr>
  <tr>
    <td>Hoodie</td>
    <td>$35</td>
  </tr>
</table>

In this example, we have used the tag to indicate that we are displaying a price table. Column headers are defined using labels <th>, while the table data is inside the labels <td>.

Add styles to tables

To improve the visual appearance of our tables, we can use CSS to apply custom styles. For example, we can change the background color of the table, adjust the margins and spaces between cells, among other things.

<style>
.table-styling {
  background-color: #f2f2f2;
  border-collapse: collapse;
  margin: 20px;
  padding: 10px;
}

.table-styling th, .table-styling td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.table-styling th {
  background-color: #4CAF50;
  color: white;
}
</style>

<table class="table-styling">
  <caption>Product table</caption>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>T-shirt</td>
    <td>$20</td>
  </tr>
  <tr>
    <td>Hoodie</td>
    <td>$35</td>
  </tr>
</table>

In this example, we have created a CSS class called "table-styling" and applied it to the element <table>. This allows us to define specific styles for our tables.

Frequently asked questions

How can I center a table on the page?

To center a table on the page, you can wrap it in an element <div> and use CSS to center that container.

<div style="text-align: center;">
  <table>
    ...
  </table>
</div>

What is the best way to add borders to table cells?

To add borders to table cells, you can use CSS and the property border. For example, you can apply a border to all cells using the following style:

.table-styling td { border: 1px solid black; }

This style will apply a 1 pixel thick, black border to all cells in the table.

How can I make a table responsive?

To make a table responsive, you can use CSS to adjust the size of the cells and allow the table to adapt to the size of the screen. You can use media queries and flexible styles to achieve this effect.

.table-styling { width: 100%; } .table-styling td, .table-styling th { width: 50%; }

In this example, the table will fit 100% of its container width and the cells will fit 50% of the available width.

Conclusion

Tables are a great tool to organize and display information in a structured way on our web pages. Using the element <table> and the associated tags, we can create custom tables and apply styles to adapt them to our needs. Remember to use the label to provide context and use CSS to improve the visual appearance of our tables.

If you want to learn more about web development and other related topics, visit our website at https://nelkodev.com. You can also contact us through our contact page at https://nelkodev.com/contacto or consult our portfolio at https://nelkodev.com/portfolio/.