Mastering Tables in HTML: Structure and Styles Step by Step

Creating tables in HTML is an essential skill that every web developer must master. Tables are very useful for displaying data in a structured and organized way on a web page. In this guide, you will learn step by step how to build a table in HTML and how to style it so that it looks professional and is easy to read.

Understanding the Basic Structure of Tables in HTML

To begin, let's look at the fundamental elements that make up an HTML table. A standard table is created with the element <table>, within which you can have multiple rows represented by the element <tr>. In turn, within the rows, you can place cells that can be headers (<th>) or common cells (<td>).

Creating a Simple HTML Table

Let's build, step by step, a basic HTML table:

1. Start with the label <table>. This tag defines the start and end of your table.

<table>
</table>

1. Add a row using <tr>. This label is a container for cells.

<table>
  <tr>
  </tr>
</table>

1. Inside the row, add a header cell with <th>. This will create a highlighted cell that usually contains the column titles.

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
</table>

1. Add more rows with their respective common cells using <td>.

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Fact 1</td>
    <td>Fact 2</td>
  </tr>
  <tr>
    <td>Fact 3</td>
    <td>Fact 4</td>
  </tr>
</table>

Improving Presentation: CSS Styles for HTML Tables

Now that you have a basic structure, it's time to make your table stand out visually. We are going to incorporate CSS to style our table.

Styles for Tables

To start with the styles, the first thing is to select the element <table> in your CSS file.

table { width: 100%; border-collapse: collapse; }

The property border-collapse: collapse; ensures that there is no space between the edges of the cells.

Styles for Rows and Cells

To style the cells and rows of your table, you will need to select the elements <tr>, <th>, and <td>.

th, td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } tr:nth-child(even) { background-color: #f2f2f2; }

With this CSS, all your cells will have a padding (padding) and left-aligned text. The pseudo-class :nth-child(even) It is used to color the rows interleaved, improving the readability of the table.

Header Styles

Your table headers can stand out even more with a specific style.

th { background-color: #4CAF50; colour: white; }

This will make the headers have a green background and white text.

Responsive Design and Accessibility

In the age of device diversity, it's crucial that your table looks good on any screen size. We also need to make sure the table is accessible.

Making your Table Responsive

You can make your table responsive with some additional CSS and the use of the tag <div> with the "table-responsive" class that wraps your <table>.

<div class="table-responsive">
  <table>
    <!-- El contenido de tu tabla va aquí -->
  </table>
</div>

.table-responsive { overflow-x: self; }

Improving Accessibility

To make the tables accessible, use the attribute scope in your <th> to define whether they relate to columns or rows.

<th scope="col">Column Header</th>
<th scope="row">Row Header</th>

The attribute scope helps screen readers understand the relationship between cell headers and cell data.

Conclusion and Practice

You just learned how to create and style a table in HTML from scratch. The next step is to practice what you have learned. Create your own tables, play with the layout and styles, and you'll soon feel comfortable working with this fundamental element of web design.

If you have any questions or want to continue learning, you can visit NelkoDev or contact me directly through this link. There is no better way to consolidate new knowledge than by applying it in real projects, so I encourage you to start building your own boards right now.