В этой статье объясняется процедура добавления изображения в ячейку таблицы в HTML.
Как добавить изображение внутри ячейки таблицы в HTML?
HTML « <изображение> Тег используется для вставки изображения в ячейку таблицы.
Синтаксис
Следуйте синтаксису, чтобы встроить изображение в ячейку таблицы:
< тд >< изображение источник знак равно '' все знак равно '' ширина знак равно '' >< / тд >
Здесь:
- “ <тд> Элемент ” указывает на ячейку таблицы, в которую необходимо добавить изображение.
- “ <изображение> Тег используется для указания изображения.
- “ источник Атрибут задает путь к изображению.
- “ все ” означает текст, который будет отображаться на экране в случае, если изображение не загрузится.
- “ ширина ” определяет ширину изображения.
Пример
В файле HTML создайте таблицу, следуя предоставленным инструкциям:
- “ <таблица> ” используется для создания таблицы.
- “
” указывает строку. - “ <й> » корректирует заголовок, где « колспан ” указывает, сколько столбцов должна охватывать ячейка.
- “ <тд> ” создает ячейки таблицы для данных. “ <изображение> ” теги с необходимыми атрибутами вставляются в этот тег для встраивания изображений в ячейку таблицы:
< стол >
< тр >
< й колспан знак равно '3' стиль знак равно 'Размер шрифта: 28px;' >Фрукты и овощи< / й >
< / тр >
< тр >
< й >Имя< / й >
< й стиль знак равно 'ширина: 250 пикселей;' >Картинка< / й >
< й >Фрукты / Овощи< / й >
< / тр >
< тр >
< тд >Яблоко< / тд >
< тд >< изображение источник знак равно '/images/яблоки.jpg' все знак равно 'яблоко' ширина знак равно '200' >< / тд >
< тд >Фрукты< / тд >
< / тр >
< тр >
< тд >морковь< / й >
< тд >< изображение источник знак равно '/images/carrot.jpg' все знак равно 'морковь' ширина знак равно '200' >< / й >
< тд >Овощи< / й >
< / тр >
< тр >
< тд >оранжевый< / й >
< тд >< изображение источник знак равно '/images/оранжевый.jpg' все знак равно 'апельсин' ширина знак равно '200' >< / й >
< тд >Фрукты< / й >
< / тр >
< / стол >Можно заметить, что таблица HTML была успешно создана вместе со встроенными изображениями:
CSS
Теперь мы обсудим свойства CSS, используемые для настройки макета таблицы.
Стиль «Таблица» Элемент
Сначала войдите в « <таблица> » по имени тега и примените следующие свойства:
стол {
выравнивание текста : центр ;
ширина : 800 пикселей ;
обрушение границ : крах ;
прибыль : авто ;
размер шрифта : 20 пикселей ;
}Описание приведенного выше кода приведено ниже:
- “ выравнивание текста » задает выравнивание текста.
- “ ширина ” определяет ширину таблицы.
- “ обрушение границы ” определяет, свернута ли граница или нет.
- “ прибыль » добавляет пространство вокруг стола.
- “ размер шрифта ” определяет размер шрифта текста таблицы.
Стиль «th» и «td» Элемент
й , тд {
граница : 1 пиксель твердый фиолетовый ;
}Здесь « граница » регулирует границу вокруг элементов, указывая значения ширины, стиля и цвета границы.
Вывод
Этот пост посвящен вставке изображений в ячейку таблицы в HTML.
Заключение
Чтобы добавить изображение внутри « <таблица> ', используйте ' <изображение> ” внутри HTML “ <тд> элемент. Элемент «
» указывает « источник ” для предоставления URL-адреса изображения. В частности, чтобы настроить размер изображения, добавьте « высота ' и ' ширина ” внутри тега “
”. В этом блоге показана процедура добавления изображения в ячейку таблицы HTML.