создайте таблицу, состояющую из трех строк, в каждой строке по одной ячейке. разместите в каждо йячейке по графическому изображению с текстом, отступ от изображения до текста 1см.…

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

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Таблица с изображениями и текстом</title>
</head>
<body>
    <table class="custom-table">
        <tr>
            <td>
                <img src="image1.jpg" alt="Описание изображения 1" class="image">
                <p class="text">Текст к изображению 1</p>
            </td>
        </tr>
        <tr>
            <td>
                <img src="image2.jpg" alt="Описание изображения 2" class="image">
                <p class="text">Текст к изображению 2</p>
            </td>
        </tr>
        <tr>
            <td>
                <img src="image3.jpg" alt="Описание изображения 3" class="image">
                <p class="text">Текст к изображению 3</p>
            </td>
        </tr>
    </table>
</body>
</html>

CSS (styles.css):

body {
    font-family: Arial, sans-serif;
}

.custom-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #f0f0f0; /* Цвет фона таблицы */
}

.custom-table td {
    padding: 20px; /* Отступы ячеек */
    border: 1px solid #ccc; /* Стилизация границы ячеек */
}

.image {
    display: block;
    margin-bottom: 10px; /* Отступ между изображением и текстом */
}

.text {
    margin-left: 1cm; /* Отступ текста от изображения */
    font-size: 16px; /* Размер шрифта */
    color: #333; /* Цвет текста */
}

Пояснения:

1. HTML-структура:

   • Обернуто в стандартные теги для HTML-документа.
   • Используется <table>, чтобы создать таблицу с тремя строками <tr> и ячейками <td>.

2. CSS-стили:

   • Установлен общий шрифт для страницы.
   • Установлены стили для таблицы: ширина 100%, отсутствие двойных границ, установлен цвет фона.
   • Установлены стили для ячеек: отступ и границы.
   • Для изображения установлен отступ снизу, чтобы текст располагался ниже с отступом в 1 см.

3. Изображения и текст:

   • Я использовал атрибут src для изображения, указывая гипотетические имена файлов image1.jpg, image2.jpg, image3.jpg. Вы можете заменить их на реальные url или пути к вашим изображению.
   • Также добавлены текстовые параграфы под изображениями.

Этот код создаст таблицу с изображениями и текстом, как было запрошено. Вы можете настроить и изменить стили по своему усмотрению для достижения желаемого дизайна.