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 Virutal Trade Binders in the sidebar to see these in-use.


Pokémon Team Display (2 * 3)

Designed to match how teams were stylized in games like the DS titles.

Significantly less text, but still 23 lines of HTML. 

<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="2"><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>
  </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>
    </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>
  </tr>
</table>

Pokémon Team Display (Single Row of 3 Pokémon)

Designed to match the team limit in Pokémon Legends: Z-A Ranked.

You can probably write this one yourself, but if you want to be lazy and copy-paste then go ahead (I don't blame you). 

<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="3"><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>
  </tr>
</table>