Dex/Database Table HTML help

Posted 3 years, 10 days ago (Edited 3 years, 10 days ago) by Indigoidiot

Hi!!! First time using forums but wanted to ask here if anybody knows of any HTML or pastebins for a table layout similar to the Mahou Wandou Creacher Dex https://toyhou.se/10209262.creacher-dex I wanted something like it to list species types similar to the Mahou Wandou Creacher Dex, maybe types of magic too after that, but basically something where you have a bunch of images that when clicked links to a tab with further details. I think it uses the table command but i only have really simple beginner knowledge of HTML

Indigoidiot

(had to edit it with stars in the brackets because th was actually reading them as code help)

SpiritX

Thank you for the raw code! I referenced this with the Mahou Wandou code and made a little test database (https://toyhou.se/12460859.idk-what-im-doing-huaehuahea), eventually going to turn it into the dex i need for my world, raw code incoming, little explanation too in the sake of sharing what i learned and to see if i'm right, I basically copy pasted this with the exception of the link and image source for each one into each seat in the table code.

<*td style="width:20%;">

<*img src="https://cdn.discordapp.com/attachments/879478554763612231/879478584761282632/fiyah.png" style="max-height:225px;" alt="fire">

<*div style="text-align:center;">

<*a href="https://toyhou.se/12460859.idk-what-im-doing-huaehuahea/12467428.fire" target="_blank">

<*strong>

<*span style="font-size:22px;">FIRE

<*/strong>

<*/a>

<*/div>

<*/td>

I think td style is basically just sizing for the whole seat

img src is for sourcing the picture itself, which i just stuck in my discord server for toyhouse code stuff, I used style="max-height:225px;" so it all rounds out to the same size and it takes less space than separate height and weight clarifiers (i also referenced the size and code method off the current template that i'm putting on most of my characters), the alt is something that shows in the case that the image can't load so people know what's supposed to be there"

div style is for positioning the text under the picture, hence text align center

<*a href> is used for links, and i *think* the target= is to tell the browser to open a separate tab when clicking the link? i'm not entirely sure i'm gonna look into it more eventually.

strong is pretty much there to bold the text and make it stand out more, probably not all that necessary, also this one gave me a lot of issues because it sometimes nulled the link depending on how much of the code it covered, so i just used it to hug the code with the actual text itself.

span style has the font size and the actual text,

everything else is the end of each of the previous codes

i think this is as pretty good result though!!! thank you for giving me a baseline!