Las lists and tables in HTML are the semantic structures that allow us to group related elements or texts sequentially.
They are one of the most powerful tools for organizing information on your website. Not only do they make the content much easier to read visually, but they also help search engines and screen readers.
HTML provides us with specific tools for one-dimensional elements (lists) and two-dimensional elements (tables).
Unordered Lists (<ul>)
Unordered lists are those where the order of the elements does not matter (like our shopping list).
To create them, we use the container tag <ul> (from Unordered List). By default, the browser will draw a small black circle (a “bullet”) in front of each element.
But the container alone does nothing. To add the individual items inside the list, we must wrap each one in a <li> tag (from List Item).
<p>Things I have to buy today:</p>
<ul>
<li>Eggs</li>
<li>Milk</li>
<li>Apples</li>
<li>Toilet paper</li>
</ul>
The only direct child allowed inside a <ul> or <ol> tag is an <li>. It is an error to insert a <div>, <h2>, or <p> floating directly inside the list container. If you need a div, you must place it inside the <li>.
Ordered Lists (<ol>)
When the sequence of the data does matter and alters the meaning of the content (like the steps of a technical tutorial, a score ranking, or a recipe book), we abandon the <ul> and use the <ol> container (Ordered List).
The browser, completely automatically, will inject ascending numbers (1., 2., 3.) in front of each <li> node. If you later add a new step in the middle of the code, the browser will instantly recalculate all subsequent numbers.
<h3>Steps to deploy the website:</h3>
<ol>
<li>Check that the code has no errors.</li>
<li>Upload the files to the remote server.</li>
<li>Configure the DNS domain.</li>
</ol>
Tables (<table>): Two-Dimensional Data
While lists solve the problem of sequential data, sometimes we need to cross-reference information in rows and columns, much like we would in an Excel spreadsheet.
For this, we have the <table> tag. The structure of a table in HTML is much stricter and more verbose than that of a list. It requires several levels of nesting so the browser can correctly draw the grid.
<table>: The master container.<thead>and<tbody>: They semantically group the table header and the body of the data, respectively.<tr>(Table Row): Defines an entire horizontal row.<th>(Table Heading): Defines a header cell. It goes inside a<tr>.<td>(Table Data): Defines a normal data cell. It goes inside a<tr>.
<table>
<thead>
<tr>
<th>User</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>admin_luis</td>
<td>Administrator</td>
<td>Active</td>
</tr>
<tr>
<td>guest_01</td>
<td>Reader</td>
<td>Banned</td>
</tr>
</tbody>
</table>
A bit of dark Web history: In the late 90s and early 2000s, before CSS Flexbox or Grid existed, developers used tables to lay out the entire structure of a web page.
This practice today is an absolute aberration. Tables should be used solely and exclusively to display tabular data (invoices, schedules, technical specifications). Never for designing the web layout.
