HTML & CSS Simple Crossword - html

Question

I'm trying to design my own website, and I wanted to do a simple crossword puzzle to demonstrate some things about me. Like, every line is a diferrent word, but then there is the "middle" column that spells out another word. Here is an image of basically of what I want to do:
The words are pre-defined by me.
I would like to know the simplest way to do this using only HTML and CSS. I've thinked of using a table, but to make each line shift according to the word, each line would have to be a different table.
I'm not using an image and then putting it on the site, because I want it so everytime the user hovers each word, it shows it's meaning/description on the right/left.
I'm open to using Bootstrap if it helps in anyway.
Any ideas?

Answer 1

Since when do we use tables for layout? Just add 5 divs with a margin-left applied to them and style the nth-child. That way you could even add animation to it if you like.

Answer 2

I think that a table is actually your best bet and that you just need to add extra <td> tags for each empty square. You can make each square the same width by adding td {width: 40px} to the css.
table {
text-align: center;
}
td {
width: 40px;
height: 40px;
}
.letterData {
border: 2px solid #000;
}
<table>
<tr>
<td></td>
<td></td>
<td class="letterData">O</td>
<td class="letterData">N</td>
<td class="letterData">E</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td class="letterData">T</td>
<td class="letterData">W</td>
<td class="letterData">O</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="letterData">F</td>
<td class="letterData">O</td>
<td class="letterData">U</td>
<td class="letterData">R</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td class="letterData">T</td>
<td class="letterData">H</td>
<td class="letterData">R</td>
<td class="letterData">E</td>
<td class="letterData">E</td>
</tr>
<tr>
<td class="letterData">E</td>
<td class="letterData">I</td>
<td class="letterData">G</td>
<td class="letterData">H</td>
<td class="letterData">T</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Answer 3

I'd say the best way would be to first define a container that represents a square:
.square {
position: absolute;
height: 32px;
width: 32px;
}
You can then position each of these thus:
<div id="square-0" class="square" style="top: 32px; left: 32px;">
A
<div>
<div id="square-1" class="square" style="top: 32px; left: 64px;">
B
</div>
<div id="square-2" class="square" style="top: 64px; left: 64px;">
C
</div>
So long as you position them using top and left values that are exact multiples of the respective height and widths of your div, it should all fit together quite well.
Just an idea but that's how I'd probably do it. Give them sequential id's like square-0 and square-1 and it'll be easier to work with if you decide to expand on it programmatically in future.