Pokedex Layouts

If you've ever wanted to make a Pokedex, but had no clue on how code it, well, here's your answer. :) Because I've gone through the trouble of making all of those complicated tables and rows, so you don't have to. Just replace the things inside the brackets ([ and ]), and, wa-la, there's one of your entries. It's as simple as that.

In order to change the gray color scheme to whatever you want, simply replace the hex codes in the CSS to whatever you like. Here's what each of them means:

td, tr = The plain cells that contain all the information (currently white)
.title1 = The main headers of each of the tables (currently dark gray)
.title2 = The sub-headers (currently light gray)

All I ask of you is to keep the credit tag on their; it's a hidden HTML message, so it won't show up on the page itself, but if someone views the source to see how you did it, they'll be referred here. After all, it did take me like 40 minutes to make this, so it's the least you can do for me.

Anyway, here's the code:

<head>
<style type="text/css">
td, tr \{
background: #fff;
font-size: 12px;
font-family: verdana;
}

.title1 \{
background: #A2A2A2;
font-weight: bold;
text-align: center;
font-size: 14px;
}

.title2 \{
background: #D3D3D3;
font-weight: bold;
}
</style>
</head>

<table width="500">
<tr><td class="title1" colspan="4">
[Pokémon Name And Number / Title]
</td></tr>

<tr><td colspan="4">
[Pokémon Sprites Here]
</td></tr>

<tr>
<td class="title2" width="20%">Type:</td>
<td width="30%">
[Pokémon Type(s)]
</td>

<td class="title2" width="20%">Classification:</td>
<td width="30%">
[Classification]
</tr>

<tr>
<td class="title2" width="20%">Height:</td>
<td width="30%">
[Height]
</td>

<td class="title2" width="20%">Weight:</td>
<td width="30%">
[Weight]
</td>
</tr>

<tr>
<td class="title2" colspan="4">Gender Ratio:</td>
</tr>

<tr>
<td colspan="2">
Male: [Male %]
</td>
<td colspan="2">
Female: [Female %]
</td>
</tr>

<tr>
<td class="title2" colspan="4">Ability: [Ability]</td>
</tr>

<tr>
<td colspan="4">
[Description of Ability]
</td>
</tr>

<tr><td class="title2" colspan="4">Evolution Chain</td></tr>
<tr><td colspan="4">
[Evolution Chain]
</td></tr>
</table>

<br>

<table width="500">
<tr>
<td colspan="2" class="title1">Flavour Text</td>
</tr>

<tr>
<td width="20%" class="title2">[Generation]</td>
<td width="80%">[Entry here.]</td>
</tr>
</table>

<br>

<table width="500">

<tr>
<td colspan="2" class="title1">Location</td>
</tr>

<tr>
<td width="30%" class="title2">[Generation]</td>
<td width="70%">
[Location of Pokémon in Generation]
</td>
</tr>
</table>

<br>

<table width="500">

<tr>
<td colspan="7" class="title1">Stats</td>
</tr>

<tr>
<td width="12%"></td>
<td class="title2" width="14%">HP</td>
<td class="title2" width="14%">Attack</td>
<td class="title2" width="14%">Defense</td>
<td class="title2" width="14%">Speed</td>
<td class="title2" width="14%">Sp.Attack</td>
<td class="title2" width="14%">Sp.Defense</td>
</tr>

<tr>
<td class="title2">[Stat]</td>
<td>[HP]</td>
<td>[Attack]</td>
<td>[Defense]</td>
<td>[Speed]</td>
<td>[Sp.Attack]</td>
<td>[Sp.Defense]</td>
</tr>
</table>

<br>

<table width="500">
<tr><td class="title1" colspan="4">Level-Up Moves</td></tr>

<tr>
<td class="title2" width="7%">Lvl</td>
<td class="title2" width="15%">Name</td>
<td class="title2" width="10%">Type</td>
<td class="title2" width="63%">Effect</td>
</tr>

<tr>
<td>[#]</td><td>[Name]</td><td>[Type]</td>
<td>[Effect]</td>
</tr>
<tr>
<td>[#]</td><td>[Name]</td><td>[Type]</td>
<td>[Effect]</td>
</tr>
<tr>
<td>[#]</td><td>[Name]</td><td>[Type]</td>
<td>[Effect]</td>
</tr>
</table>

<br>

<table width="500">
<tr><td class="title1" colspan="4">TM's and HM's</td></tr>

<tr>
<td class="title2" width="7%">TM#</td>
<td class="title2" width="15%">Name</td>
<td class="title2" width="10%">Type</td>
<td class="title2" width="63%">Effect</td>
</tr>

<br>

<table width="500">
<tr><td class="title1" colspan="3">Move Tutor</td></tr>

<tr>
<td class="title2" width="16%">Name</td>
<td class="title2" width="12%">Type</td>
<td class="title2" width="68%">Effect</td>
</tr>

<tr>
<td>[Name]</td><td>[Type]</td>
<td>[Effect]</td>
</tr>
<tr>
<td>[Name]</td><td>[Type]</td>
<td>[Effect]</td>
</tr>
<tr>
<td>[Name]</td><td>[Type]</td>
<td>[Effect]</td>
</tr>
<tr>
<td>[Name]</td><td>[Type]</td>
<td>[Effect]</td>
</tr>
</table>

<br>

<table width="500">
<tr><td class="title1" colspan="3">Breedable Moves</td></tr>

<tr>
<td class="title2" width="16%">Name</td>
<td class="title2" width="12%">Type</td>
<td class="title2" width="68%">Effect</td>
</tr>

</div>
</body>
</html>

If you want to see how it turns up, go here. And, umm.. yeah, that's all there is to it. Hope this helped. :)

All layouts, content, and custom images are © 2006-2009 of Lugia's Island and its contributors. Layout made by Silverwing. None may be reproduced without explicit permission. Pokémon is copyright © 1994-2009 of Nintendo GAME FREAK.
Custom brushes on the images downloaded from Brusheezy.