Табличная верстка - вывод подписи для фото

@RaD1CaL · Регистрация: 28.10.2012

Студворк — интернет-сервис помощи студентам

Как сделать уже строчки где написан текст.
Вот пример как должно быть:

Табличная верстка - вывод подписи для фото

Вот мой html:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<center><table border=0 style="border-width:0px; border-color:white;" width="95%" height=100 align=center cellspacing=3 cellpadding=1>
    <tr><th colspan=4 bgcolor=LightGray><p style="color:grey41">Лучшии фотографии раздела</p></th></tr>
    <tr>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/U3QCAQ"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/4x93Ag"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/8B93Ag"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/_B93Ag"></td>
    </tr>
    <tr bgcolor=gray91 style="border-width:0px; border-color:white;">
        <td align=left style="border-width:px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;Berny</b></p><p style="color:grey41"><font size="2">&nbsp;Соня</p></td>
        <td align=left style="border-width:px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;argon</b></p><p style="color:grey41"><font size="2">&nbsp;Мася</p></td>
        <td align=left style="border-width:px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;fOOg@S</b></p><p style="color:grey41"><font size="2">&nbsp;Чертик</p></td>
        <td align=left style="border-width:px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;Berny</b></p><p style="color:grey41"><font size="2">&nbsp;Лапа</p></td>
    </tr>
    <tr bgcolor=white style="border-width:px; border-color:white;">
        <td colspan=4 style="border-width:0px; border-color:white;">&nbsp;</td>
    </tr>
 
    <tr bgcolor=LightGray style="border-width:px; border-color:white;">
        <td colspan=4 bgcolor=LightGray><p style="color:grey41" align=center style="border-width:0px; border-color:white;"><b>Животные</b></td>
    </tr>
 
<tr>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/U3QCAQ"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/4x93Ag"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/8B93Ag"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/_B93Ag"></td>
    </tr>
    <tr bgcolor=gray91 style="border-width:0px; border-color:white;">
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;Berny</b></p><p style="color:grey41"><font size="2">&nbsp;Соня</p></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;argon</b></p><p style="color:grey41"><font size="2">&nbsp;Мася</p></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;fOOg@S</b></p><p style="color:grey41"><font size="2">&nbsp;Чертик</p></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;Berny</b></p><p style="color:grey41"><font size="2">&nbsp;Лапа</p></td>
    </tr>
<tr>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/U3QCAQ"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/4x93Ag"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/8B93Ag"></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:grey41"><font size="2">10:44 28.10.2012</p><img height=150 width=200 border=1 src="http://u.to/_B93Ag"></td>
    </tr>
    <tr bgcolor=gray91 style="border-width:0px; border-color:white;">
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;Berny</b></p><p style="color:grey41"><font size="2">&nbsp;Соня</p></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;argon</b></p><p style="color:grey41"><font size="2">&nbsp;Мася</p></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;fOOg@S</b></p><p style="color:grey41"><font size="2">&nbsp;Чертик</p></td>
        <td align=left style="border-width:0px; border-color:white;"><p style="color:#A020F0"><font size="4"><b>&nbsp;Berny</b></p><p style="color:grey41"><font size="2">&nbsp;Лапа</p></td>
    </tr>
 
 
</table>
</center>

@Inocs · 30.10.2012, 17:35

Ну можно вообще отказаться от таблицы например. Запихать в div картинку и абзац p в котором будет текст и все. с помощью css задать нужные стили и размеры.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
</head>
<body>
 
    <div id="out">
        <span class="content"><img src="8.jpg"><p>абзац</p></span>
        <span class="content"><img src="8.jpg"><p>абзац</p></span>
        <span class="content"><img src="8.jpg"><p>тут какой-то текст</p></span>
        <span class="content"><img src="8.jpg"><p>тут какойdddddddd-то текст</p></span>
        <span class="content"><img src="8.jpg"><p>тут какой-то текст</p></span>
        <span class="content"><img src="8.jpg"><p>тут какойgfdgdffgdg-то текст</p></span>
        <span class="content"><img src="8.jpg"><p>тут какой-то текст</p></span>
        <span class="content"><img src="8.jpg"><p>тут какойdffgdgfd-то текст</p></span>
        <span class="content"><img src="8.jpg"><p>тут какой-то текст</p></span>
        <span class="content"><img src="8.jpg"><p>тут какойdfgdfggggggg-то текст</p></span>  
    </div>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style type="text/css">
 
#out {
    margin: auto;
    background: #ccf;
    width: 80%;
}
 
.content {
    width: 154px;
    background: #fcc;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    padding:5px;
    margin:5px;
}
/*отступ под картинкой*/
.content img {
    vertical-align: top;
}
.content p {
    margin: 5px 0 0 5px;
 
}
</style>

Добавлено через 7 минут
Пардон, div на автомате написал. Конечно-же должен быть строчный элемент.

Почему все запихано в span, a не в div?
Потому что старые версии internet-explorer-a не позволяют сделать строчно-блочный(inline-) элемент из какого-либо, кроме строчного.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .