Table element with several lines but different number of cells, how to center? (HTML)

Navigation
1

Well, I have a question, on a table I have 2 tr one with 4 td's and another with 3 It would be possible to transform this:

in a table like this:  butwithouthavingtocreate2tables

Thatis,havingdifferentcellnumbersin2rows,butcenteringcells.

Hereisthecodeforthefirstimage:

<tableclass="bordaredonda">
    <tr>
        <td><img class="ex1" src="icon/Neutros/CaveSpiderFAce.png" ALT="Aranha das Cavernas"></td>
        <td><img class="ex1" src="icon/Neutros/Endermanface.png" ALT="Enderman"></td>
        <td><img class="ex1" src="icon/Neutros/PolarBearFace.png" ALT="Urso Polar"></td>
        <td><img class="ex1" src="icon/Neutros/Snowgolemhead.png" ALT="Golem de Neve"></td>
    </tr>
    <tr>
        <td><img class="ex1" src="icon/Neutros/Spiderface.png" ALT="Aranha"></td>
        <td><img class="ex1" src="icon/Neutros/Vg_face.png" ALT="Golem de Ferro"></td>
        <td><img class="ex1" src="icon/Neutros/Zombiepigmanface.png" ALT="Zombie Pigman"></td>
    </tr>
</table>

Thanks for the attention

    
asked by anonymous 16.02.2017 / 12:18

4 answers

0

Look, with a table I really can not help you, but see if that works for you. 

img {
	width: 50px;
}
.row {
	width: 100%;
	text-align: center;
}
.row div {
	display: inline-block;
	min-width: 100px;
}
<div class="row">
	<div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Aranha das Cavernas"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Enderman"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Urso Polar"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Golem de Neve"></div>
	<div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Golem de Neve"></div>
</div>

<div class="row">
	<div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Aranha das Cavernas"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Enderman"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Urso Polar"></div>
    <div><img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png"ALT="Golem de Neve"></div>
</div>
    
16.02.2017 / 12:45
0

INLINE-BLOCK

Taking advantage of inline-block property I believe that you will achieve the desired result (note that this solution does not apply to tables): 

.linha {
   height:106px;
   text-align: left;
}

.coluna {
   display: inline-block;
   float: left;
   border: 1px solid #444;
   background: #C34;
   width: 20%;
   height:106px;
   box-sizing: border-box;
}
<div class="linha">
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
</div>

<div class="linha">
   <div class="coluna"></div>
   <div class="coluna"></div>
   <div class="coluna"></div>
</div>
    
16.02.2017 / 12:33
0

See if that fits visually to what you want: 

<table>
    <tr>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
    </tr>
    <tr>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
        <td></td>
        <td>a</td>
    </tr>
</table>
    
16.02.2017 / 12:37
0

Maybe with <table> you can not do this.

Try to use flexbox .

Example: 

.caixa {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: space-around;
}
.item {
  width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
  text-align: center;
}
<div class="caixa">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

With flexbox you have more dynamism with your items and regardless of quantity, they will always be aligned.

Just be careful, this specification varies according to the version of each browser:

  • Current nomenclature is display: flex;
  • For older browsers you should use display: flexbox;
  • And for the older ones, it uses display: box;

Here has a more complete guide with all the information about flexbox . Take a look.

    
16.02.2017 / 13:42
How to leave a fixed button at the end of LinearLayout via code (without using xml)? Alternative Cron Job