JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src=http://dpascaner.dyndns.org/Trabajo/Step/scripts/plugins/jquery.multiple-bgs.js></script>
<table class="monos" cellspacing="0"> 
    <tr> 
        <td class="separacionVertical enSeparadorHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionVertical enSeparadorHorizontal">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionHorizontal primerSeparador">&nbsp;</td> 
        <td class="separacionVertical enSeparadorHorizontal">&nbsp;</td> 
    </tr>
    <tr> 
        <td class="separacionVertical primerSeparador">&nbsp;</td> 
        <td id="paginaNumero8" class="pagina" valign="bottom" align="left"> 
            <style> 
                #paginaNumero8 {
                background: url(imagenes/flechitaMonohi0.5.png) no-repeat top left;background: url(imagenes/flechitaMonohi0.5.png) no-repeat top left;                        }
            </style> 
            <span class="">8</span> 
        </td> 
        <td id="paginaNumero1" class="pagina" valign="bottom" align="right"> 
            <style> 
                #paginaNumero1 {
                background: url(imagenes/flechitaMonohd1.png) no-repeat top right;background: url(imagenes/flechitaMonovs1.5.png) no-repeat top left, url(imagenes/flechitaMonovi0.5.png) no-repeat bottom left, url(imagenes/flechitaMonohd1.png) no-repeat top right;                        }
            </style> 
            <span class="">1</span> 
        </td> 
        <td class="separacionVertical">&nbsp;</td> 
        <td id="paginaNumero4" class="pagina" valign="bottom" align="left"> 
            <style> 
                #paginaNumero4 {
                background: url(imagenes/flechitaMonohi1.png) no-repeat top left;background: url(imagenes/flechitaMonohi1.png) no-repeat top left;            ...

CSS

.vertical-normal {
    display:block;
    width: 30px;
    height: 30px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
}

.horizontal-alreves {
    display:block;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}

.vertical-alreves {
    display:block;
    width: 30px;
    height: 30px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
}

table.monos {
    width: 95%;
    margin: 0px auto 0px;
    border: 3px solid #000000;
    background: url(http://dpascaner.dyndns.org/Trabajo/Step/imagenes/guiaMonos.png) no-repeat top left;
}

table.monos td.separacionVertical {
    width: 10px;
    border-left: 1px solid #000000;
}

table.monos td.separacionVertical.enSeparadorHorizontal,
table.monos td.separacionVertical.primerSeparador {
    border-left-width: 0px;
}

table.monos td.separacionHorizontal {
    height: 10px;
    border-top: 1px solid #000000;
}

table.monos td.separacionHorizontal.primerSeparador {
    border-top-width: 0px;
}

table.monos td.pagina {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    height: 70px;
    width: 100px;
}

table.monos td.pagina.primeraFila {
    border-top-width: 0px;
}

table.monos td.pagina.primeraColumna {
    border-left-width: 0px;
}

JavaScript

$("table.monos").each(function(){
    var primeraFila = $(this).find("tr:first");
    if(primeraFila.find("td.separacionHorizontal").length > 0){
        var colspan = primeraFila.find("td:not(.separacionVertical)").length,
            eqParaPinza = parseInt(colspan / 2),
            tdParaPinza = primeraFila.find("td:not(.separacionVertical):eq(" + eqParaPinza + ")");
        tdParaPinza.html("PINZA");
    }
});