As I stated in the main cladograms page, I was able to get a grip on the HTML code generated by Wikipedia's clade template by inspection of ribo.zone's "phylogeny of all the plants i can remember eating". This page is intended to help you manipulate the HTML code directly to build your own cladograms.
The code uses nested tables to render cladograms, with cell borders as the lines. The basic unit of the cladogram is a single line.
Basic unit:
| Top label 1 |
End label 1 |
| Bottom label 1 |
<table class="clade">
<tbody>
<tr>
<td class="clade-label first">Top label 1</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<p>End label 1</p>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel last">Bottom label 1</td>
</tr>
</tbody>
</table>
In my cladograms, I have not used bottom labels, but I've included them here for ease of understanding.
To add a horizontal line segment to this basic unit (i.e. to add additional labels), and to add a branch, the piece of code highlighted above in red is the only thing that changes. I've used the comments "start label or branch" and "end label or branch" to make it easier to quickly identify where I need to insert code.
With an additional segment:
| Top label 1 |
|
|||
| Bottom label 1 |
<table class="clade">
<tbody>
<tr>
<td class="clade-label first">Top label 1</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<table class="clade">
<tbody>
<tr>
<td class="clade-label first">Top label 2</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<p>End label 1</p>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel last">Bottom label 2</td>
</tr>
</tbody>
</table>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel last">Bottom label 1</td>
</tr>
</tbody>
</table>
You can see above that I have just nested the basic unit inside itself.
With a two-way branch:
| Top label 1 |
|
||||||
| Bottom label 1 |
<table class="clade">
<tbody>
<tr>
<td class="clade-label first">Top label 1</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<table class="clade">
<tbody>
<tr>
<td class="clade-label first">Top label 2</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<p>End label 1</p>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel">Bottom label 2</td>
</tr>
-------------------------
<tr>
<td class="clade-label">Top label 3</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<p>End label 2</p>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel last">Bottom label 3</td>
</tr>
</tbody>
</table>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel last">Bottom label 1</td>
</tr>
</tbody>
</table>
Note that I have used a dashed line to separate the code that produce the top and bottom branches as an aid to comprehension
Adding three or more branches is a similar process, but some care needs to be taken to ensure the correct classes are specified for the <td> elements.
With a three-way branch:
| Top label 1 |
|
|||||||||
| Bottom label 1 |
<table class="clade">
<tbody>
<tr>
<td class="clade-label first">Top label 1</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<table class="clade">
<tbody>
<tr>
<td class="clade-label first">Top label 2</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<p>End label 1</p>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel">Bottom label 2</td>
</tr>
-------------------------
<tr>
<td class="clade-label">Top label 3</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<p>End label 2</p>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel">Bottom label 3</td>
</tr>
-------------------------
<tr>
<td class="clade-label">Top label 4</td>
<td rowspan="2" class="clade-leaf">
<!-- start label or branch -->
<p>End label 3</p>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel last">Bottom label 4</td>
</tr>
</tbody>
</table>
<!-- end label or branch -->
</td>
</tr>
<tr>
<td class="clade-slabel last">Bottom label 1</td>
</tr>
</tbody>
</table>
Note that for the first branch, the <td> element for the top label is given the class clade-label first, and that for the last branch, the <td> element for the bottom label is given the class clade-slabel last. The <td> elements for the internal labels are given the classes clade-label and clade-slabel for top and bottom labels, respectively.