Html вставка рисунков и таблиц. Почти стандартный режим

Сайт о телевидении » Тарифы » Html вставка рисунков и таблиц. Почти стандартный режим

Html вставка рисунков и таблиц. Почти стандартный режим

Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.

Создание таблицы

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

Для добавления таблицы на веб-страницу используется тег

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

. Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега

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

и нет.

Пример 12.1. Создание таблицы

Тег TABLE

Ячейка 1 Ячейка 2

Ячейка 3

Ячейка 4

Порядок расположения ячеек и их вид показан на рис. 12.1.

Инструкция

Первоначально необходимо создать таблицу, если ее еще нет. Это действие совершается в атрибуте . Для этого используются теги (закрывающий тег обязателен):

- таблица;
- строка;

- колонка.

Основные дополнительные атрибуты:
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

ряд 2 ячейка 1

ряд 2 ячейка 2

Результат:

Как сделать фон таблицы?

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

BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.

Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге

. А если только к определенной ячейке, тогда в тег

Для лучшего понимания посмотрите пример:

Таблицы в HTML

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

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

И напоследок расскажу еще о двух полезных атрибутах .

В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты:

CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.

Таблицы в HTML

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

CELLSPACING –расстояние между границами соседних ячеек.

Таблицы в HTML

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Результат:

ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

Фух, рассказал!
Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы . А вам, рекомендую хорошо закрепить материал.
Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html.
Всего вам хорошего!
Спасибо, что посетили мой блог

Статьи по теме:

Варианты переноса строк Как перейти на строчку ниже на клавиатуре Надоела стандартная раскладка клавиш? Приложения для Android: обучающие программы для детей Power bi отчет с 1с. BI - системы. Критерии для оценки качества IT-решения Почему не работают USB порты на компьютере?

Новое:

Как Zello рация для Андроид помогает водителям

Рейтинг производительности процессоров от «Интел

Что такое Информационные технологии (IT или ИТ)?

Панорама Джексон (Вайоминг)

Battle Carnival не запускается

Телефон Lenovo не включается