Question

sorry to combine two questions into one but I’m having trouble finding and answer to two even when I think it should be simple.

When I set the font size for a table like this:

table.tablesorter {
    font-family:arial;
    font-size: 16px;
    width: 100%;
    text-align: center;
    border-spacing: 0px;

Then when I create tags that look something like this:

h6 {
    font-size: 0.875em;
    color: #9a5353;
    font-weight: 500;
}

Why doesn’t the font size in the table decrease?
The reason why I’m asking this is because I want two different fonts in one column, one for the header and one for the text below. Is this possible? Also can I vertically align this text? Thank you :))

Here’s what a row looks like 🙂

<tr onclick="alert('Bob Squarepants')">
    <td><IMG src="posters/poster1.png"></td> 
    <td><h6>Venue Name</h6><BR>Some event</td> 
    <td>General, Hip Hop</td> 
    <td>$4.00</td> 
    <td>$1.00</td> 
    <td>$1.00</td> 
    <td>$2.00</td> 

</tr> 

Answer 1

Because the tag H6 is reserved its font size as it is a header tag, you will need to define the font size in the H6 tag as also the table tag for each.

To vertical align there are some options you can take, to center the text in the cell you could apply even padding around the cell. There is also some css styles you may use;

 vertical-align: top/middle/bottom;

Where you choose whichever one you want. You could also try this…

 line-height: **px;

Where ** is your desired line height, and lastly if your H6 is wrapped in another fixed sized div you could try…

 margin: auto 0; text-align: center;

This would do the trick just play around with it 🙂