CODEWITHSUNDEEP
htmlcssstylesheethtml-table
Sam Carleton
Sam Carleton

Reputation: 1398

how to style a th element to look like a td

I have been tasked with switching out the TD elements for TH's on all the headers without any change in appearance. Currently the only styling on the TD is:

td.detailColHeader {
    background-color:#d5d5d5;
    color:#000;
    font-weight:bold;
}

When I apply that to the th, it doesn't look the same. Anyone know what needs to be added to make the TH look like the TD?

Upvotes: 0

Views: 1241

Answers (1)

Alex Char
Alex Char

Reputation: 33218

The TH and TD elements are used for table cells. TH is used for table header cells while TD is used for table data cells. This distinction gives user agents a means to render such cells distinctly, for instance by using a larger or heavier font for header cells. It is also needed when rendering to speech. The CLASS attribute can be used to further differentiate cells, for instance into heads and subheads. This can be used together with style sheets to control the cell border style, and fill color etc.

Practically the only change you have to do is:

td {
    font-weight: bold;
}


td {
    font-weight: bold;
}
<table>
    <tr>
        <th>th</th>
    </tr>
    <tr>
        <td>td</td>
    </tr>
</table>

After @Alohci you can also add:

th {
    text-align: left;
}

when table has fixed width.

td {
    font-weight: bold;  
}

table{
    width: 200px;
}

th{
    text-align: left;
}
<table>
    <tr>
        <th>th</th>
    </tr>
    <tr>
        <td>td</td>
    </tr>
</table>

Upvotes: 1

Related Questions