InsaneJournal

1. Don't hotlink.


2. Credit's nice so that other people can find these, but I'm not going to hunt you down and make you credit me if you don't. Besides, let's be frank: it's basic HTML and crediting just adds a step most people don't want to bother with.


3. Commenting's cool, too, but it's optional.


4. Wanna modify? Knock yourself out, that's what it's here for.

These tables are based loosely on the amazing cast list over here at Picturesque (which has some really awesome premade characters you should check out).

You can see an active example of one here. Let me just go ahead and be honest: this is the hardest table in the entire fucking world to update if you don't have a set number of characters because you basically have to move everything over each time you get a new character. Masochistic enough to stick with me? Well, let's go forward.

It's pretty simple. Basically just copy the TRs (table rows) and everything in them. The third one is arranged like this:

Row one:
-->Image one
-->line to function as a space
-->Image two
-->line to function as a space
-->Image three
Row two:
-->Character Name one
-->line to function as a space
-->Character Name two
-->line to function as a space
-->Character Name three
Row three:
-->Character Description one
-->line to function as a space
-->Character Description two
-->line to function as a space
-->Character Description three

Then, paste all that you copied under the original, making sure it's still in the table. That creates a new row (or rows) of everything. Then, fill in the information. If you need something to appear blank, take out the text and remove the background color tag (bgcolor="").

If you have any issues, just leave a comment and I'll explain it more in depth.

Regulus Black

<a href="#regulus"><font size="1" face="verdana">Regulus Black</font></a>

You know those links that go to certain sections on a page? That's what this is. They're called anchors. The link part above is basically the same as a regular link. Instead of putting a link into the parenthesis, though, you write # and then give the section you want to go to a name. Say for this part I wanted Regulus' name to go to the picture above the character's information. So, I'm going to name my link '#regulus'. Here's the HTML for that:

<a href="#SECTION NAME"></a>

Now, I scroll down to find the picture I want to link to. Here, you put the name of that section name up above in parenthesis (no # needed). If you click the Regulus link above, it'll go to what follows:



Again, it's just like the HTML for a link. See the code:

<a name="SECTION NAME"></a>

The difference is that it's 'a name' instead of 'a href' and you don't need to put anything in where the link's text/image is. No! You can leave it blank. So, for Regulus, my HTML looks like this:

<a name="regulus"></a><img src="http://i24.photobucket.com/albums/c20/Sandroalexander/regulus-1.jpg">

TADA. You could also put that a name tag in front/behind your "character name" if you were using the third table.

If you were going to do it for a player directory and wanted to use characters, make each SECTION NAME the player's name. That way the characters will both link back to the a name bit by the graphic/name of each player.

Have you used it? Link me and I'll add a linked image here.