Дали Практическую работу, по информатике с html & css. В инструкции указан только пример, без объяснения как и что делать. Тз: Нужно сделать таблицу 4х4. Где в первой строке будет 4 фотки, с небольшим отступом между друг другом, а под каждой фоткой надпись(просто описание фотки, к примеру). И так же ещё раз, только ниже. Я могу вставить 4 подряд фотки в строке, но я не знаю, как между ними сделать небольшой отступ, я понимаю, что скорее всего это делается через css. Но я хз. Как поставить конкретную надпись, под конкретной фоткой. Буду очень благодарен за помощь. У кого будет свободное время и желание, обращайтесь в телеграм, там будет легче, думаю
ASCII, Кода по факту то и нет, ведь она просто дала тз, я знаю, что можно через <table></table> и в нём <img src=""> Но когда я видел, что она показывала кому-то как это делать, она делала такой код: <body> <p></p> <table> <tr><img src=""></tr> <tr><img src=""></tr> <tr><img src=""></tr> <tr><img src=""></tr> </table> <table> <tr><a href=""</a></tr> <tr><a href=""></a></tr> <tr><a href=""></a></tr> <tr><a href=""></a></tr> </table> <table> <tr><img src=""></tr> <tr><img src=""></tr> <tr><img src=""></tr> <tr><img src=""></tr> </table> <table> <tr><a href=""></a></tr> <tr><a href=""></a></tr> <tr><a href=""></a></tr> <tr><a href=""></a></tr> </table> </body> Это просто body, без остального
Есть два варианта, либо как ты выше описал сделать это через таблицы, либо использовать гриды и тогда код будет выглядеть так у тебя <div class="grid-container"> <div class="grid-item"> <img src="" alt=""> <span>Просто описание фотки</span> </div> ... </div> HTML <div class="grid-container"> <div class="grid-item"> <img src="" alt=""> <span>Просто описание фотки</span> </div> ... </div> Вставляешь сколько нужно grid-item элементов в контейнер, в твоем случае их должно быть 8 по идее. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 колонки одного размера */ grid-template-rows: repeat(2, 1fr); /* 4 две строки одного размера */ grid-column-gap: 20px; /* Отступ по оси х */ grid-row-gap: 20px; /* Отступ по оси y */ margin: 0 auto; /* Центрирование контейнера по оси х */ } .grid-item { display: flex; flex-direction: column; gap: 10px; /* Отступ между картинкой и текстом */ padding: 20px; text-align: center; } CSS .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 колонки одного размера */ grid-template-rows: repeat(2, 1fr); /* 4 две строки одного размера */ grid-column-gap: 20px; /* Отступ по оси х */ grid-row-gap: 20px; /* Отступ по оси y */ margin: 0 auto; /* Центрирование контейнера по оси х */ } .grid-item { display: flex; flex-direction: column; gap: 10px; /* Отступ между картинкой и текстом */ padding: 20px; text-align: center; } В итоге получаешь таблицу 4х2 с 8 элементами