You see, I have the following html code (I have removed part of the code so you do not get lost):
{% load staticfiles %}
<html>
<body>
<h1>Lista de animales</h1>
<table>
{% for alfa in animales %}
<td>
<img src="{% static alfa.foto %}" />
<a href='http://127.0.0.1:8000/datos_animal/{{alfa.id}}'>{{alfa.id}}. {{alfa.ncomun}}:<br>{{alfa.ncientifico}}</a>
</td>
{% endfor %}
</table>
</body>
</html>
What looks like this:
And I would like that, better than that, that when I reached the "edge" of the screen I would continue below. Something like in this sketch:
I update: I have provisionally solved the problem. HTML code:
<table>
{% for alfa in animales %}
<td>
<img src="{% static alfa.foto %}" />
<br>
<a href='http://127.0.0.1:8000/datos_animal/{{alfa.id}}'>{{alfa.id}}. {{alfa.ncomun}}:<br>{{alfa.ncientifico}}</a>
</td>
{% if forloop.counter|divisibleby:8 %}
<tr/>
{% endif %}
{% endfor %}
</table>
But there is a problem: The screen of my PC is large, so I can make it look good on the images, but on a smaller screen there may be photos that pass to the other side of the screen. The solution is that the divisibleby instead of receiving a fixed value, for example, the width of the background between 250. What variable in html gets the size of the screen?