HTML Tables: Presenting Data in Rows and Columns

24 May, 2023

Contributors

Shruti Balasa

@shrutibalasa

Now let’s explore another important element in HTML - the table element - best way to display some data in rows and columns.

Why Tables?

Imagine you're running an eCommerce store and want to analyze all the sales data on your website. You've got different types of products, prices, and months when sales went high. It’s easier to read, understand and analyze the data if you organize that into a table.

Structure of a HTML table

The main container of a HTML table is the <table> tag - just like how we previously saw the <form> tag as a container for all form inputs. And a set of <table> tags in itself does nothing.

Inside our <table> we use <tr> (table row) to create a new row. Inside these rows, we use <td> (table data) tags for each new cell. Within that goes the data for that cell. Here’s an example:

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

If you paste the above code in your HTML file and preview in browser, you’ll see this:

Of course this looks nothing like a table. There are no lines to distinguish rows and columns.

Table Borders

The border attribute can be used to specify the border thickness which is 0 by default.

<table border="1">
  <!-- Table data here -->
</table>

Add border=”1” to the previous code and now see what it looks like:

Much better. Not the best looking table though, but that can be changed with CSS.

Table Headers

Replace the td tags with the th tags to transform the data into headers:

<table>
  <tr>
    <th>Row 1, Column 1</th>
    <th>Row 1, Column 2</th>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Notice that, adding the <th> tag has made the data bold and centered.

Merging Rows or Columns

Surely you’ve used the “merge” feature in your spreadsheets where you can merge multiple rows and / or columns. You can do that with HTML tables too.

To merge two cells across columns, we can use the colspan attribute to a td element with number of columns as its value:

<table border="1">
    <tr>
        <th>Item</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>Amount</th>
    </tr>
    <tr>
        <td>Product 1</td>
        <td>20</td>
        <td>1</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Product 2</td>
        <td>15</td>
        <td>2</td>
        <td>30</td>
    </tr>
    <tr>
        <td colspan="3">Total</td>
        <!-- The above value occupies 3 cells.
						So we need only one more cell below -->
        <td>50</td>
    </tr>
</table>

Here’s what we get:

And to merge two cells from two different rows, we use the rowspan attribute like this:

<table border="1">
    <tr>
        <th>Food</th>
        <th>Type</th>
        <th>Calories</th>
    </tr>
    <tr>
        <td rowspan="2">Apple</td>
        <td>Red</td>
        <td>52</td>
    </tr>
    <tr>
				<!-- Only two cells here because the cell from above row is merged -->
        <td>Green</td>
        <td>48</td>
    </tr>
</table>

This is what we get:

Horizontal and Vertical Alignment

You can align the cell contents horizontally using align attribute and vertically using valign attribute. You can use the values left, right and center for horizontal alignment, and the values top, bottom and middle for vertical. Here’s an example combining both these attributes:

<table border="1">
    <tr>
        <th>Employee Name</th>
        <th>Profile Picture</th>
    </tr>
    <tr>
        <td valign="middle">John Doe</td>
        <td align="center">
            <img
                src="john-doe.jpg"
                alt="John Doe's Picture"
                width="60"
                height="60"
            />
        </td>
    </tr>
    <tr>
        <td valign="middle">Jane Smith</td>
        <td align="center">
            <img
                src="jane-smith.jpg"
                alt="Jane Smith's Picture"
                width="60"
                height="60"
            />
        </td>
    </tr>
</table>

Notice how the first column data is vertically center aligned and the second column images are horizontally centered:

Nested HTML Tables

Sometimes, we may find a need to have a table within a table. Let's say we want to show the daily schedules of two different teams in our company next to each other. Here's how we can do that:

<table border="1">
  <tr>
    <td>Team A</td>
    <td>
      <table border="1">
        <!-- Team A's Schedule -->
        <tr>
          <td>9am</td>
          <td>Team Meeting</td>
        </tr>
        <tr>
          <td>11am</td>
          <td>Project Work</td>
        </tr>
        <!-- More rows here -->
      </table>
    </td>
  </tr>
  <tr>
    <td>Team B</td>
    <td>
      <table border="1">
        <!-- Team B's Schedule -->
        <tr>
          <td>10am</td>
          <td>Client Call</td>
        </tr>
        <tr>
          <td>1pm</td>
          <td>Design Review</td>
        </tr>
        <!-- More rows here -->
      </table>
    </td>
  </tr>
</table>

So you can nest a table anywhere within any <td> element in the parent table. This doesn’t look all that great without CSS, but that’s something we will talk about later.

As you can see, tables can be a bit more complex than other HTML elements, but they're necessary when the data requires a table display. Build some of your own tables and practice well before you go further.