CODEWITHSUNDEEP
htmlcss
Nelson Rothermel
Nelson Rothermel

Reputation: 9746

HTML table caption as part of header row

I would like to create a table header row that includes a title on the left as well as "Sample header" on the right. For accessibility and to be semantically correct, the title should probably be in a <caption> tag, but "Sample header" isn't part of the title so it probably shouldn't be inside of <caption>. The caption can't be inside the row since it has to be the first element after <table>.

Here is the HTML structure:

<table>
    <caption>Caption</caption>
    <thead>
        <tr class="sample">
            <th colspan="2">Sample header</th>
        </tr>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data1</td>
            <td>Data2</td>
        </tr>
    </tbody>
</table>

The caption ends up as a separate line above the table, while I would like it to be on the same line as "Sample header".

Here is a sample of what I'm trying to achieve: http://jsfiddle.net/vueLL5ce/5/. It sets 'caption`'s position to relative and manually moves it where I want. The two main problems with this approach is that repositioning the caption still leaves its original space above the table and I'm working with pixels which vary between browsers so it won't necessarily line up correctly.

Is there a good way of achieving this? Am I stuck with including the header info inside of <caption> (and styling to look like a table row) or creating a regular table row and not using <caption>?

Upvotes: 0

Views: 3338

Answers (2)

Nelson Rothermel
Nelson Rothermel

Reputation: 9746

I think I found a cross-browser solution. The key is to set line-height: 0 (plain 0 doesn't work in IE6, but I don't need to support it). Firefox also wouldn't let me reposition the caption directly, so I had to add another span. I still don't like dealing with pixels directly, so any suggestions on that end would be great.

Fiddle: http://jsfiddle.net/vueLL5ce/8/

HTML:

<div>
    <table>
        <caption><span>Caption</span></caption>
        <thead>
            <tr class="captionRow">
                <th colspan="2">Sample header</th>
            </tr>
            <tr>
                <th>Column1</th>
                <th>Column2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data1</td>
                <td>Data2</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

div {
    background-color: #FFFFDD;
}

table {
    border: solid 1px Black;
    width: 100%;
}

table caption {
    line-height: 0;
    text-align: left;
}

table caption span {
    position: relative;
    left: 4px;
    top: 14px;
}

table th {
    background-color: #CCC;
}

.captionRow th {
    text-align: right;
}

Upvotes: 0

Tony_89
Tony_89

Reputation: 817

Move background color from div to table and it should remove the color from the top for you. see attached fiddle here

table {
border: solid 1px Black;
width: 100%;
background-color: #FFFFDD;

}

I would remove the caption, use the column head and separate the two items with there own class then align them in your css. Updated the example here This way you don't have the spacing issue at all.

Upvotes: 1

Related Questions