Span alignment trick
June 21, 2011 at 5:37 PM by Dr. Drang
This is a bit off my normal track, but it’s a cute little HTML/CSS trick you may find useful.
The neighborhood pool my family belongs to has a water polo team that plays the other pool teams in the area. My boys play on the team, and my wife and I volunteered to do some of the team’s administrative tasks. As the computery person, I’m in charge of maintaining the player database (just a spreadsheet), the parent email list, and the team’s web page.
Until recently, I had the schedule was a simple HTML table that took this form:
| Date | Times | Opponent | Location |
|---|---|---|---|
| Tue, June 14 | U11 5:30p U14 6:15p | West Glen | Away |
| Thu, June 16 | U11 6:00p U14 6:45p | White Eagle | Home |
| Sun, June 19 | U11 6:00p U14 6:45p | Breckenridge | Away |
| Tue, June 21 | U14 6:00p | Waubonsee Valley | Away |
| Thu, June 23 | U11 5:45p U14 6:30p | Springbrook | Home |
| Sun, June 26 | U11 6:00p U14 6:45p | Rose Hill | Home |
| Tue, June 28 | U11 5:00p U14 6:15p | Stillwater | Away |
| Thu, June 30 | U11 6:00p U14 6:45p | Stonebridge | Away |
| Sun, July 3 | U11 5:30p U14 6:15p | Tamarack | Home |
| Tue, July 5 | U11 6:00p U14 6:45p | Highlands | Home |
(I’ve changed the dates, times, and opponents, but the structure is the same.)
We have teams for two age groups: 11 and unders (U11) and 14 and unders (U14). To get the two-line entries for times, I used a <br /> tag in every row, like this:
html:
<tr><td>Sun, July 3</td><td>U11 5:30p<br />U14 6:15p</td><td>Tamarack</td><td>Home</td></tr>
The times lined up perfectly because “U11” and “U14” take up exactly the same horizontal space, even in a proportional font. I took advantage of the fact that all fonts, other than some purely decorative ones, use the same width for all the numerals1 and didn’t have to do any table-with-table crap to get the alignment I wanted.
Unfortunately for your lazy webmaster, one of this week’s opponents has lots of girls and has split its older team into a girls-only and a co-ed team.2 We agreed to field a girls-only team for a third match that day.
This means I needed to add a new line to one of the rows. Simply adding another <br /> and a line to that row,
html:
<tr><td>Thu, June 23</td><td>U11 5:45p<br />G 6:30p<br />U14 7:15p</td><td>Springbrook</td><td>Home</td></tr>
made the information correct, but it looked like crap.
| Tue, June 21 | U14 6:00p | Waubonsee Valley | Away |
| Thu, June 23 | U11 5:45p G 6:30p U14 7:15p | Springbrook | Home |
| Sun, June 26 | U11 6:00p U14 6:45p | Rose Hill | Home |
Adding a few s to push the time to the right,
html:
<tr><td>Thu, June 23</td><td>U11 5:45p<br />G 6:30p<br />U14 7:15p</td><td>Springbrook</td><td>Home</td></tr>
and made the alignment good enough,
| Tue, June 21 | U14 6:00p | Waubonsee Valley | Away |
| Thu, June 23 | U11 5:45p G 6:30p U14 7:15p | Springbrook | Home |
| Sun, June 26 | U11 6:00p U14 6:45p | Rose Hill | Home |
but I figured there had to be a way to insure perfect alignment under any circumstances.
I thought I could fix the problem by using <span>s with a little inline CSS, e.g.,
html:
<span style="width: 2.5em">U11</span>
but that didn’t change the width at all. I learned from this Q&A at Stack Overflow that width styles don’t work on regular <span>s because they’re inline elements. In a perfect world—that is, a world without older versions of Internet Explorer—I could assign the <span>s a display:inline-block style, and then the width would work. But according to this table at Quirksmode, support for inline-block is dicey in IE 6 and 7.
So I went with another solution mentioned on Stack Overflow: assigning a float:left style to the <span>. This apparently creates a box for the span that can be given a width. Not as clean as the inline-block solution, but something that was easy to do.
What I ended up with were table rows that looked like this:
html:
<tr><td>Thu, June 23</td><td><span class="age">U11</span>5:45p<br /><span class="age">G</span>6:30p<br /><span class="age">U14</span>7:15p</td><td>Springbrook</td><td>Home</td></tr>
Combined with this bit of CSS,
css:
table.wpschedule td span.age {
float: left;
width: 2.5em;
}
I got a table that looks like this:
| Date | Times | Opponent | Location |
|---|---|---|---|
| Tue, June 14 | U115:30p U146:15p | West Glen | Away |
| Thu, June 16 | U116:00p U146:45p | White Eagle | Home |
| Sun, June 19 | U116:00p U146:45p | Breckenridge | Away |
| Tue, June 21 | U146:00p | Waubonsee Valley | Away |
| Thu, June 23 | U115:45p G6:30p U147:15p | Springbrook | Home |
| Sun, June 26 | U116:00p U146:45p | Rose Hill | Home |
| Tue, June 28 | U115:00p U146:15p | Stillwater | Away |
| Thu, June 30 | U116:00p U146:45p | Stonebridge | Away |
| Sun, July 3 | U115:30p U146:15p | Tamarack | Home |
| Tue, July 5 | U116:00p U146:45p | Highlands | Home |
Just what I wanted. In fact, the extra space between the age and the time makes it easier to read than what I had before.
Update 6/22/11
If you’re reading via RSS, it’s quite likely that this last table will look even worse than ones before it. That’s an RSS limitation. If you go to my actual post, you’ll see the table the way it’s supposed to look.
As I said, if I didn’t have to worry about IE 6 and 7, I’d’ve used
css:
table.wpschedule td span.age {
display: inline-block;
width: 2.5em;
}
and gotten the same look with a more sensible style.
-
Imagine how difficult it would be to align columns of multi-digit figures if that weren’t the case. ↩
-
Is it unfair to have a girls-only team but not a boys-only team? Maybe, but our league’s experience is that some girls will only sign up if they can play on a girls-only team, and the league wants to encourage as many kids to play as possible. ↩
