thead style not applied - html

Question

For the following table, the text in the thead element doesn't respond to any CSS rules.
I thought it would inherit the rules from thr table.declensionTable element, but it doesn't.
I created a CSS rule with the table.declensionTable thead selection, but that didn't work either.
What am I doing wrong?
body {
font-family: "Verdana", Sans-serif;
}
table.declensionTable{
font-family: "Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
table.declensionTable thead{
font-family: "Courier New", Serif;
}
table.declensionTable th{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td{
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<table class="declensionTable">
<thead><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</thead>
<tbody>
<tr>
<th></th><th>Singular</th><th>Plural </th>
</tr>
<tr>
<td><strong>Nom</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong></td> <td>klubu</td> <td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong></td> <td>klubowi</td> <td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong></td> <td>klub</td> <td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong></td> <td>klubem</td> <td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong></td> <td>klubie</td> <td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong></td> <td>klubie</td> <td>kluby</td>
</tr>
</tbody>
</table>

Answer 1

You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
The <thead> element must have one or more <tr> tags inside.
http://www.w3schools.com/tags/tag_thead.asp

Answer 2

Probably because you're confusing the browser with your markup.
The thead tag is expecting table data (tr, td, etc.)
Why not just use a styled header tag above the table?
Fiddle: http://jsfiddle.net/on1ypL4z/
body {
font-family:"Verdana", Sans-serif;
}
table.declensionTable {
font-family:"Courier New", Serif;
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
margin-bottom: 10px;
}
h3.table-desc {
font-family:"Courier New", Serif;
}
table.declensionTable th {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
table.declensionTable td {
border: 1px solid black;
border-color: #000000;
border-collapse: collapse;
}
<h3 class="table-desc"><strong>klub</strong>: <em>club</em>; an inanimate masculine noun</h3>
<table class="declensionTable">
<tbody>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
<tr>
<td><strong>Nom</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Gen</strong>
</td>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<td><strong>Dat</strong>
</td>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<td><strong>Acc</strong>
</td>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<td><strong>Inst</strong>
</td>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<td><strong>Loc</strong>
</td>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<td><strong>Voc</strong>
</td>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>

Answer 3

Here's an alternative approach to what you are trying to do using a definition list:
<dl>
<dt>klub</dt>
<dd>
<div><em>club</em>; an inanimate masculine noun</div>
<table class="declensionTable">
<thead>
<tr>
<th></th>
<th>Singular</th>
<th>Plural</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nom</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Gen</th>
<td>klubu</td>
<td>klubów</td>
</tr>
<tr>
<th>Dat</th>
<td>klubowi</td>
<td>klubom</td>
</tr>
<tr>
<th>Acc</th>
<td>klub</td>
<td>kluby</td>
</tr>
<tr>
<th>Inst</th>
<td>klubem</td>
<td>klubami</td>
</tr>
<tr>
<th>Loc</th>
<td>klubie</td>
<td>klubach</td>
</tr>
<tr>
<th>Voc</th>
<td>klubie</td>
<td>kluby</td>
</tr>
</tbody>
</table>
</dd>
</dl>
Fiddle: http://jsfiddle.net/v4h6zkcz/2/

Answer 4

So I appreciate the help.
Regulus and Bitwise Creative were both right, but they didn't take it far enough.
You're not using the thead element right. It's a container for rows to group the header content. It should display as you expect if you add a row inside the thead.
It turns out I was just being a complete n00b and I put my th tags inside the body of the table, instead of in the thead header. So while it was right that I needed some tr tags inside thead /thead, the fact was I already had the header properly formatted- just in the wrong place.