When creating a blog post or web page, you might want to include data that isn’t best represented by text. Say you want to display a breakdown of the diversity of your workforce or a summary at the end of a comparison blog post. Since this data would be too complicated or detailed to simply write out, you could use tables to organize and present it.

Tables allow the reader to see results or conclusions at a glance, rather than poring over text to find the numeric data or key points. Making a post or page more readable in this way can help attract and keep visitors on your site and ultimately improve their user experience.

That’s why we use tables across the HubSpot blogs. Below is a table at the end of SiteGround vs. HostGator Review, which summarizes the 2,000-word article in less than 200 words.

Showing HTML table in a HubSpot blog

While this table was built with a click of a button in CMS Hub, you can still create tables if you’re building your site from scratch rather than using a CMS or website builder. You’ll just need to know some basic HTML and CSS. Let’s take a closer look at the process below.

Free Intro Guide to HTML & CSS [Download Now]

How to Make a Table in HTML

To make a table in HTML, use the <table> tag. Within this table tag, you’ll place the <tr>, <th>, and <td> tags.

  • The <tr> tag defines a table row.
  • The <th> tag defines the table header. By default, any text in the <th> tag is bold and centered.
  • The <td> tag defines the table data (ie. table cells). By default, any text in the <td> tag is unbolded and left-aligned.

It’s important to note that the <td> tag can contain a range of HTML elements — not just text. Possible elements include images, numbered or bulleted lists, and other tables.

HTML Table Example

Let’s say you’re creating a table for contact information of your staff. You want to list the name, job title, and email address of each of your three employees. In that case, you’d need three columns and four rows.

That first row would be the header of your table. Here you’d label each column by wrapping the following text — Name, Job Title, and Email Address — in <th> tags. Here’s what that code would look like:

 
<tr>

<th>Name</th>

<th>Job Title</th>

<th>Email address</th>

</tr>

Then you’d create three more rows. Within these <tr> tags, you’d place <td> tags containing the name, job title, and email address of each employee. Here’s what the code would look like for the second row:

 
<tr>

<td>Anna Fitzgerald</td>

<td>Staff Writer</td>

<td>example@company.com</td>

</tr>

You’d then wrap all four rows in the <table> tag. All together, your code would look something like this:

 
<table>

<tr>

<th>Name</th>

<th>Job Title</th>

<th>Email address</th>

</tr>

<tr>

<td>Anna Fitzgerald</td>

<td>Staff Writer</td>

<td>example@company.com</td>

</tr>

<tr>

<td>John Smith</td>

<td>Marketing Manager</td>

<td>example2@company.com</td>

</tr>

<tr>

<td>Zendaya Grace</td>

<td>CEO</td>

<td>example2@company.com</td>

</tr>

</table>

Here’s how the table would look on the front end of your website:

Basic HTML table of contact information

Image Source

Notice that each column is just wide enough to fit the text, and that there are no borders separating one column or row from the next. The result is cluttered-looking and difficult to read.

Below we’ll look at some ways you can make this table easier to read.

Editing the Table Border

Tables do not have any borders by default. To add borders, use the CSS border property.

Let’s say I want to add a simple black border around my table above. Then I’d just need to add the following CSS in the head section of my HTML file or in my external stylesheet.

 
table, th, td {

border: 1px solid black;

}

The HTML in the body section of the HTML file would stay the same.

Here’s how that would look on the front end:

HTML table of contact information with uncollapsed borders

Image Source

Notice that the borders around the table, table header, and tables cells are separated from each other. To collapse them, use the CSS border-collapse property. You’d simply add this property to your CSS rule set, and set the value to “collapse.” Here’s how your CSS would look now:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

Again, the HTML stays the same.

Here’s how that would look on the front end:

HTML table of contact information with collapsed borders

Image Source

Adding borders has already helped make this table easier to read — but it still looks congested. Let’s look at how we can add more white space to this table.

Editing the Table Padding

As mentioned above, tables are only as large as their content requires by default. So your second step is to add more space around the content within the table cells. To do so, use the CSS padding property.

Since padding specifies the space between a cell’s content and its border, you only need to add padding to the table header and table data elements, not the table element itself. That means you’ll create a new CSS rule set that only uses two CSS selectors: th and td. You’d then set the CSS padding property to whatever value you want. Below I’ll set it to 10px.

Here’s what the CSS would look like:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

}

The HTML stays the same.

Here’s how that would look on the front end:

HTML table of contact information with borders and padding

Image Source

The table is looking much better now, but we can improve it by differentiating the header from the other cells. Let’s look at how below.

Editing the Table Header

To make the table header stand out, you can do something as simple as add a background color to those cells. You’d just need to use the elementor selector “th” to apply unique style properties to the header only. Below, you’ll use the same CSS as above but add a third rule set that contains the CSS background-color property. You can then set the property to a specific color value using a hex color code. Below I’ll use a hex color code for a soft shade of yellow.

Here’s the CSS:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

}

th {

background-color: #FDDF95;

}

Here’s how that would look on the front end:

HTML table of contact information with borders and padding and table header set to a yellow background color

Image Source

This table is looking better and better! Now let’s say you want to style a column instead of a row. We’ll take a look at how below.

Editing the Table Column Width

If you had to guess how to style a column, you might think you’d have to add a style attribute to the cell of each row. That’d be frustrating, right? The good news is you don’t have to.

You can use the <colgroup> tag instead. This tag specifies a group of one or more columns in a table so you can apply CSS to columns rather than cell by cell.

To create this group, you’d add the <colgroup> tag to the body section of your HTML file. Within this tag, you’d then add a <col> tag for every column in your table or every column you want to style. Here’s what the HTML code looks like:

 
<colgroup>

<col>

<col>

<col>

</colgroup>

You can then target this group of columns with CSS. Let’s say you don’t want to just specify the padding — or space between a cell’s content and its border — you also want to specify the width of each column. Then you could add another rule set to your CSS and define the width property.

Here’s how the CSS would look:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

}

th {

background-color: #FDDF95;

}

colgroup {

width: 250px;

}

Here’s how the HTML would look:

 
<table>

<colgroup>

<col>

<col>

<col>

</colgroup>

<tr>

<th>Name</th>

<th>Job Title</th>

<th>Email address</th>

</tr>

<tr>

<td>Anna Fitzgerald</td>

<td>Staff Writer</td>

<td>example@company.com</td>

</tr>

<tr>

<td>John Smith</td>

<td>Marketing Manager</td>

<td>example2@company.com</td>

</tr>

<tr>

<td>Zendaya Grace</td>

<td>CEO</td>

<td>example2@company.com</td>

</tr>

</table>

Here’s how that would look on the front end:

HTML table of contact information with specified column width

Image Source

Let’s say you’d like to change the width of only one column, like the column containing email addresses. Instead of adding internal CSS to the head section of your HTML file, you could simply add a style attribute to the third <col> tag in the body section. Within that attribute, you’d add and specify the width property. Here’s how the <colgroup> tag would look:

 
<colgroup>

<col>

<col>

<col style="width:300px">

</colgroup>

Here’s how that would look on the front end:

HTML table of contact information with one specified column width

Image Source

Once you’re mostly happy with the appearance of your table, you might be interested in changing its position on the page. One way you can do that is by changing its default alignment. Let’s look at how below.

Centering a Table In HTML

By default, elements, including the table element, will be left-aligned on the page. If you’d like to center it on the page, use the CSS margin property.

First, you’ll add a class name to the table element. In the example below, I’ll use the name “center.” Then you can use the class selector to center align the table element only. The other elements on the page will remain left aligned. Here’s how the HTML will look:

 
<table class="center">

<colgroup>

<col>

<col>

<col style="width:300px">

</colgroup>

<tr>

<th>Name</th>

<th>Job Title</th>

<th>Email address</th>

</tr>

<tr>

<td>Anna Fitzgerald</td>

<td>Staff Writer</td>

<td>example@company.com</td>

</tr>

<tr>

<td>John Smith</td>

<td>Marketing Manager</td>

<td>example2@company.com</td>

</tr>

<tr>

<td>Zendaya Grace</td>

<td>CEO</td>

<td>example2@company.com</td>

</tr>

</table>

You’ll then add another rule set to your CSS. Using the class selector “.center”, you’ll set the margin-left and margin-right properties to “auto.” That way, the table will take up whatever width is specified by CSS or by the content it contains and the browser will ensure the remaining space is split equally between the left and right margins.

Here’s how the CSS would look all together:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

}

th {

background-color: #FDDF95;

}

.center {

margin-left: auto;

margin-right: auto;

}

Here’s how that would look on the front end:

center-aligned HTML table of contact information

Image Source

Now that you’ve changed the padding, column width, alignment, and more of your table, you might be looking for a few more ways to make your table stand out on the page. One way is to change the background color of not just the header but the whole table. Let’s go over how.

Editing the Table Background Color

To change the background color of the whole table, not just the table header, then you simply define the CSS background color property for both the table header and table data elements. Here’s how your CSS would look:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

background-color: #FDDF95;

}

.center {

margin-left: auto;

margin-right: auto;

}

The HTML would stay the same.

Here’s how that would look on the front end:

HTML table of contact information with yellow background color

Image Source

If you’d like the table header and table data elements to have different background colors, then simply use the two element selectors, “th” and “td,” and set the background color property to different hex color codes or color names.

Here’s what the CSS might look like:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

}

th {

background-color: #FFB500;

}

td {

background-color: #FDDF95;

}

.center {

margin-left: auto;

margin-right: auto;

}

The HTML stays the same.

Here’s how that would look on the front end:

HTML table of contact information with orange and yellow background colors

Image Source

Another way you can make sure your table is not getting lost among other content on the page is to increase its font size. Below we’ll look at how.

HTML Table Font Size

To change the size of the font in an HTML table, use the CSS font-size property. You can use this property for the table header and table data elements. But let’s say you want to increase the font size of the table header only.

Then your CSS would look like this:

 
table, th, td {

border: 1px solid black;

border-collapse: collapse;

}

th, td {

padding: 10px;

}

th {

background-color: #FFB500;

font-size: 20px;

}

td {

background-color: #FDDF95;

}

.center {

margin-left: auto;

margin-right: auto;

}

Your HTML would stay the same.

Here’s how that would look on the front end:

HTML table of contact information with background color and enlarged header font

Image Source

Making Tables in HTML

If you want to share large amounts of data on your website, then use tables to present this data in a way that’s easy for visitors to read and understand. Any of the steps described above can help you add and customize tables to your unique website. You’ll just need to be familiar with some HTML and CSS.

If you’d rather not code tables from scratch, then you can use the Bootstrap CSS framework. Check out A Walkthrough of the Bootstrap CSS Table Element to learn how.

New Call-to-action

 css introduction

Originally published Sep 24, 2020 7:00:00 AM, updated September 24 2020

Topics:

HTML