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

Question

Good, I have a doubt, in a table I have 2 tr one with 4 td’s and another with 3 It would be possible to transform this:

on a table like this: but without having to create 2 tables

that is, to have different numbers of cells in 2 lines, but to center the cells.

here is the code of the first image:

<table class="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>

Thank you for your attention

Answer 1

INLINE-BLOCK

Taking advantage of the property inline-block I believe 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>

Answer 2

See if this way adapts 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>

Answer 3

Look, with table I can’t really help you, but see if it fits.

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>

Answer 4

Maybe with <table> it is not possible to 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 the 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:

• The current nomenclature is display: flex;
• For older browsers to use display: flexbox;
• And for the older ones, it’s used display: box;

Here has a more complete guide with all the information on the flexbox. Check out.