How To Build a 2x2 Table

Table with Different Border Spacing for Columns and Rows
Table with Different Border Spacing for Columns and Rows. Screen shot by J Kyrnin

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.

A Brief History of Tables and Web Design

Many years ago, before the acceptable of CSS and web standards, web designers used the HTML <table> element to create 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 of 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.

Difficulty: Average

Time Required: 10 minutes

Here's How:

  1. First open the table <table>
  2. Open the first row with the tr tag <tr>
  3. Open the first column with the td tag <td>
  4. Write the contents of the cell
  5. Close the first cell and open the second </td><td>
  6. Write the contents of the second cell
  7. Close the second cell and close the row </td></tr>
  8. Write the second row exactly as the first <tr><td> </td><td> </td></tr>
  1. Then close the table </table>

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



<table>
  <tr>
     <th>Name</th>
     <th>Role</th>
  </tr>
  <tr>
     <td>Jeremy</td>
     <td>Designer</td>
  </tr>
     <td>Jennifer</td>
     <td>Developer</td>
  <tr>
  </tr>
</table>

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. If you need to display tabular information, a table is the way to do so. In fact, avoiding a table because of some misguided purity to shun this legitmate HTML element is as backwards as using them for layout reasons in this day and age.

Written by Jennifer Kyrin. Edited by Jeremy Girard on 8/11/16