Pedigree Sandbox

Two-Generation

Three-Generation, Fixed-Width (width=650px)

Three-Generation, Fit-to-Size Width

Three-Generation, Full-Width (width=100%)

Three-Generation, Full-Width/Fixed-Height (w=100%, h=600px)

Family Pedigree

The Skeleton

The HTML

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="2" class="person_name" width="50%">John Preston Crowder</td>
        <td width="50%" class="person_name">John Franklin Crowder</td>
    </tr>
    <tr>
        <td class="date leftborder">1839-1896<br />Montgomery/Rowan, NC</td>
    </tr>
    <tr>
        <td rowspan="2" class="date">1887-1972<br />Montgomery, NC / Richmond, VA</td>
        <td class="person_name leftborder">Sarah Elizabeth Bailey</td>
    </tr>
    <tr>
        <td class="date">1848-1936<br />Anson, NC / Chesterfield, VA</td>
    </tr>
</table>

The CSS

.person_name
{
    vertical-align: bottom;
    border-bottom: solid 2px black;
    margin: 0;
    padding: 10px 10px 5px 10px;
}

.date
{
    vertical-align: top; 
    font-size: .85em;
    color: #777;
    margin: 0;
    padding: 2px 10px 10px 10px;
}

.leftborder
{
    border-left: solid 2px black;
}