Wyświetlanie elmentów w <td> - czy wybrany sposób jest właściwy?

Tworzę sobie tabelkę w HTML, ale czy sposób jaki obrałem jest właściwy? Czy może w inny sposób lepiej to ustawić?

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;border:none;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;}
.tg .tg-0ord{display:block}
.tg .tg-s6z2{text-align:center}
</style>

<table class="tg">
  <tr>
    <th class="tg-s6z2">Results</th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"></th>
  </tr>
  <tr>
    <td class="tg-031e">No</td>
    <td class="tg-031e">Competition</td>
    <td class="tg-031e">John</td>
    <td class="tg-031e">Adam</td>
    <td class="tg-031e">Robert</td>
    <td class="tg-031e">Paul</td>
  </tr>
  <tr>
    <td class="tg-031e">1</td>
    <td class="tg-031e">Swimming</td>
    <td class="tg-0ord">1:30</td>
    <td class="tg-0ord">2:05</td>
    <td class="tg-0ord">1:15</td>
    <td class="tg-0ord">1:41</td>
  </tr>
  <tr>
    <td class="tg-031e">2</td>
    <td class="tg-031e">Running</td>
    <td class="tg-0ord">15:30</td>
    <td class="tg-0ord">14:10</td>
    <td class="tg-0ord">15:45</td>
    <td class="tg-0ord">16:00</td>
  </tr>
  <tr>
    <td class="tg-031e">3</td>
    <td class="tg-031e">Shooting</td>
    <td class="tg-0ord">70%</td>
    <td class="tg-0ord">55%</td>
    <td class="tg-0ord">90%</td>
    <td class="tg-0ord"> <img src="img/paypallogo.png" alt="PayPal">
	<img src="img/mastercardlogo.png" alt="MasterCard">
	</td>
  </tr>
</table> 

Druga sprawa jak ustawić elementy w td aby nie wyświetlały się tak:

ale tak jeden pod drugim

Może mi ktoś poprawić kod i oddać odpowiednie kod, który to zrealizuje?

#quote
"Use

.one-word-per-line {
    word-spacing: <parent-width>; 
}

where <parent-width> is the <font color="black">width</span> of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with <font color="red">Chrome</span>/<font color="red">FF</span>/<font color="red">Opera</span>/<font color="red">IE7+</span> (and probably even IE6 since it's supporting word-spacing as well)."

A możesz to zaprezentować w kodzie na przykładzie bo coś nie potrafię tego zaimplementować.