Putting a heading on a table

Question

This is my code: http://jsfiddle.net/spadez/mVX93/13/

I'm trying to put a heading at the top of my table which stretches all the way across. I thought was the way to do it.

<table id="my-table">
    <tr>
        <th>Test</th>
        <td><span class="lrg">10</span>1</td>
        <td><span class="lrg">7</span>1</td>
        <td><span class="lrg">3</span>1</td>
        <td><span class="lrg">1</span>1</td>
    </tr>
</table>

What is the correct approach?

possible duplicate of [Colspan all columns](http://stackoverflow.com/questions/398734/colspan-all-columns) — benomatis, Apr 28 '14 at 16:38

score 1 · Accepted Answer · answered Apr 28 '14 at 16:28

1

Try:

<table id="my-table">
    <tr>
        <th colspan="4">Test</th>
    </tr>
    <tr>
        <td><span class="lrg">10</span>1</td>
        <td><span class="lrg">7</span>1</td>
        <td><span class="lrg">3</span>1</td>
        <td><span class="lrg">1</span>1</td>
    </tr>
</table>

answered Apr 28 '14 at 16:28

j08691

204,283
31
260
272

So what's `thead` for? – King King Apr 28 '14 at 16:29
The tag is used to group header content in an HTML table. – DWolf Apr 28 '14 at 16:30
@KingKing - "The thead element represents the block of rows that consist of the column labels (headings) for its parent table element." – j08691 Apr 28 '14 at 16:31
As above, is there a way to do it without using col-span, since I am trying to avoid saying how many columns there will be since they will be dynamic. – Jimmy Apr 28 '14 at 16:31
1

@j08691 `thead` should exactly be what the OP wants. The `Test – King King Apr 28 '14 at 16:32
@Jimmy looks like using `caption` is what you need, here is another [fiddle](http://jsfiddle.net/mVX93/14/) which adds the border to mimic 1 top row spanning all the columns. – King King Apr 28 '14 at 16:39

score 1 · Answer 2 · answered Apr 28 '14 at 16:29

1

From what I can tell,

you can use this approach

<table id="my-table">
    <tr>
       <th colspan="4">Test</th>
    </tr>
    <tr>
      <td><span class="lrg">10</span>1</td>
      <td><span class="lrg">7</span>1</td>
      <td><span class="lrg">3</span>1</td>
      <td><span class="lrg">1</span>1</td>
    </tr>
 </table>

col span will allow you to stretch across four columns

answered Apr 28 '14 at 16:29

DWolf

703
1
7
20

Is there a way to do it without using col-span, since I am trying to avoid saying how many columns there will be since they will be dynamic. – Jimmy Apr 28 '14 at 16:31

score 1 · Answer 3 · answered Apr 28 '14 at 16:43

Do you really want to use a "header" as in thead and th?

I see from your question and comments is that you want a "heading" at top of the table which is as wide as the table and irrespective of the columns.

Would a simple caption properly styled with CSS, not work?

Demo: http://jsfiddle.net/mVX93/15/

score 1 · Answer 4 · answered Apr 28 '14 at 16:44

You really should use caption for this.

<table id="my-table">
    <caption>Heading</caption>
    <tbody>
        <tr>
            <td><span class="lrg">10</span>1</td>
            <td><span class="lrg">7</span>1</td>
            <td><span class="lrg">3</span>1</td>
            <td><span class="lrg">1</span>1</td>
        </tr>
    <tbody>
</table>

Putting a heading on a table

4 Answers4