HTML Tables: how to create and style tables with HTML

Tables are commonly used in HTML to organize and display data. Their uses are wide-ranging, and they help to make it easier to pass information to a webpage’s users.

In today’s tutorial, we will cover the basics of tables in HTML, include how to use required tags and CSS styles in your tables.

This guide at a glance:

• Introduction to HTML tables
• Table captions and headings
• Summarizing tables with a footer
• Adding borders to a table cell
• Span multiple rows and columns
• Styling tables with CSS
• HTML Sample Code
• What to learn next

Basics of HTML tables

A table is a structured set of data arranged in rows and columns. Tables are widely used for data presentation and data analysis, and they are used frequently in books, scientific journals, and websites.

HTML, which stands for HyperText Markup Language, is a markup language used to instruct web browsers on how they should display web pages. The latest iteration of HTML (HTML5) comes with robust support for displaying data using complex or simple tables.

When we define a table element, we use the following tags:

• <table>: defines an HTML table
• <tr>: defines each table row
• <th>: defines each table row
• <th>: defines each table header
• <td>: defines each table data or cell

Note: all <th> elements are bold and centered by default, and the <td> text elements are left-aligned.

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Mark</td>
    <td>Ruffallo</td>
    <td>54</td>
  </tr>
  <tr>
    <td>Reese</td>
    <td>Witherspoon</td>
    <td>48</td>
  </tr>
</table>

There are many other HTML elements that can be used to customize the appearance and structure of tables. These include <thead>, <tbody>, <tfoot>, which we will discuss later.

It is important to note that tables should be functional. That means, the data or information displayed in your table should be easy to read and understand. If you do not have an idea how your table should be formatted, you can make a sketch on paper. This will help you to visualize and organize the table before you write code.

Table captions and headings

Most tables need some sort of text that describes the purpose of the table. We can use the <caption> element to solve this problem. It is optional. But since it displays the caption (or title) of the table, it helps with ease of use and accessibility.

When in use, it comes right after the <table> opening tag and is followed by a matching closing tag:

<caption>Neonates Immunization Table</caption>

It is also common to have table cells that describe groups of data within a table. The <thead> element defines a set of rows which represent the head of columns of the table. It is an optional element and can come either right after the <table> tag or the </caption> tag when available.

The <th> tag marks a cell as a table header, and it is usually at the start of a row or column. <th> tags are always used within a <tr> tag and they with some default styling to help them stand out.

<thead>
   <tr>
     <th scope="col">Name</th>
     <th scope="col">Sex</th>
     <th scope="col">Weight(kg)</th>
     <th scope="col">Immunization Doses</th>
   </tr>
</thead>

Summarizing tables with a footer

The <tfoot> element is an optional element that defines a set of rows summarizing the columns of the table layout. It usually comes after the <tbody> tag.

<tfoot>
    <th>Mean Weight (kg)</th>
    <td>2.9</td>
</tfoot>

Adding borders to a table cell

In the past, borders could be added to your HTML Table using the border attribute, which takes in a number that is automatically in pixels. This attribute can only be added to the <table> tag and it gives the table and every cell a border.

<table border='1'>
   <tr>
       <th >Jerry Holmes</th>
       <td>M</td>
       <td>5</td>
       <td>0</td>
       <td>3.5</td>
   </tr>
</table>

This behavior was deprecated in HTML5 in favor of the CSS border property. With this change, one can now add borders across the table or to individual elements. If you don’t want your cells to have separate borders, you should set the border-collapse property to collapse. Otherwise, adjacent cells would have distinct borders.

table {
   border-collapse: collapse;
}
td, th {
   border: 1px solid rgba(0, 0, 0, 0.5);
}

In the next section, I would show you how to create tables with a complex layout, where table cells can span multiple rows or a number of columns.

Span multiple rows and columns

In the table we are building, notice that the “Mean Weight” cell spans more than one cell, and the “Immunization Doses” seems like a “Super Heading” with subheadings (taken and left).

This behavior is made possible with the colspan and rowspan attributes. Both attributes accept a number value, which is the number of rows or columns you want spanned.

<thead>
  <tr>
    <th rowspan="2">Name</th>
    <th rowspan="2">Sex</th>
    <th colspan="2">Immunization Doses</th>
    <th rowspan="2">Weight(kg)</th>
    <tr>
      <th>Taken</th>
      <th>Left</th>
    </tr>
  </tr>
</thead>

The rowspan attribute enables the contents of a table cell to span multiple rows. In the code sample above, we’ve made the "Name", "Sex", and "Weight" heading cells span two rows.

The colspan makes a single table cell span the width of more than one column or data cell. Using the colspan attribute, we make the “Immunization Doses” heading span two columns (and a single row). Then, by adding the subheadings to the next row, they are automatically added under “Immunization Doses”.

Styling Tables with CSS

Some table styling attributes are no longer supported in HTML5; corresponding CSS properties have replaced them. Some of these attributes include:

• align: use CSS margin-left, margin-right, or margin: auto properties instead.
• bgcolor: to achieve a similar effect, use the CSS background-color property
• border: use CSS border shorthand property
• width: use CSS width property

Cellspacing and cellpadding can be achieved using border-spacing and padding, respectively. border-spacing does not have any effect if border-collapse is set to collapse.

The color and other attributes of text within cells can be modified by specifying the value of a relevant attribute, such as color, font-size, and font-family, using an appropriate selector.

thead,
tfoot {
 font-size: 18px;
}

HTML Table Sample Code

HTML:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="index.css" />
   <title>Document</title>
 </head>

 <body>
   <table>
     <caption>
       Neonates Immunization Table
     </caption>

     <thead>
       <tr>
         <th rowspan="2">Name</th>
         <th rowspan="2">Sex</th>
         <th colspan="2">Immunization Doses</th>
         <th rowspan="2">Weight(kg)</th>
         <tr>
           <th>Taken</th>
           <th>Left</th>
         </tr>
       </tr>
     </thead>

     <tbody>
       <tr>
         <th scope="row">Mary Bridget</th>
         <td>F</td>
         <td>1</td>
         <td>4</td>
         <td>3.0</td>
       </tr>
       <tr class="darker">
         <th scope="row">Ryan Adams</th>
         <td>M</td>
         <td>2</td>
         <td>3</td>
         <td>2.4</td>
       </tr>
       <tr>
         <th scope="row">Stan Raji</th>
         <td>M</td>
         <td>2</td>
         <td>3</td>
         <td>3.6</td>
       </tr>
       <tr class="darker">
         <th scope="row">Kemi Uche</th>
         <td>F</td>
         <td>3</td>
         <td>2</td>
         <td>2.0</td>
       </tr>
       <tr>
         <th scope="row">Jerry Holmes</th>
         <td>M</td>
         <td>5</td>
         <td>0</td>
         <td>3.5</td>
       </tr>
     </tbody>

     <tfoot>
       <tr>
         <th colspan="4">Mean Weight Recorded (kg)</th>
         <td>2.9</td>
       </tr>
     </tfoot>

   </table>
 </body>
</html>

CSS:

body {
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
   "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
   sans-serif;
 height: 100%;
 width: 100%;
 display: flex;
 justify-content: center;
 padding-top: 2em;
}

table {
 border-collapse: collapse;
 text-align: left;
 background-color: rgb(255, 255, 255);
}

caption {
 padding-bottom: 5px;
}

thead,
tfoot {
 background-color: #cce;
 font-size: 18px;
}

td,
th {
 padding: 5px;
 border: 1px solid rgba(0, 0, 0, 0.5);
}

.darker {
 background-color: rgb(230 232 232);
}

Output:

Next steps for your learning

That concludes what we need to know in order to get started implementing tables in HTML. You can take what you’ve learned here, and your existing HTML and CSS knowledge, to start designing and implementing beautiful and functional tables.

The next steps to learn to master HTML and CSS are:

• Animate CSS code
• CSS positions
• HTML links
• HTML forms

If you would like to learn HTML and CSS from scratch, check out Educative's learning path Become a Front End Developer. With no prior knowledge needed, you will gain a mastery of HTML, CSS, and JavaScript and learn how to build beautiful websites on your own.

Happy learning!

Continue reading about HTML on Educative

• HTML Cheat Sheet: how to implement tables, links, and more
• Animate CSS code: create a panda animation with HTML & CSS
• HTML Beginner's Tutorial: build a webpage from scratch with HTML

Start a discussion

What HTML skill would you like to read about next? Was this article helpful? Let us know in the comments below!