Inne Problem z ułożeniem kodu w "kontakt"

Witam, potrzebuję pomocy z "kontakt". Większość rzeczy jest już zrobiona, ale nie umiem "poukładać" tego w całość.

Tak to powinno wyglądać:
   

A aktualnie wygląda tak:
   


Podsyłam jeszcze fragment z index'u

     <tr>
            <td class="trow1">
                <img src="mpik.png" style="float:left;" />
                <span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp;Właściciel</span><br>    
                   <span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp; mpiK =D</span> <br>    
 <a href="http://forum-cs-snow.cba.pl/private.php?action=send&uid=10"><img src="koperta.png" alt="Prywatna Wiadomość" />Prywatna Wiadomość</a> <br>
                        <a href="http://steamcommunity.com/id/tenstyll4ever/"><img src="steam.png" alt="steam - mpiK =D" /> mpiK =D</a>
            </td>
        </tr>

Z góry dziękuje za każdą pomoc :*

Ten kod to..

W sumie, możesz dodać margin-left: 40px; do a ze steamem.

Pododawałem tą fraze, którą wysłałeś, kod wygląda teraz tak:

<tr>
           <td class="trow1"><br>
               <img src="mpik.png" style="float:left;" />
<span style="margin-left: 5px;"><span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp;Właściciel</span><br>
                 <span style="margin-left: 5px;"> <span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp; mpiK =D</span> <br>
<span style="margin-left: 5px;"><a href="http://forum-cs-snow.cba.pl/private.php?action=send&uid=10"><img src="koperta.png" alt="Prywatna Wiadomość" />Prywatna Wiadomość</a> <br>
                      <span style="margin-left: 55px;"> <a href="http://steamcommunity.com/id/tenstyll4ever/"><img src="steam.png" alt="steam - mpiK =D" /> mpiK =D</a>
           </td>
       </tr>

Wygląda tak:
   

Dążę do:
   

Da radę jeszcze coś z tym zrobić? Wiem, że kod jest beznadziejny, ale w większości napisany przeze mnie, czyli osobę, która w swojej edukacji nie ma NIC związanego z komputerami i uczy się "w celu zabawy" nowych rzeczy.

pozdrawiam

Chodzi Ci o powiększenie czcionki i odstępy?
Jeśli tak to powiększ czcionke poprzez dodanie do span font-size: (LICZBA)px, a odstęp hm.. w tym wypadku użyj <br /> i tak jest syf.

O jezu, wstawiłem złą grafike..Jeszcze raz..

Jest teraz tak:
   

A ja chciałbym coś takiego:
   

<tr>
            <td class="trow1"><br>
                <img src="mpik.png" style="float:left;" />
 <span style="margin-left: 5px;"><span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp;Właściciel</span><br><br>
                  <span style="margin-left: 5px;"> <span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp; mpiK =D</span> <br>
 <span style="margin-left: 5px;"><a href="http://forum-cs-snow.cba.pl/private.php?action=send&uid=10"><img src="koperta.png" alt="Prywatna Wiadomość" />Prywatna Wiadomość</a> <br>
                       <span style="margin-left: 55px;"> <a href="http://steamcommunity.com/id/tenstyll4ever/"><img src="steam.png" alt="steam - mpiK =D" /> mpiK =D</a>
            </td>
        </tr> 


Chyba nie o to mi chodziło :/

   

https://jsfiddle.net/om1wggL1/
Masz pokazaną strukturę, duzo przerabiać nie trzeba.

Wymyśl sobie w głowie strukturę tego, a rozwiązanie niemalże samo przyjdzie.

Nie wiem czy to ja coś robie nie tak czy cos, bo na https://jsfiddle.net/om1wggL1/ widze, jak to wygląda, ale po wklejeniu tego już jest coś nie tak, bo tekst się inaczej układa.
Cały czas coś z tym kombinuje i staneło na:

   <!----------------- KONTAKT START ----------------->
<table border="0" cellspacing="0" cellpadding="5" class="tborder">
<thead>
        <tr>
            <td class="thead">
<center><span>★ Kontakt ★</span></center>
            </td>
        </tr>
</thead>
<tbody>
<tr>
<td class="trow1">
<div class="staff">
 <center> <h4 class="staff__title"><span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp;Właściciel</span></h4></center>
  <div class="staff__avatar">
 <img class="staff__avatar__image" src="http://forum-cs-snow.cba.pl/szymek.png">
  </div>
  <div class="staff__info">
      <p class="staff__info__item"><span style="background-image:url(http://bbhelp.pl/upload/files/gwiazdkired158_58584a7ce3b5b.gif);color:#ff0000; text-shadow: 0px 0px 6px #ff0000;"><i class="fa fa-star fa-spin" aria-hidden="true"></i>&nbsp;SnowWolf</span></p>
      <p class="staff__info__item"><a href="http://forum-cs-snow.cba.pl/private.php?action=send&uid=1"><img src="http://forum-cs-snow.cba.pl/koperta.png"/> Prywatna Wiadomość</a></p>
      <p class="staff__info__item"><a href="http://steamcommunity.com/id/snowwolfik/"><img src="http://forum-cs-snow.cba.pl/steam.png" alt="steam - SnowWolf" /> SnowWolf</a>
  </div>
</tbody>
</div>
<!----------------- KONTAKT END ----------------->

Wygląda tak:

   
Da się to wstawić przy zdjęciu? (Mam nadzieje, że nie namieszałem nic znowu i łatwo to naprawić )

No, mimo wszystko, proponowałbym Ci, abyś dodał CSS:

.staff {
width: 100%;
padding: 0px 2px 9px 4px;
float: right;
background: black;
color: #f0f0f0;
box-sizing: border-box;
}

.staff:after {
display: table;
content: '';
clear: both;
}

.staff__title { color: red; text-shadow: 0 0 5px red; text-align: center; }
.staff__avatar { width: 30%; float: left; }
.staff__avatar__image { max-width: 100%; }
.staff__info { width: 70%; float: right; }
.staff__info__item { margin: 0; }