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

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

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Таблица с изображениями и текстом</title>
    <link rel="stylesheet" href="styles.css"> <!-- Подключение CSS -->
</head>
<body>
    <table class="custom-table">
        <tr>
            <td class="cell">
                <img src="image1.jpg" alt="Изображение 1">
                <p>Текст под изображением 1</p>
            </td>
        </tr>
        <tr>
            <td class="cell">
                <img src="image2.jpg" alt="Изображение 2">
                <p>Текст под изображением 2</p>
            </td>
        </tr>
        <tr>
            <td class="cell">
                <img src="image3.jpg" alt="Изображение 3">
                <p>Текст под изображением 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: #f9f9f9; /* Цвет фона таблицы */
}

.cell {
    border: 1px solid #ccc; /* Параметры границы ячейки */
    padding: 10px; /* Отступы внутри ячейки */
    text-align: center; /* Выравнивание текста по центру */
}

.cell img {
    display: block; /* Принуждаем изображение в новую строку */
    margin: 0 auto 10px auto; /* Центрирование изображения с отступом снизу */
}

.cell p {
    margin-top: 1cm; /* Отступ верхний текст */
}

Пояснение решения:

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

   • Создана таблица <table>, состоящая из трех строк <tr>. В каждой строке есть одна ячейка <td>, содержащая изображение <img> и текст в параграфе <p>.
   • Изображения замените на свои, указав правильные URL или пути к ним.

2. CSS-стили:

   • Используется базовый шрифт Arial для всего документа.
   • Таблица имеет белый фон и границы для лучшего отображения.
   • Ячейки имеют отступы (padding) для комфорта, а также рамку.
   • Изображения центрируются и имеют отступ снизу, чтобы текст был ниже на 1 см.

Заключение:

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