InsaneJournal

Tweak says, "You're just as sane as I am."

Ally -- are you already gone? (

wastintime) wrote in

rp_tutorials,
@ 2010-07-02 09:37:00

[Layout] Character Family Tree

House of Kirkham

Leod Kirkham
[pureblood b.1920]
wizengamot

+
m.1944

Isla Lyne
[pureblood b.1925]
writer

Gerard Ennis
[wizard b.1945]
retired seeker
[open]

Camilla
Greene
sportscaster
[open]

Shawn Eion
[♂ b.1975]

Leod Tòmas II
[♂ b.1975]

Greer Leod
[wizard b.1948]
retired chaser

greerie

+
m.1975

Olivia
[neé O'Leary]
animal healer

olivias

Annabelle Siobhan
[♀ b.1978]

Lucas Greer
[♂ b.1982]

Griffith Dorian
[wizard b.1950]
catapults
keeper & captain
gruffith

Noralie
Thompson
deceased

norateaches

Penelope Grace
[♀ b.1979]

West
Sumpter
tornadoes beater

westisbest

Walter Gregory
[♂ b.1982]
adopted

back to top

More Examples: Here

Code

<a name="name"> </a>
<table width=100% style="border:4px black solid;background-color:#DDDDDD" cellpadding=5px cellspacing=5px>
<tr><td align=center>House of Name</td></tr>

<tr><td><table align=center>
<tr><td width=45% align=center>Father [bloodline b.????] career</td>
<td valign=middle align=center>+ m.????</td>
<td width=45% align=center>Mother [bloodline b.????] career</td></tr>
</table></td></tr>

<tr><td><table align=center cellpadding=10px>
<tr>
<td align=center valign=top><table align=center cellpadding=2px>
<tr><td valign=top align=center><img src="IMAGE URL" width=100px style="border:4px yellow solid"> Name Middle [race b.????] career <lj user="madducks"></td>
</tr>
</table></td>

<td align=center valign=top><table align=center cellpadding=2px>
<tr><td valign=top align=center><img src="IMAGE URL" width=100px style="border:4px green solid"> Name Middle [race b.????] career <lj user="username"></td>
<td valign=middle align=center>+ m.????    </td>
<td valign=top align=center><img src="IMAGE URL" width=100px> Spouse [neé Maiden] career <lj user="username"></td></tr>
<tr><td align=center valign=top colspan=3><table cellpadding=5px>
<tr><td td align=center valign=top>Son Middle [♂ b.????]</td>
<td align=center valign=top>Daughter Middle [♀ b.????]</td></tr>
<tr><td td align=center valign=top>Son Middle [♂ b.????]</td>
<td align=center valign=top>Daughter Middle [♀ b.????]</td></tr>
</table></td>
</tr></table></td>

<td align=center valign=top><table align=center cellpadding=2px>
<tr><td valign=top align=center><img src="IMAGE URL" width=100px style="border:4px red solid"> Name Middle [race b.????] career <lj user="username"></td>
<td valign=middle align=center>+ m.????    </td>
<td valign=top align=center><img src="IMAGE URL" width=100px> Spouse Surname career <lj user="username"></td></tr>
<tr><td align=center valign=top colspan=3><table cellpadding=5px>
<tr><td align=center valign=top>Daughter Middle [♀ b.????]</td>
<td align=center valign=top colspan=3>Son Middle [♂ b.????]</td></tr></table></td>
</tr></table></td>
</tr></table>
<a href="#top">back to top</a></td></tr></table>

This code is the stripped version of the table for the family tree in the sample picture (not the large sample table, here.) It's very customizable (i.e. it doesn't HAVE to be for Harry Potter like the examples), but it takes some HTML know-how to do so. That said, I know there is a lot of code. So, I suggest not using this if you're not familiar with nested HTML tables. If you have questions, though, leave them here or email me at xvanyaeldax@gmail.com

(Read comments)

InsaneJournal

Post a comment in response: