How to Build a 2x2 HTML Table

Learn to build a simple HTML table

By

Updated on March 07, 2020

What to Know

Open the table. Open the first row with the tr tag, open the first column with the td tag, write the contents of the cell. Close the first cell, open the second
Write the contents of the second cell. Close the second cell and close the row. Write the second row exactly as the first, and close the table.
If you're not using them for layout purposes, it's OK to use HTML tables. If you need to display tabular information, a table is the best way to do so.

This article explains how to build an HTML 2x2 table quickly and painlessly. We'll explain when it's acceptable to use HTML tables and when they should be avoided.

Create a 2x2 Table

First open the table:

Open the first row with the tr tag:

Open the first column with the td tag:

Then close the table:

That's it!

You could also choose to add table headers to your table using the element. These table headers would replace the "table data" pieces in the first table row, like this:

Name
Role

Jeremy
Designer

Jennifer
Developer

When this page would render in the browser, that first row with the table headers would, by default, display in bold text and they would be centered in the table cell that they appear in.

So, Is It OK to Use Tables in HTML?

Yes, so long as you are not using them for layout purposes, it's OK to use tables. If you need to display tabular information, a table is the best way to do so. In fact, avoiding a table because of some misguided purity to shun this legitimate HTML element is as backward as using them for layout reasons in this day and age.

History of Tables and Web Design

Many years ago, before the acceptable CSS and web standards, web designers used the HTML element to create a page layout for sites. Website designs would be "sliced" into little pieces like a puzzle and then combined with an HTML table to render in the browser as intended. It was a very complex process that created lots of extra HTML markup and which would never be usable today in the multi-screen world our websites live in.

As CSS became the accepted method for webpage visuals and layout, the use of tables for this became shunned and many web designers mistakenly believed that "tables were bad." That was and is untrue. Tables for layout are bad, but they still have a place in web design and HTML, namely to display tabular data like a calendar or train schedule. For that content, using a table is still an acceptable and good approach.

So how do you layout a table? Let's start by creating a simply 2x2 table. This will have 2 columns (these are the vertical blocks) and 2 rows (the horizontal blocks). After you have built a 2x2 table, you can build any size table you would like simply by adding additional rows or columns.

Format

mla apa chicago

Your Citation

Kyrnin, Jennifer. "How to Build a 2x2 HTML Table." ThoughtCo, Apr. 5, 2023, thoughtco.com/how-to-build-a-2x2-table-3464594. Kyrnin, Jennifer. (2023, April 5). How to Build a 2x2 HTML Table. Retrieved from https://www.thoughtco.com/how-to-build-a-2x2-table-3464594 Kyrnin, Jennifer. "How to Build a 2x2 HTML Table." ThoughtCo. https://www.thoughtco.com/how-to-build-a-2x2-table-3464594 (accessed April 20, 2024).

Read More How to Center Text in a Table Cell By Jennifer Kyrnin Write the contents of the cell. Close the first cell and open the second:	Write the contents of the second cell. Close the second cell and close the row: Write the second row exactly as the first: