---

Greased 1.15.1D - Just For Fun: Doing It with Tables

November 6th, 2015

This segment came as a late addition to my growing "guide" on creating fun menus in your WordPress articles; I don't know if it's easier than creating horizontal lists, and it really doesn't have anything to do with lists at all, but what the hell, if you're game then so am I, so let's give it a go!

The more I looked at my finished "fancy" product and the intermediate steps we took to get there, the more it looked like a table. To be clear, I'm using "table" in the HTML sense of the word. Before the days of CSS, tables were the de facto standard for laying out webpages. It turned out to be highly inefficient, but the results were predictable and replicable by even novice web designers. Nowadays using CSS is the standard and even recommended by the W3C. There's been a growing trend over the last several years to move to "tableless web design," which doesn't mean eschewing tables altogether, but rather going back to what tables were intended for in the first place. Fortunately, making this little menu seems like a reasonable use of tables to me. After all, it kind of even looks like a little table, an observation that led me to this experiment in the first place!

I've already shown you what the "fancy" menu looks like when it comes to inline CSS vs. an internal style sheet, and now I want to do something similar with the "table version." First of all, here's the original "fancy" menu followed by the same internal style sheet and HTML used to bring it to life.

• Peach
• Viridian
• Gold
• Blue
• Cyan
• Indigo

So far we've done nothing new, right? Right. Now let's move on to the "table version."

Peach

Viridian

Gold

Blue

Cyan

Indigo

Looks exactly the same, doesn't it!? Let's take a gander at what it took to put this together:

And now let's look at those internal style sheets side by side.

Now compare the raw HTML (not quite as useful, but as I'll soon be pointing out, maybe you can see the relationship between <ul> and <tr> and the relationship between <li> and <td>).

Which looks easier to you? Maybe we should start talking about how HTML tables are constructed in the first place. Personally I think that tables offer a more intuitive method of construction and styling but a) I'm a total CSS amatuer to begin with, and b) I've got lot of HTML circa 2000 hardwired into my brain, so it's easier for me to fall back on some of these concepts that are more HTML-heavy rather than the more abstract concepts tied to CSS (i.e. "divs"). So let's start discussing how the table is built.

First, the tag is opened with <table> followed by <tbody>. Honestly I don't know exactly what the specific function of tobdy is. So don't worry about it too much, just remember to use it. Next is <tr>, or table row. Not much mystery here; it signals the start of a new row. Since our menu only consists of a single row, we will only require a single tr. Finally we'll be using <td> when it comes to content. I actually don't know what it stands for, but you can think of it as denoting an individual cell. Between your opening and closing td tags is where your actual content will go, including any further HTML such as a link. The idea is to keep creating tds until you're ready to start a new row, where you then close out tr, make more tds, and so on. Luckily this situation is pretty simple. It's <table> then <tbody> then <tr> followed by 6 <td> tags (with content), and then we close everything in reverse order as illustrated above. Apart from the mildly superfluous tbody and perhaps even table itself, it's pretty easy to see the parallels between tr / td and ul / li.

Before we keep going, let's look at a basic table first. Remember all the inline CSS we had to use just to make our list appear horizontally? Well one advantage of using a table is that all of that is unnecessary! Many sites will have varying defaults for table and the elements within, but below is an example of what it looks like with the default values imposed by most browsers. I don't have any specifications set for tables in the CSS governing this page, so this table is 100% default. The reason I want to go ahead and put this out there is so that we can fully understand where the style elements are coming from. Here's the table itself followed by the HTML.

Peach

Viridian

Gold

Blue

Cyan

Indigo

Not very stylish, but it does look a lot like our first stab at a horizontal list...and without any inline CSS! It's not immediately noticeable without a border, but like the list and list items, the table is a block element and the widths are determined by content (for instance the cell with "Viridian" is wider than the one containing "Blue"). Also, the width of the entire table is determined by the sum of the cells (and any padding, margins, or borders) and will remain as such. We don't need any bizarre and completely abstract concepts or rules like overflow: hidden; to get the table to behave how we want it.

Now let's start trying to turn the above into the "table version" of the "fancy" menu! We're going to tackle one thing at a time. What do we start with? That depends. I can't stress enough the importance of finding out what the default values are on a given site but luckily we're working from a blank slate. Logic would dictate that since we're not doing anything different with the links, we can probably bet on leaving all of that as-is, so let's save that for last. Since the table and ul have already been observed to act very differently from each other, why don't we work from the outside inward? Let's get started on that border. Originally we defined it as groove 3px #000;. So let's do that. We'll add it as inline CSS. We also need to add our "dividers," which we originally did as border-right on each list item. This time we'll do it on each td instead (border-right: solid 1px #000;), except the final item where it isn't needed. Here's what we have now followed by the HTML. The stuff we added is marked in red.

Peach

Viridian

Gold

Blue

Cyan

Indigo

Alright, not too shabby. You'll notice a small gap between the dividers and the main border, and we'll address that soon. Let's keep going with the easy stuff. What else can we do to make it look better? Center the table? Make each cell an equal width? And then ensure the text is centered within those cells? Yes, yes, and yes. Sounds like a plan to me.

Do you remember the way to center things within CSS? (Don't worry if you don't. Truthfully it's kind of silly and a lot of designers are eager for a further revision of CSS to address horizontal centering in a more direct manner.) To center an element, we set the left and right margins to auto. But there's a catch: the stipulation is that the object being centered must have a fixed width - it can't take up the entire width of the parent container. That's why we had to set a width for the the ul but not for the table. For the list we had to actually calculate the width of the items plus any margins, padding, or borders and the add them together and manually set the width of the ul. However, the table automatically assumes the width of the sum of its cells and components. That means all we need to do is make sure we add the declarations margin-left: auto; and margin-right: auto; as inline CSS! That's it!

Centering the text within each cell is easy - we just tell the table text-align: center;. You should have a pretty good idea of how to set the width too - just like li, we do it item by item, or in this case, cell by cell with width: 80px;. HTML follows with new additions in blue.

Peach

Viridian

Gold

Blue

Cyan

Indigo

We're getting a lot closer! What's left? Looks like all we need to do is add the links, colors, and deal with the divider spacing issue mentioned above. The spacing thing may not seem obvious, but it's tied to a concept that used to be called "cellpadding." Cellpadding refers to exactly what it sounds like - the padding within a td element. You can still "fix" the issue by using the cellpadding HTML attritube within table and setting it to zero (usually in conjunction with the related yet equally outdated cellspacing), but W3C recommends using CSS instead and creating a rule defining the padding of <td>. By default, cellpadding or td padding occurs in small amounts. To get rid of it, we just need to make sure that none of our cells contain any padding with padding: 0;.

While we're at it, why not get started on the colors and define our links? The color is actually fairly easy - we can define the backgroud color for all cells within table by using backgroud: #800080;. Just remember that we still need to style the links, and even then some of the styling won't be present because of those pesky pseudoclasses. Take a look at the table followed by the markup, new stuff in magenta.

Peach

Viridian

Gold

Blue

Cyan

Indigo

<table style="border: groove 3px #000; text-align: center; margin-left: auto; margin-right: auto; background: #800080;">
<tbody>
<tr>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-15.html>Peach</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-14-S.html>Viridian</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-13-1.html>Gold</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-13.html>Blue</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-12.html>Cyan</a></td>
<td style="width: 80px; padding: 0;">
<a href="1-11-S.html>Indigo</a></td>
</tr>
</tbody>
</table>

Uh oh, we didn't quite get rid of that spacing did we? That's because there's one more tricky property of tables at work here. Yet again, the default values (if any) are going to have a huge bearing on exactly what you'll need to do to get a table to look the way you want it, but one thing worth always checking is border-collapse. This attritube has 2 possible values: separate and collapse. An HTML table really contains 2 sets of borders (for an example, just scroll the bottom and look at the table with the email links), one which bordes the entire table and another which outlines each cell. Even if these borers aren't displayed, the table can still hold the potential for them to be displayed. Here's where border-collapse: collapse; comes in: it "collapses" the 2 borders or "combines" any adjacent borders between table and td. It may not even be obvious what the default is, and it's always worth trying both border-collapse: collapse; and border-collapse: separate;.

Besides that small order of business, we need to style the links the best we can. To make our cells function like buttons, we'll need to display links as block elements (display: block;) and to beef up the buttons vertically we'll increase the padding slightly (padding: 5px;). This is exactly what we did when we dealt with horizontal lists. Let's do it! Changes in green.

Peach

Viridian

Gold

Blue

Cyan

Indigo

<table style="border: groove 3px #000; text-align: center; margin-left: auto; margin-right: auto; background: #800080; border-collapse: collapse;">
<tbody>
<tr>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-15.html" style="display: block; padding: 5px;">Peach</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-14-S.html" style="display: block; padding: 5px;">Viridian</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-13-1.html" style="display: block; padding: 5px;">Gold</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-13.html" style="display: block; padding: 5px;">Blue</a></td>
<td style="border-rigt: solid 1px #000; width: 80px; padding: 0;">
<a href="1-12.html" style="display: block; padding: 5px;">Cyan</a></td>
<td style="width: 80px; padding: 0;">
<a href="1-11-S.html" style="display: block; padding: 5px;">Indigo</a></td>
</tr>
</tbody>
</table>

And that's it! That's how we build a table up from scratch and this is as far as it gets using purely inline CSS, but you can see where all of these rules are accounted for the in the larger internal style sheet for the table that we took a look at a while back. You'll see that some aspects are the same, particularly how we handle turning the links into buttons, but the structure is quite a bit different due to the rules regarding tables versus those that govern lists. Play aroud with them both and see which suits you best! The internal CSS and HTML of each are roughly comparable in size, so there isn't a huge difference in size or effort to consider.

Happy HTML-ing! If I still haven't sold you on the idea, head on over to the last page on the subject, which is basically just a demonstration of menus with different colors and different setups!

NerdBerry NerdBerry@NerdBacon.com	The Cubist TheCubist@NerdBacon.com
Doc Croc DocCroc@NerdBacon.com