Is there a way to stack two words in one cell of a HTML table?

Im trying to stack two words on each other in a single cell in a table, but I couldn't quite find a answer.

Im trying to get something like this,

but I keep getting this,

Here is the line of code - <th bgcolor='#ffe598' text-align= 'center'>Social Studies</th> This is meant for a table, and not just a plain line of code. Any help would be greatly appreciated.

Solution 1:

Simple solution is to add a hardcoded linebreak <br>

th {
  text-align: center;
}

<table>
  <tr>
    <th>Social<br> Studies</th>
  </tr>
</table>

Or create lines with span elements and make those elements blocks like:

th {
  text-align: center;
}

span {
  display: block;
}

<table>
  <tr>
    <th>
      <span>Social</span>
      <span>Studies</span>
    </th>
  </tr>
</table>

Solution 2:

You can use <br>. A line break. You can view some documentation on it here.