размещение изображений в строке таблицы

Question

Iam очень слабая, когда дело доходит до html/css.

У меня есть динамическое число изображений, вызывается из базы данных .3 Изображения отображаются в строке за раз. Это мой HTML/CSS для таблицы:

<style> 
    table { 
     border-collapse: collapse; 
     table-layout: fixed; 
     max-width: 100% 
    } 
    figure { 
     display: block; 
     margin-before: 1em; 
     margin-after: 1em; 
     margin-start: 40px; 
     margin-end: 40px; 
    } 
    figure img { 
     padding: 5px; 
     background: #fff; 
    } 
    figcaption { 
     padding: 5px; 
     font-family: 'Cherry Swash', cursive; 
     font-size: 1em; 
     font-weight: 700; 
     border: none; 
     background: transparent; 
     word-wrap:normal; 
     text-align: center; 
    } 
    a { 
     text-decoration:none;  
    } 
</style> 

<table> 
    <tr><td align='left'> 
     <a href="works.php" title="Click To See More Work"> 
      <figure> 
       <img src="img/11.jpg" alt="Picture 2" title="Picture 2"> 
       <figcaption> 
        project name 
        <br> Sitting stick figures hunched over their laptops! 
        See <a href="#">more</a>. 
       </figcaption> 
      </figure> 
     </a> 
    </td></tr> 
</table> 

моего требование таково, что, когда четвертое изображение будет называться, он должен автоматически попадать в следующей строке Незлых советах, как идти об этом .о там любой другой способ делать то, что я делаю лучше.

Answer 1

Самый простой способ сделать это, используя язык на стороне сервера. Если вы используете PHP, вы можете сделать это таким образом

<table> 
    <tr> 
    <?php for(int i=0; i<number_of_images; i++){ ?> 
     <td align='left'> 
     <a href="works.php" title="Click To See More Work"> 
     <figure> 
      <img src="img/11.jpg" alt="Picture 2" title="Picture 2"> 
      <figcaption> 
       project name<br>Sitting stick figures hunched over their laptops! See <a href="#">more</a>. 
      </figcaption> 
     </figure> 
     </a> 
    </td> 
    <?php 
     if(i%3 == 0){ echo "</tr><tr>";} 
    } 
    ?> 
    </tr> 
    </table>