How to make html table headers span multiple lines

Question

I have some table headers like:

<table>
    <tr>
        <th>
            Invoice Number
        </th>
        <th>
            Invoice Date
        </th>

...

I'm wanting to get the different words on different lines in the headers so I did this:

<table>
    <tr>
        <th>
            Invoice<br />Number
        </th>
        <th>
            Invoice<br />Date
        </th>

...

This works but I'm unsure if it obeys best practises. I have heard on a webcast that you shouldn't really use <br /> anymore and shouldn't use tags to format what your output looks like but should use css so you can change it more easily.

Can anyone suggest a better way to do this?

Answer 1

You could code it as:

<table>
    <tr>
        <th>
            <div>Invoice</div><div>Number</div>
        </th>
        <th>
            <div>Invoice</div><div>Date</div>
        </th>

...

Although frankly, I see nothing wrong with that use of the <br /> tag.

Answer 2

You can set the width for all of your table headers with this:

th {width: 60px;}

or you can assign a class so you just make some of them more narrow:

th.narrow {width: 60px;} 

You can adjust the font size and width as necessary.

Just a side note: don't forget to add scope for accessibility. If the data is below your header cells then use

<th scope="col"> 

and put the th in a thead section and the td cells in the tbody section. If your header cells are on the left side of the table and the cells related to those headers are to the right, then use

<th scope="row">. 

Answer 3

You could try putting a div inside the th with a specific width and height style to force the second word down.