Как сделать большую таблицу в html. Почти стандартный режим

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

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

Для всех элементов таблицы доступны , а также собственные атрибуты.

Создание таблиц в HTML
  • Содержание:
    • 1. Как создать таблицу

    Таблица создаётся при помощи парного тега

    Рис.1. Внешний вид таблицы без форматирования css-свойствами

    По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border:

    /* внешние границы таблицы серого цвета толщиной 1px */ table {border: 1px solid grey;} /* границы ячеек первого ряда таблицы */ th {border: 1px solid grey;} /* границы ячеек тела таблицы */ td {border: 1px solid grey;}

    Промежутки между ячейками таблицы убираются с помощью свойства table {border-collapse: collapse;} .

    Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width:

    /* сделает ширину таблицы равной ширине блока контейнера, в котором она находится */ table {width: 100%;} /* задаст фиксированную ширину для таблицы */ table {width: 600px;}

    Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения:
    padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду. Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.

    2. Как создать строки (ряды) таблицы

    Строки или ряды таблицы создаются с помощью тега

    . Количество горизонтальных строк таблицы определяется количеством парных тегов . 3. Как сделать ячейку заголовка столбца таблицы создаёт заголовок столбца — специальную ячейку, текст в которой выделяется полужирным. Количество ячеек заголовка определяется количеством пар тегов 4. Как сделать ячейку тела таблицы создаёт ячейки таблицы, внутрь которых помещаются данные таблицы. Парные теги , расположенные в одном ряду, определяют количество ячеек в строке таблицы. Количество пар ячеек должно быть равно количеству пар ячеек . Для элемента доступны атрибуты colspan , rowspan , headers . 5. Как добавить подпись (заголовок) к таблице

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

    6. Группирование строк и столбцов таблицы

    Создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки. Добавляется непосредственно после тегов Рис. 2. Выделение столбцов таблицы другим цветом с использованием тегов и

    7. Группировка разделов таблицы

    Элемент создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементами

    и для указания каждой части таблицы.

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

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

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

    и .

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

    Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.


    Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan 9. Атрибуты элементов таблицы
    Таблица 1. Атрибуты элементов таблицы Атрибут Описание, принимаемое значение
    colspan Количество ячеек в строке для объединения по горизонтали.
    headers Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров.
    ...
    ...
    Принимаемые значения: список имен ячеек, разделенных пробелами; эти имена должны быть присвоены ячейкам через их атрибут id .
    rowspan Количество ячеек в столбце для объединения по вертикали.
    Возможные значения: число от 1 до 999.
    span Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1.

    Принимаемые значения: любое целое положительное число.
    10. Пример создания таблицы
    Рис. 4. Создание меню ресторана с помощью HTML-таблицы

    Разметка HTML

    Меню ресторана "Ромашка" Кухня Холодные блюда Горячие блюда Десерты
    Салаты Закуски Первые блюда Вторые блюда
    Русская Винегрет Язык с хреном Щи с квашеной капустой Вареники с картошкой Печеные яблоки с медом
    Оливье Студень говяжий Рассольник домашний Караси запеченые в сметане Блинчатый пирог
    Сельдь под "шубой" Судак заливной Мясная солянка Котлеты "Пожарские" Пирожное "Картошка"
    Испанская Севиче из гребешков Эмпанадас Хлебный суп с чесноком Паэлья с морепродуктами Чуррос
    Тимбал из авокадо и тунца Ахотомате Астурийская фабада Свиное раксо Альмойшавена
    Фасоль с ветчиной Чанфайна Рыбный суп с манными клецками Тортилья картофельная Бунуэлос
    Французская Вогезский салат Рийет из курицы Баклажанный крем-суп "Ренуар" Картофель огратен Бриоши
    Салат "Панзанелла" Делисьез из сыра Французский тыквенный суп Гратин из птицы Лигурийский лимонный пирог
    Тар-тар Маринованный лосось Суп "Конти" Тартифлетт Саварен "Триумф"

Инструкция

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

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

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

ряд1 ячейка2
ряд 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.
Всего вам хорошего!
Спасибо, что посетили мой блог

Похожие статьи