Table CSS Styling (layout)

Question

I'm currently working on a small website and now i got a few problems. My css is really worse, i got nearly zero clue how to do something.

On the right hand site of this website.

http://s526367159.online.de/reclaim/website/home-one-page/

You can see a box with some pictures in it. That doesnt look really good. The easiest solution in my mind would be adding a .png picture created in photoshop in that box but i would like to do it with .css since i spend a lot of time on getting that stuff working.

My question now is, is it possible to add borders and making the small pictures a bit more spaced to each other without adding tons of code to each ""?

This is the basic code.

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;}
</style>
<table class="tg">
  <tr>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" /></a></td>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" /></td>
  </tr>
  <tr>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" /></a></td>
    <td class="tg-031e"><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" /><img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" /></td>
  </tr>
</table>

would really appreciate some help here.

Answer 1

You can add a new line to your styles similar to this

.tg img{margin: 5px; border: 1px solid red;}

This will change the style of all img tags in that table.

Answer 2

Try adding this rule:

.md-tabs .tab-content img{
   margin: 3px;
   border: 1px solid white;
}

Change pixels and color to whatever you want.

If you want your css rule to be more specific, just use the immediate parents.

Answer 3

You have a broken in the middle of your code.

What you could do is simply add a class with a little bit of styling to it and apply it to each image.

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;margin:0px auto;}
.tg td{border-style:solid;border-color:#2a1c14;border-width:1px;overflow:hidden;}
.spacing {padding:3px;}
</style>
<table class="tg">
<tr>
    <td class="tg-031e ">
        <img src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/IMAG0587.jpg" width="42" height="42" />
    </td>
    <td class="tg-031e">
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_blut_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_frost_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/dk_unheilig_grau.jpg" width="32" height="32" />
    </td>
</tr>
<tr>
    <td class="tg-031e">
        <img  src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/07/druide.jpg" width="42" height="42" />
    </td>
    <td class="tg-031e">
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_w%C3%A4chter_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_feral_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_eule_grau.jpg" width="32" height="32" />
        <img class="spacing" src="http://s526367159.online.de/reclaim/website/wp-content/uploads/2014/10/druide_baum_grau.jpg" width="32" height="32" />
    </td>
</tr>

Or you could do something like this

.md-tabs .tab-content img{
 padding: 3px;
}