Extra Credit

---

Just like with the previous examples, we're going to take our lean, mean, structured markup and apply some CSS rules to add bits of style.

First, we'll go over a simple border trick to create a single-pixel grid on our example, and then we'll uniquely style the table's caption and headers.

Creating a Grid

Tired of the three-dimensional look that the good ol' border attribute brings to the table? Me too. Typically, adding border="1" to the <table> tag would get you an effect similar to what's found in Figure 3-1. But alternatively, here's a cool trick for getting a nice, neat grid using CSS instead. We'll start by adding a 1-pixel border to two sides (right and bottom) of each <th> and <td> cell.

 th, td {   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } 

Adding the border to only two sides is key for creating a grid that has equally sized borders all the way around that still looks correct in all modern browsers. If we added the same border to all four sides, they would double up on the top and left, where the cells meet. There is an alternate way of achieving the grid using a single border rule that I'll explain following this example.

You'll notice in Figure 3-2 that we're only missing borders on the extreme top and left of the entire table. To complete the grid, we'll add a border-top and border-left to the table element using the same color and style (see Figure 3-3).

Figure 3-2: Table example with borders added to right and bottom of <th> and <td>

Figure 3-3: Table example with top and left borders added

 table {   border-top: 1px solid #999;   border-left: 1px solid #999;   } th, td {   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } 

Collapse the Gaps

Now we have a complete grid, but what's with the little gaps between the borders? Unfortunately, most browsers will reveal these pesky gaps due to the browser adding slight margins by default.

What we can do is use the border-collapse property on the table element to close the gaps and get the resulting grid we're looking for:

 table {   border-top: 1px solid #999;   border-left: 1px solid #999;   border-collapse: collapse;   } th, td {   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } 

By adding the value collapse to the border-collapse property, it will ensure us that precise, single-pixel look we're going for here. Let's take a look at the results found in Figure 3-4.

Figure 3-4: A perfect grid using the border-collapse property

IE/Mac-Less Version

Alternatively, in every browser but Internet Explorer for Mac, you could simplify the CSS to just the following:

 table {   border-collapse: collapse;   } th, td {   border: 1px solid #999;   } 

Which method you choose is, of course, up to you. There are still a number of users out there using IE/Mac—and they will see some doubled-up borders using the second method discussed previously. If this doesn't bother you, go simple. It's strictly a presentational problem, and the table will still function normally.

Because I happen to have a soft spot for Mac fans (and any good web designer should), we'll stick with the IE/Mac-friendly version for the remainder of the exercise.

Spaced Out

We now have a perfect grid on our hands. But it's looking a little cramped. Let's let it breathe a bit more, as shown in Figure 3-5, by simply adding a little padding to our combined th, td rule:

 table {   border-top: 1px solid #999;   border-left: 1px solid #999;   border-collapse: collapse;   } th, td {   padding: 10px;   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } 

Figure 3-5: 10 pixels of padding added

Did you know? Setting padding with one value (in this case 10 pixels) will add that value amount to all four sides of the element. You can also set the value for each side separately by following the order like a clock (top, right, bottom, left). So including padding: 10px 5px 2px 10px; will add 10 pixels of padding to the top, 5 on the right, 2 on the bottom, and 10 to the left (see Figure 3-6).

Figure 3-6: The face of a clock represents the order of margin or padding values.

Another shortcut: If your top and bottom values are the same and also if your left and right values match up, you need only set each value once. So including padding: 10px 5px; will add 10 pixels of padding to the top and bottom, while adding only 5 pixels for both right and left sides.

Customize Those Headers

To make the table headers stand out even more, we can easily add a background color and different font to those particular cells. Because we're using <th> tags, rather than making their text bold inline, we don't have to add any additional markup to call the headers out uniquely.

Let's also add a little padding to the bottom of the caption as well as a different font and color (red, of course) to make it stand out from the rest of the table (see Figure 3-7):

 table {   border-top: 1px solid #999;   border-left: 1px solid #999;   } caption {   font-family: Arial, sans-serif;   color: #993333;   padding-bottom: 6px;   } th, td {   padding: 10px;   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } th {   font-family: Verdana, sans-serif;   background: #ccc;   } 

Figure 3-7: Caption and <th> styled

Headers with Background Images

We've added a gray background color to the <th> elements in our table, but we could go a step further and instead create a stylish background image that would tile within those cells—for instance, a subtle gray striped pattern similar to what's found in many Mac OS X application window borders.

Tiny Tile

First, let's create the one tiny image that's necessary in Photoshop or your favorite image editor. The image need only be 4 pixels tall since for this example we'd like the stripes to have 2-pixel gray lines alternate with 2 pixels of white. We could make the width of the image whatever we'd like since it will tile in the <th> cell to create the stripe effect. For bandwidth's sake, we'll only make the width 1 pixel (see Figure 3-8).

Figure 3-8: 1 4 pixel stripe image created in Photoshop (zoomed)

The CSS

All we really needed to do differently from the previous example is replace the background color we were using with the path to the tiny image we created earlier. Unless otherwise specified, a background image will tile and repeat automatically in every direction, by default.

 table {   border-top: 1px solid #999;   border-left: 1px solid #999;   } caption {   font-family: Arial, sans-serif;   color: #993333;   padding-bottom: 6px;   } th, td {   padding: 10px;   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } th {   font-family: Verdana, sans-serif;   background: url(th_stripe.gif);   } 

Figure 3-9 shows the resulting styled table—this time with a striped background for the table headers only. You could easily experiment with other tiled shapes to create varied effects for the headers and/or normal data cells. Have fun with it.

Figure 3-9: An example of a tiled image background applied to table header cells

Assigning Icons to IDs

Remember earlier in the chapter when we assigned a unique id to each <th> in our table? We coupled those ids with headers attributes in the data cells to help those browsing by nonvisual means. We can now take advantage of the ids in another way—by assigning a specific icon to each <th> as a background image.

The icon images themselves will be kept entirely within the CSS, allowing for easy swap out in the event of a site redesign or update. The markup will stay exactly the same.

The Icons

I've created three unique icons in Photoshop—one for each table heading in our example: Year, Opponent, and Season Record (W-L). Figure 3-10 shows the three icons.

Figure 3-10: Three table header icons created in Photoshop

The CSS

Adding the CSS is simple. Because we've assigned an id to each <th>, we can specify the correct icon using the background property.

 table {   border-top: 1px solid #999;   border-left: 1px solid #999;   } caption {   font-family: Arial, sans-serif;   color: #993333;   padding-bottom: 6px;   } th, td {   padding: 10px;   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } th {   font-family: Verdana, sans-serif;   } #year {   padding-left: 26px;   background: #ccc url(icon_year.gif) no-repeat 10px 50%;   } #opponent {   padding-left: 26px;   background: #ccc url(icon_opp.gif) no-repeat 10px 50%;   } #record {   padding-left: 26px;   background: #ccc url(icon_rec.gif) no-repeat 10px 50%;   } 

You'll notice that, because we're using the shorthand method for declaring backgrounds, we've taken the background:#ccc; rule out of the th declaration and have added it instead for each header along with the appropriate icon image. This will allow the image to "sit" on top on the gray color that we've specified. We've given enough padding on the left of each header to let the icon have enough room to be seen without any text overlap. Figure 3-11 shows the results found in the browser.

Figure 3-11: An example of unique icons assigned to each <th>

Using the shorthand method has its obvious advantages; however, if we had declared the image only, without the color, using the background property, we'll have overridden any default color we had previously set using background on the <th> element.

Combining Rules for Simpler Bits

An alternate method that achieves the same results would be to write the rules that get duplicated for each separate header (in this case padding, background color, and position) once in the th declaration (because they are indeed all <th>s), and save the unique bits (the image path) for the #year, #opponent, and #record declarations.

 table {   border-top: 1px solid #999;   border-left: 1px solid #999;   } caption {   font-family: Arial, sans-serif;   color: #993333;   padding-bottom: 6px;   } th, td {   padding: 10px;   border-right: 1px solid #999;   border-bottom: 1px solid #999;   } th {   font-family: Verdana, sans-serif;   padding-left: 26px;   background-color: #ccc;   background-repeat: no-repeat;   background-position: 10px 50%;   } #year {   background-image: url(icon_year.gif);   } #opponent {   background-image: url(icon_opp.gif);   } #record {   background: url(icon_rec.gif);   } 

A little more compact, isn't it? By combining those common rules into one, we save repeating ourselves over and over. For this particular example, it may seem like six and a half of one, half a baker's dozen of the other—but for larger style sheets it can save quite a few bytes when those repeated rules are combined into one declaration.

---