If you've used Salesforce, you've already seen hundreds of tables. List views, related lists, reports - they're all tables. From my experience, you can do about half of the UI work in Salesforce just with tables, so this is one of the more important tags to understand.
A table is built row by row. You don't define columns directly - they emerge from how many cells you put in each row. Here are the four tags you need:
<table> - the container that wraps the entire table.
<tr> - a table row. Every row of data gets its own <tr>.
<th> - a header cell. These go in the first row and are bold by default.
<td> - a regular data cell. This is where your actual data goes.
Let's build a simple Opportunity table. First, the header row with column names:
<table border="1">
<tr>
<th>Opportunity</th>
<th>Stage</th>
<th>Amount</th>
</tr>
</table>We have one row (<tr>) with three header cells (<th>). The border="1" attribute makes the grid lines visible - without it, the table has no borders at all, which can be confusing when you're first building it.
Now we add data rows. Each row uses <td> instead of <th>:
<table border="1">
<tr>
<th>Opportunity</th>
<th>Stage</th>
<th>Amount</th>
</tr>
<tr>
<td>Acme Corp Deal</td>
<td>Prospecting</td>
<td>$50,000</td>
</tr>
<tr>
<td>GlobalTech Expansion</td>
<td>Closed Won</td>
<td>$120,000</td>
</tr>
</table>That's it - a working table. The number of <th> and <td> cells in each row should match. Three headers means three data cells per row.
If you try this in a browser right now, it looks nothing like a Salesforce list view. No padding, no colors, no hover effects. That's because HTML only defines the structure - making it look good is CSS's job. When we get to CSS, one of the first things we'll do is style a table to look like a real Salesforce list view.