Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?» . В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.
Как создать таблицу используя HTMLHTML-таблицы создаются в четыре шага.
1. На первом шаге в html-коде с помощью парного тега
2. На втором шаге формируем строки таблицы, помещая парные теги
3. Далее, на третьем шаге формируем ячейки таблицы с помощью парных тегов
4. Ну и на последнем шаге помещаем внутрь элементов и
| Ячейка 1-1 | Ячейка 1-2 | Ячейка 1-3 |
| Ячейка 2-1 | Ячейка 2-2 | Ячейка 2-3 |
Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ.
Текст, который необходимо поместить внутрь ячеек, заключать в необязательно, но, если текст большой, его можно разбить на абзацы, применив тег
Если понадобиться как-то оформить вставляемый текст, то можно использовать .
Кроме текста мы можем помещать в ячейки картинки с помощью тега :
В качестве содержимого ячейки может даже выступать другая таблица. В этом случае создание вложенной таблицы ничем не отличается от создания обычной таблицы. Просто между тегами
При создании таблиц необходимо учитывать некоторые правила:
- для создания таблицы используется только тег
;
- тег
может находиться только внутри тега ;
- теги
и могут находиться только внутри тега , любое другое содержимое тега игнорируется браузером; - содержимое таблицы(текст или картинки) может находиться только в тегах
и ; - ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал);
- таблица относится к блочным элементам web-страницы;
- размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось;
- между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ;
- текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру;
- границы вокруг таблицы и ее ячеек по умолчанию не рисуются.
Заголовок таблицыНачнем с парного тега , который задает таблице заголовок. Текст заголовка помещается внутрь этого тега, а тот должен находится внутри тега
. Причем без разницы в каком месте html-кода таблицы поместить тег , браузер все равно отобразит заголовок над таблицей и выровняет по ее центру. Но обычно тег помещают сразу после открывающего тега
:
Это таблица
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2
Отображение:
Секции таблицыТаблицу html можно логически разбить на части — секции. Всего существует три вида секций:
- секция заголовка , в которую помещают ячейки заголовка, которые формируют шапку таблицы;
- секция тела , в которой располагают ячейки с основными данными;
- секция завершения , в которую помещают ячейки с итоговыми данными.
Секция заголовка таблицы формируется с помощью парного тега . Причем допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в html коде сразу после тега
.
Секцию тела создают парным тегом . Одна html таблица может содержать несколько секций тела, что позволяет создавать структурные блоки к которым могут применяться единые стили оформления.
Секция завершения формируется парным тегом и в пределах одного контейнера
может быть только одна.
Все эти парные теги должны содержать теги
, которые формируют строки, относящиеся к соответствующим секциям:
Объединение ячеек таблицы
Столбец 1 Столбец 2 Столбец 3
Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Итог 1 Итог 2 Итог 3
Осталось рассказать о самой важной возможности таблиц — объединении ячеек. Для объединения нескольких ячеек в одну используются атрибуты colspan и rowspan тегов
и . Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали:
1.1 1.2-1.3
2.1 2.2 2.3
3.1-4.1 3.2 3.3
4.2 4.3
Результат примера:
1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция
заменяет две ячейки, поэтому в следующей строке должно быть два тега , либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки. Пример неправильного html-кода при объединении ячеек:
ячейка 1.1 ячейка 1.2
ячейка 2.1 ячейка 2.2
И результат отображения в браузере:
Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка.
Атрибуты тегаВ этом посте мы уже столкнулись с одним атрибутом тега
. С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки.
Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом
. Давайте их рассмотрим.
Атрибут align — задает выравнивание таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left.
Атрибут background , который задает фоновый рисунок к таблице. В качестве значения принимает адрес файла с изображением.
bgcolor — устанавливает цвет фона таблицы. Можно использовать совместно с атрибутом background.
Атрибут bordercolor задает цвет рамки таблицы.
Cellpadding — определяет расстояние между границей ячейки и ее содержимым . Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число.
Cellspacing — задает расстояние между внешними границами ячеек .
На этом рассказывать о том как вставить таблицу в html страницу я закончу, только подведу итоги:
- для вставки таблицы используются теги
— обозначение таблицы,
— добавление строки и — вставка ячейки; - таблица представляет из себя блочные элемент web-страницы;
- в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы;
- таблица может содержать три вида секций: секция заголовка — , секция завершения и секция тела — ;
- для объединения ячеек используем атрибуты тега
colspan и rowspan. На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч!
HTML-изображения добавляются на веб-страницы с помощью тега
. Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
С помощью HTML-тегов и можно создавать карты-изображения с активными областями.
Вставка изображений в HTML-документ 1. ТегЭлемент
представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент
является строчным, то рекомендуется располагать его внутри блочного элемента, например,
Или .
Тег
имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для тега
доступны следующие атрибуты:
Таблица 1. Атрибуты тега
1.1. Адрес изображенияАтрибут Описание, принимаемое значение alt Атрибут alt добавляет альтернативный текст для изображения. Выводится на месте появления изображения до его загрузки или при отключенной графике, а также выводится всплывающей подсказкой при наведении курсора мыши на изображение.
Синтаксис: alt="описание изображения" .crossorigin Атрибут crossorigin позволяет загружать изображения с ресурсов другого домена с помощью CORS-запросов. Изображения, загруженные в холст с помощью CORS-запросов, могут быть использованы повторно. Допускаемые значения:
anonymous — Cross-origin запрос выполняется с помощью HTTP-заголовка, при этом учетные данные не передаются. Если сервер не даёт учетные данные серверу, с которого запрашивается контент, то изображение будет испорчено и его использование будет ограничено.
use-credentials — Cross-origin запрос выполняется с передачей учетных данных.
Синтаксис: crossorigin="anonymous" .height Атрибут height задает высоту изображения. Может указываться в px или % .
Синтаксис: height: 300px .ismap Атрибут ismap указывает на то, что картинка является частью изображения-карты, расположенного на сервере (изображение-карта — изображение с интерактивными областями). При нажатии на изображение-карту координаты передаются на сервер в виде строки запроса URL-адреса. Атрибут ismap допускается только в случае, если элемент является потомком элемента с действительным атрибутом href .
Синтаксис: ismap .longdesc URL расширенного описания изображения, дополняющее атрибут alt .
Синтаксис: longdesc="http://www.example.com/description.txt" .src Атрибут src задает путь к изображению.
Синтаксис: src="flower.jpg" .sizes Задаёт размер изображения в зависимости от параметров отображения. Работает только при заданном атрибуте srcset . Значением атрибута является одна или несколько строк, указанных через запятую. srcset Создаёт список источников для изображения, которые будут выбраны, исходя из разрешения экрана. Может использоваться вместе или вместо атрибута src . Значением атрибута является одна или несколько строк, разделенных запятой. 
usemap Атрибут usemap определяет изображение в качестве карты-изображения. Значение обязательно должно начинаться с символа # . Значение ассоциируется со значением атрибута name или id тега и создает связь между элементами и . Атрибут нельзя использовать, если элемент является потомком элемента или .
Синтаксис: usemap="#mymap" .width Атрибут width задает ширину изображения. Может указываться в px или % .
Синтаксис: width: 100% .Адрес изображения может быть указан полностью (абсолютный URL), например:
url(http://anysite.ru/images/anyphoto.png)Или же через относительный путь от документа или корневого каталога сайта:
url(../images/anyphoto.png) — относительный путь от документа,
url(/images/anyphoto.png) — относительный путь от корневого каталога.Это интерпретируется следующим образом:
1.2. Размеры изображения
../ — означает подняться вверх на один уровень, к корневому каталогу,
images/ — перейти к папке с изображениями,
anyphoto.png — указывает на файл изображения.Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файловФормат JPEG (Joint Photographic Experts Group) . Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
Формат GIF (Graphics Interchange Format) . Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
Формат PNG (Portable Network Graphics) . Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
Формат APNG (Animated Portable Network Graphics) . Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
Формат SVG (Scalable Vector Graphics) . SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
Формат BMP (Bitmap Picture) . Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
Формат ICO (Windows icon) . Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
2. ТегТег служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.
Для тега доступен атрибут name , который задает имя карты. Значение атрибут name для тега должно соответствовать имени в атрибуте usemap элемента
:
...
Элемент содержит ряд элементов , определяющих интерактивные области в изображении карты.
3. ТегТег описывает только одну активную область в составе карты изображений на стороне клиента. Элемент не имеет закрывающего тега. Если одна активная область перекрывает другую, то будет реализована первая ссылка из списка областей.
Таблица 2. Атрибуты тега
4. Пример создания карты-изображенияАтрибут Краткое описание alt Задает альтернативный текст для активной области карты. coords Определяет позицию области на экране. Координаты задаются в единицах длины и разделяются запятыми:
для круга — координаты центра и радиус круга;
для прямоугольника — координаты верхнего левого и правого нижнего углов;
для многоугольника — координаты вершин многоугольника в нужном порядке, также рекомендуется указывать последние координаты, равные первым, для логического завершения фигуры.download Дополняет атрибут href и сообщает браузеру, что ресурс должен быть загружен в момент, когда пользователь щелкает по ссылке, вместо того, чтобы, например, предварительно открыть его (как PDF-файл). Задавая имя для атрибута, мы таким образом задаем имя загружаемому объекту. Разрешается использовать атрибут без указания его значения. href Указывает URL-адрес для ссылки. Может быть указан абсолютный или относительный адрес ссылки. hreflang Определяет язык связанного веб-документа. Используется только вместе с атрибутом href . Принимаемые значения — аббревиатура, состоящая из пары букв, обозначающих код языка. media Определяет, для каких типов устройств файл будет оптимизирован. Значением может быть любой медиа-запрос. rel Дополняет атрибут href информацией об отношении между текущим и связанным документом. Принимаемые значения:
alternate — ссылка на альтернативную версию документа (например, печатную форму страницы, перевод или зеркало).
author — ссылка на автора документа.
bookmark — постоянный URL-адрес, используемый для закладок.
help — ссылка на справку.
license — ссылка на информацию об авторских правах на данный веб-документ.
next/prev — указывает связь между отдельными URL. Благодаря этой разметке Google может определить, что содержание данных страниц связано в логической последовательности.
nofollow — запрещает поисковой системе переходить по ссылкам на данной странице или по конкретной ссылке.
noreferrer — указывает, что переходе по ссылке браузер не должен посылать заголовок HTTP-запроса (Referrer), в который записывается информация о том, с какой страницы пришел посетитель сайта.
prefetch — указывает, что целевой документ должен быть кэширован, т.е. браузер в фоновом режиме загружает содержимое страницы к себе в кэш.
search — указывает, что целевой документ содержит инструмент для поиска.
tag — указывает ключевое слово для текущего документа.shape Задает форму активной области на карте и ее координаты. Может принимать следующие значения:
rect — активная область прямоугольной формы;
circle — активная область в форме круга;
poly — активная область в форме многоугольника;
default — активная область занимает всю площадь изображения.target Указывает, куда будет загружен документ при переходе по ссылке. Принимает следующие значения:
_self — страница загружается в текущее окно;
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.type Указывает MIME-тип файлов ссылки, т.е. расширение файла. 1) Размечаем исходное изображение на активные области нужной формы. Координаты областей можно вычислить с помощью программы для обработки фотографий, например, Adobe Photoshop или Paint .
Рис. 1. Пример разметки изображения для создания карты
2) Задаем имя карты, добавив его в тег с помощью атрибута name . Это же значение присваиваем атрибуту usemap тега
.
Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers">
Рис. 2. Пример создания карты-изображения, при нажатии курсора мыши на цветок осуществляется переход на страницу с описаниемД ля вставки изображений в HTML применяются два основных формата GIF и JPEG. Формат GIF может хранить внутри себя простейшую анимацию (динамические баннеры), JPEG отлично подходит для изображений с большим количеством цветов, например фотографий. Третьим форматом для web-графики является формат PNG, но он не получил широкого применения в web-дизайне. Любое изображение в форматах GIF или JPEG вставляется на web-страницу при помощи тега , закрывающего тега нет.
Атрибут SRCПосредством атрибута src задается адрес (URL) файла с изображением, т.е. браузер находит нужное изображение в каталоге сайта по пути (адресу URL), прописанному в этом атрибуте. Для удобства все изображения сайта находятся в отдельной папке, обычно с именем image . Для примера возьми любое изображение, лучше небольшого формата, и сохрани в созданной папке image, с именем primer.jpg . Далее мы будем обращаться к ней для обучения.
Ну что, попробуем вставить картинку на страницу? Пишем код (путь - URL, прописывается в зависимости от местонахождения папки с изображениями):
src="image/primer.jpg" >
То, без чего не создать сайт: ∼ ∼Инструкция
Первоначально необходимо создать таблицу, если ее еще нет. Это действие совершается в атрибуте . Для этого используются теги (закрывающий тег обязателен):
- таблица;
- строка;
- колонка. Основные дополнительные атрибуты:
Border – граница;
Bordercolor – цвет рамки;
Width – ширина;
Height – высота.Синтаксис таблицы 2X2 без рамки и левосторонним/правосторонним выравниванием содержимого:
Содержимое 1-й ячейки
Содержимое 2-й ячейки
Содержимое 3-й ячейки
Содержимое 4-й ячейки Картинку нужно прописывать после тега
. Если вставить изображение в первую ячейку таблицы, представленной выше, то получится:
Содержимое 2-й ячейки
Содержимое 3-й ячейки
Содержимое 4-й ячейки Дополнительные атрибуты:
Width – ширина;
Height – высота;
Alt - альтернативный текст, который будет отображаться у пользователя, если у него отключена функция просмотра картинок;
Align – выравнивание по горизонтали;
Valign – выравнивание по вертикали;
Title – подпись к изображению.Использовать изображение можно в качестве ссылки. Для этого его достаточно облачить в соответствующий тег:
В контексте таблицы это будет выглядеть так:
Содержимое 2-й ячейки
Содержимое 3-й ячейки
Содержимое 4-й ячейки Дополнительные возможности изображений.
1. Смена картинки на цвет при наведении на нее мышью и после смены местоположения курсора:
onMouseOver="this.style.background="#номер цвета"" onMouseOut="this.style.background="#номер цвета""2. Смена картинки на другое изображение при наведении мышью:
onmouseover="this.src="images/1.gif"" onmouseout="this.src="images/2.gif""3. Вставка вращающейся карусели из картинок в ячейку таблицы (значения можно менять):
// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // true or false
var Car_NoOfSides=6; // must be 4, 6, 8 or 12/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""// NOTE No comma after last line
);/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;Function Carousel(){
if(document.getElementById){
for(i=0;i
Статьи по темеЕще статьи из этой рубрики
- тег
