Tables

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.

How Tables Are Built

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.

Building a Table Step by Step

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.

Why It Looks Ugly

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.