How to Build a 2x2 Table

Learn to build a simple HTML table

HTML tables are easy to create once you understand the basics of rows and columns, and also once you understand when it is OK to use a table and when you should avoid them.

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.

Create a 2x2 Table

  1. First open the table:

  2. Open the first row with the tr tag:

  3. Open the first column with the td tag:

  4. Write the contents of the cell.

  5. Close the first cell and open the second:

  6. Write the contents of the second cell.

  7. Close the second cell and close the row:

  8. Write the second row exactly as the first:

  9. Then close the table:

  10. That's it!

  11. 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:




    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.

    mla apa chicago
    Your Citation
    Kyrnin, Jennifer. "How to Build a 2x2 Table." ThoughtCo, Jul. 31, 2021, Kyrnin, Jennifer. (2021, July 31). How to Build a 2x2 Table. Retrieved from Kyrnin, Jennifer. "How to Build a 2x2 Table." ThoughtCo. (accessed September 27, 2021).