HTML Table with cell background text

Question

What is the best way to go about displaying an html table with text in the background of each cell? I am making a calendar and I would like to have grey dates in the background of actual text.

The only thing I can think of at this point is to have the date and the cell content in separate divs that float over one another but even that isn't implementing well within a table.

By the way using an image to display the date is not really an option IMHO.

Answer 1

Hmm... if I understood correctly, the way I would do it is probably something like the following in each cell:

<div class="cell_container" style="position:relative;">
    <div class="cell_bg" style="position:absolute; width:100%; 
        height:100%; z-index:0; color: gray;">29/12/2009</div>
    <div class="cell_fg" style="position:absolute; width:100%; 
        height:100%; z-index:1;">Jim's birthday</div>
</div>

Naturally, you can move the styles into a seperate css file. You might also be able to do away with the container div and just apply the "position:relative;" style to the containing cell. The major downside to this method is that you will lose the ability to vertically align in IE, without some trickily implemented workaround.

Answer 2

I realize you said that using an image is "not an option IMHO", but may I suggest that using images would give you a lot more flexibility in the appearance of the date. You could use any font available to your image editor, rather than the limited set of fonts you can count on in a browser. And all sorts of image tweaking tricks could be aplied that would be immpossible in the browser.

Answer 3

Use relative positioning in the content span:

<tr>
    <td>
        <span class="day">6</span>
        <span class="contents">Contents go here</span>
    </td>
</tr>

And in CSS:

span.day {
    line-height: 20px; /* just to give it a height */
    display: block;
    color: #aaa;
}

span.contents {
    position: relative;
    top: -20px;
}

Now the spans are overlapping, with contents over day number. You might want to adjust the position but this should work.

Even though this would work, I would advise you to use images. You can embed all the required dates in one image file (the CSS sprite technique), it gives you greater control with less browser specific issues.