How to put signals between td

There are many ways.

If you are using CSS3, there is a very interesting version. You can define the tags in the HTML itself via data-attributes , and control the display in CSS.

Your HTML looks like this:

<table>
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>

And your CSS, like this:

td {
  position: relative;        /* para podermos usar absolute no :after */
}

td:after {
  content:attr(data-signal); /* para pegar o sinal direto do HTML     */
  position: absolute;
  z-index:1;                 /* para que o sinal fique sobre o resto  */
  left:100%;                 /* alinhando com o canto direito         */
  top:0;                     /* e superior da célula atual            */
  transform:translate(-50%); /* arrumando entre uma célula e outra    */
  ...                        /* e detalhe o que mais precisar.        */
}

If you prefer compatibility with older browsers, you can omit the data-attributes and simply use class="mais" , class="igual" in td s and in CSS add this:

.mais  {content:"+"}
.igual {content:"="}

In this case, you need to define a CSS context for each symbol used.

Applying in practice

Note that much of the CSS presented here is for styling, the essential parts of the above mentioned technique have already been described above.

.signal td:after {
  content:attr(data-signal);
  display:block;
  position:absolute;
  z-index:1;
  transform:translate(-50%);
  left:100%;
  top:0;
  color:#eef825;
  text-shadow:0 0 2px #169;
}

.signal td,
.signal td:after {
  font-family:Arial,Helvetica,sans-serif;
  font-size:25px;
  font-weight:bold;
  padding:12px;
}

.signal td {
  position:relative;
  background:#29B9C8;
  color:#fff;
}

.signal {
  border-collapse: separate;
  border-spacing:1px;
}

<table class="signal">
  <tr>
    <td data-signal="+">NF-e</td>
    <td data-signal="+">CT-e</td>
    <td data-signal="=">MDF-e</td>
    <td>...</td>
</table>