Using Tables! (But Not Really.) Part I

Published: 11/17/2014

I haven't been developing sites long enough to know the days when tables were being used all the time when constructing websites. By the time I got into the development game, tables were a taboo. For that reason, I didn't learn all of the cool things that tables can do. Recently, however, I have found and been led to some very useful functions of tables.

It is very rare that I would actually build something in a table. Lately, however, I have been using some display properties of tables to help format websites for responsive design. When developing a site for responsive design, it is best to look at it in a column and row layout (like a table) so you can set widths in a percentage, which will make things shrink and expand based on the width of the display of your device (phones, tablets, and computers).

The first thing that brought my attention to using functionalities of a table was automatically centering a list without knowing the actual width. For example, let's say I'm setting up a menu that runs horizontally across the site. Not only do I want each menu item to be centered within its designated box, but I want the whole list to be centered within its container as well. Here's a basic layout of a menu:

*NOTE - This is not real code, just an easy-to-follow example layout.
<menu_container> *This container will be the full width of the page (blue).
<list_container> *This container will be just as wide as the number of items in it (yellow).
<list_item>Hello again<close_list_item>

I'm not going to go through the styling that gives the menu its colors, font, padding, and all that. I'll just be showing the simple CSS styles that allow us to position the menu.

Before we do anything to the positioning of this menu, it's going to look something like this:

menu before

You'll notice that the menu items are stacking vertically, but we don't want that; we want them side by side across the page. Now, let's give it some formatting. We want to set the "list_container" to the CSS style of "display: table; ". One of the functions of display table is that it collapses to the minimum width it can based on the content inside it. It also sets up for the next change we are going to make.

Now we want to set the "list_item" to the CSS style of "display: table-cell;". This basically tells all of the list_items to be lined up side by side inside the table. Now we have a menu that looks like this:

menu halfway there

So we've got our menu most of the way there. Now we just need to center the list_container inside the menu_container so that no matter the width of your device, the menu stays centered. To do that, we'll go back to the "list_container" and add to the CSS style so that we now have "display: table; margin: 0px auto;". Here's what we are going to end up with:

menu finished

This will center the menu no matter how many list_items you have, as long as your list_container is not as wide as your menu_container. This is a simple and clean way to center menus on a website. Otherwise, it takes a few more layers of containers to accomplish this.

If you'd like to take a look at how this works in greater detail, here's a link over to this menu on JSFIDDLE.

Next time we'll run through making content of different heights center vertically within a parent container.


Author: Brice Wilson
Position: Front End Developer
Brice Wilson works at Business Promotion as a Front End Developer. In his free time, he likes playing soccer, rock climbing, and binge reading.

comments powered by Disqus