Adam Silva Adam Silva - 4 months ago 31
CSS Question

HTML & CSS Simple Crossword

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:
Crossword

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

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>

Comments