Skip to content

Ruki's HTML Resources

Different bits and bobs I made in HTML that I'm preserving here, either so I can easily reuse it somewhere else or share it with others.

Pokémon PC Simulator (One Box)

A pre-made table sized for a box title, six columns, and five rows just like in any Pokémon game. Designed with the assumption that you use both an image of the Pokémon (see Pokémon Database's Spirte Index) and text underneath.

Fair warning, it's a lot of text. The boxes themselves are thirty lines total. 

<style>
  table, th, td {text-align:center; vertical-align:middle}
  table {border:transparent}
  th {border:3px solid black; background:#78c1f3; border-radius:10px; height=25px}
  td {border:1px solid black; border-radius:10px}
</style>


[...]
             

<table style="width:100%">
  <tr>
    <th colspan="6"><font size="6"><b>TITLE</b></font><br><font size="4">SUBTITLE</font></th>
  </tr>
  <tr style="height:125px">
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
  </tr>
  <tr style="height:125px">
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    </tr>
  <tr style="height:125px">
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
  </tr>
  <tr style="height:125px">
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
  </tr>
  <tr style="height:125px">
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
    <td><img src="IMAGE LINK" width="100" height="100"><br>POKÉMON NAME</td>
  </tr>
</table>

To use, all you need to do is replace "TITLE" and "SUBTITLE" with your desired text, "IMAGE LINK" with your image source link, and "POKÉMON NAME" with your desired text (or remove it entirely).

If you do not have enough items to fill a box, for consistent spacing, I recommend putting a transparent image in place of the image link. If you remove the image from a column entirely, it automatically resizes. You only need one, though; I only did this in the top row. If you removed the title box, you could also define your column size in the header tag.

See my Shiny Pokémon for Trade tab to see nine of these in-use. My Scarlet & Violet Solo Raid Pokémon page uses this chart as well, but the bottom two empty rows were removed.