Cacher is the code snippet organizer for pro developers

<table> 
   <tbody>
      <tr> 
         <td> 
            <h1 style="float: left;">¿ ​Que es TDM ?</h1> 
            <p>&#160;</p> 
            <p style="text-align: justify;"> 
               <span class="ms-rteFontSize-4" style="float: left;">TDM es el proceso que permite cumplir las necesidades que tienen los equipos de desarrollo y de testing en cuanto a datos de prueba con la calidad adecuada, la cantidad requerida, el formato correcto el ambiente requerido, todo esto dentro del rango de tiempo que la organización necesita.</span> </p> 
         </td> 
         <td>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; &#160;&#160;&#160;&#160;<img src="/vsti/dsc/PublishingImages/tdm.png" alt="" style="margin: 5px;"/>&#160;&#160;&#160;&#160; </td> 
      </tr> 
   </tbody>
</table>

<h1 style="align: center;">Procesos</h1>
<table>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
    $(document).ready(function() {
      $(".macro").click(function() {
        $(".reserva,.tdmOptim,.tdmScripts,.nuevoOptim,.clareoDatos").slideToggle();
        $(".processMacro").slideToggle();
      });
      $(".reserva").click(function() {
        $(".macro,.tdmOptim,.tdmScripts,.nuevoOptim,.clareoDatos").slideToggle();
        $(".processReserva").slideToggle();
      });
      $(".tdmOptim").click(function() {
        $(".reserva,.macro,.tdmScripts,.nuevoOptim,.clareoDatos").slideToggle();
        $(".processtdmOptim").slideToggle();
      });
      $(".tdmScripts").click(function() {
        $(".reserva,.tdmOptim,.macro,.nuevoOptim,.clareoDatos").slideToggle();
        $(".processtdmScripts").slideToggle();
      });
      $(".nuevoOptim").click(function() {
        $(".reserva,.tdmOptim,.tdmScripts,.macro,.clareoDatos").slideToggle();
        $(".processnuevoOptim").slideToggle();
      });
      $(".clareoDatos").click(function() {
        $(".reserva,.tdmOptim,.tdmScripts,.nuevoOptim,.macro").slideToggle();
        $(".processclareoDatos").slideToggle();
      });
    });
  </script>
  <style>
  .spanButton{
    font-size: 18px;
    background-color: #c2c9d3;
    align: center;
    border-color: #c2c9d3;
    border-radius: 3px;
    border-style: solid;
    border-width: 5px;
  }
  </style>
   <tbody>
      <tr>
         <td>
            <br/>
            <p>&#160;</p>
            <p class="macro">
               <span class="spanButton">Macro</span><span>&#160&#160&#160</span></p>
            <br/>
            <img class="processMacro" src="/vsti/dsc/PublishingImages/Macro%20TDM.png" alt="" style="display: none;"/>
         </td>
         <td>
            <br/>
            <p>&#160;</p>
            <p class="reserva">
               <span class="spanButton">Reserva de datos</span><span>&#160&#160&#160</span></p>
            <br/>
            <img class="processReserva" src="/vsti/dsc/PublishingImages/Reservar%20Datos.png" alt="" style="display: none;"/>
         </td>
         <td>
            <br/>
            <p>&#160;</p>
            <p class="tdmOptim">
               <span class="spanButton">TDM Optim</span><span>&#160&#160&#160</span></p>
            <br/>
            <img class="processtdmOptim" src="/vsti/dsc/PublishingImages/TDM%20Optim.png" alt="" style="display: none;"/>
         </td>
         <td>
            <br/>
            <p>&#160;</p>
            <p class="tdmScripts">
               <span class="spanButton">TDM por Scripts</span><span>&#160&#160&#160</span></p>
            <br/>
            <img class="processtdmScripts" src="/vsti/dsc/PublishingImages/TDM%20por%20Scripts.png" alt="" style="display: none;"/>
         </td>
         <td>
            <br/>
            <p>&#160;</p>
            <p class="nuevoOptim">
               <span class="spanButton">Nuevo modelo en Optim</span><span>&#160&#160&#160</span></p>
            <br/>
            <img class="processnuevoOptim" src="/vsti/dsc/PublishingImages/Generar%20Nuevo%20Modelo%20en%20Optim.png" alt="" style="display: none;"/>
         </td>
         <td>
            <br/>
            <p>&#160;</p>
            <p class="clareoDatos">
               <span class="spanButton">Clarear Datos</span><span>&#160&#160&#160</span></p>
            <br/>
            <img class="processclareoDatos" src="/vsti/dsc/PublishingImages/Clareo%20de%20Datos.png" alt="" style="display: none;"/>
         </td>
      </tr>
   </tbody>
</table>

​​ 
<table width="100%" height="50" background="http://cos.bancolombia.corp/Cabezotes_Titulos/titulos_lineas_punteadas/Cab_naranja_fondoGnral.gif" border="0" cellspacing="0" cellpadding="0">
   <tbody> 
      <tr> 
         <td width="55" background="http://cos.bancolombia.corp/Cabezotes_Titulos/titulos_lineas_punteadas/Cab_naranja_izq.gif">&#160;<img width="40" height="40" src="http://cos.bancolombia.corp/Cabezotes_Titulos/iconos%20titulos/control_40x40.png" alt=""/></td>
         <td align="middle" background="http://cos.bancolombia.corp/Cabezotes_Titulos/titulos_lineas_punteadas/Cab_naranja_fondo.gif" style="background-position: center 50%;">
            <font color="#ffffff" face="Calibri" size="+3"><b>Gobierno Datos de Pruebas (TDM)</b></font></td>
         <td width="17">
            <img width="17" height="50" src="http://cos.bancolombia.corp/Cabezotes_Titulos/titulos_lineas_punteadas/Cab_naranja_der.gif" alt=""/>​</td>
      </tr>
   </tbody>
</table>