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

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.