What Is an HTML Table?

HTML tables offer a way to organize information. If you are starting to learn HTML or are thinking about enrolling in a web developer bootcamp, it’s important to start by understanding tables in general.

What Is a Table?

Generally speaking, a table is a structured set of data arranged in columns and rows, also known as tabular data. This format allows you to organize data and easily look up the values you need and see connections between various pieces of data. For example, you can use a table to look up a person and their age or view data regarding timetables for different airplanes.

An HTML table works well because it is rigid, making it easy for the user to find information by simply associating row and column headers. For an HTML table to work effectively online, you will need to style it using CSS and provide it with a structure using HTML.

When Should You Not Use an HTML Table?

If you are organizing tabular data, you should use an HTML table. Many developers in the past opted to design their webpages using an HTML table because older browsers did not support CSS very well. While this practice is much less common now, you might run across a webpage that was designed in this format. However, there are a few reasons using an HTML table is not always advised:

• Trouble for visually impaired users: People who have a visual impairment often use screen readers to read webpages. Using tables to design a website can make it more difficult for screen readers to interpret the HTML tags and can scramble the intended message on the page.

• Maintenance problems: Because an HTML table is often more complicated than standard HTML pages, the code on these pages can be more difficult to debug, maintain and create.

• Response problems: A proper webpage layout, including <div>, <section> and similar tags, will default to 100 percent of its parent element. This ensures that the layout will work on a variety of devices. On the other hand, an HTML table is sized by its content by default, so the layout might not work well on certain devices.

A web developer bootcamp will likely cover additional ways to avoid making similar mistakes.

Web Developer Bootcamp With HTML

The ideal way to learn HTML is to practice coding with it. Let’s start by creating an HTML table.

First, go to a new directory on your computer and create a copy of minimal-table.css and blank-template.html. Each HTML table will be enclosed by the <table></table> tags. Add these two tags inside of your HTML. 

The smallest part of the table is the individual cell; create this using <td>, which stands for table data. The full code to create the first cell would look something like this:

To create four cells, add this tag three more times.

Creating the Next Row

Rather than placing cells underneath each other, the cells in your HTML table will be aligned within the same row. Each <td> code creates one cell. Adding more cells will make the row longer.

When you are done with your first row, stop placing cells and start adding cells to the next row by using <tr>, which means table row. Every time you want to create a new row, use the <tr> element.

You just created your first HTML table. Read on to continue to learn what you can do with it.

Creating HTML Table Headers

You can also use HTML in a table header, which is a type of cell placed at the beginning of a row or column. Use these cells to let the viewer know the category of data contained in a row or column. For example, use table headers to denote rows including people and ages.

To start making your HTML table headers, make a copy of your initial table into a new directory on your computer. Use the <th> tag so your HTML table will recognize that these cells are headers, both semantically and visually. The <th> tag is very similar to the <td> tag, except it shows a header instead of a regular cell. To create a header, switch out <td> elements for <th> ones.

Once you save your HTML table and put it into a browser, you should see that the parts of your table with <th> tags now show up as headers.

Why Use HTML Headers?

Headers stand out, making it easier for viewers to find different information in your HTML table. They can also improve the aesthetics of the design.

Headers can also make your HTML table easier for visually impaired viewers’ screen readers to match up the header with the data that is in a given column or row.

Making Wider Cells 

If you have several sets of data that require the same heading, you might want that cell to be wider than the rest and take up several columns or rows. Doing so can drastically improve the look of your HTML table as a whole.

As you learn more ways to use HTML, you’ll learn to use colspan and rowspan attributes in your HTML table, which let you easily create a header spanning several columns or rows.

To do this, make a copy of your HTML table in a new directory on your computer. Use colspan and rowspan along with the number of columns or rows that you want the cell to cover. For example, if you want it to span three columns, use colspan=“3”.

Closing Thoughts

When it comes to creating an HTML table, knowing the right way to set yourself up can improve the look and experience of your webpage. Working with others in a web developer bootcamp can help you learn even more about HTML, beyond HTML tables.

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.