Table html что это

1.7. HTML-таблицы

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

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

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

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

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

1. Как создать таблицу

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

текст заголовка	текст заголовка
данные	данные

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

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

Промежутки между ячейками таблицы убираются с помощью свойства table .

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

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

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

3. Как сделать ячейку заголовка столбца таблицы

4. Как сделать ячейку тела таблицы

5. Как добавить подпись (заголовок) к таблице

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

, вне строки или ячейки.

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

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

Рис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и

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

Элемент

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

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

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

, перед элементами

и

.

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

и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

8. Как объединить ячейки таблицы

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

Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan

Источник

HTML таблицы основы

Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:

Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.

Как работает таблица?

Personal pronouns

Субъект	Объект
Единствен. числ.	1 Лицо		Я	меня
	2 Лицо		ты	тебя
	3 Лицо	♂	он	его
		♀	она	её
		o	оно	его
Множ.числ.	1 Лицо		мы	нас
	2 Лицо		вы	вас
	2 Лицо		они	их

Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.

Оформление таблиц

Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.

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

Примечание: Посмотрите также таблицу personal_pronouns с применённым к ней стилем, чтобы получить представление о том, как она выглядит.

Когда не надо использовать таблицы HTML?

HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.

Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :

Упражнение: ваша первая таблица

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

Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент

создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.

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

Hi, I’m your first cell.	I’m your second cell.	I’m your third cell.	I’m your fourth cell.
Second row, first cell.	Cell 2.	Cell 3.	Cell 4.

Примечание: Этот пример можно также найти на GitHub под названием simple-table.html (see it live also).

«>» title=»Permalink to Добавление заголовков с помощью элементов

«>Добавление заголовков с помощью элементов

Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как «Person» и «Age» в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:

Теперь как выглядит таблица:

Knocky	Flor	Ella	Juan
Breed	Jack Russell	Poodle	Streetdog	Cocker Spaniel
Age	16	9	10	5
Owner	Mother-in-law	Me	Me	Sister-in-law
Eating Habits	Eats everyone’s leftovers	Nibbles at food	Hearty eater	Will eat till he explodes

Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.

Упражнение: заголовки

Попробуем улучшить эту таблицу.

Примечание: Законченный пример можно найти на dogs-table-fixed.html в GitHub (посмотрите живой пример).

Для чего нужны заголовки?

Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.

Примечание: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.

Заголовки дают дополнительное преимущество — вместе с атрибутом scope (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно

Слияние нескольких строк или столбцов

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

Исходная разметка выглядит так:

Но результат не такой, как хотелось бы:

Animals
Hippopotamus
Horse	Mare
Stallion
Crocodile
Chicken	Cock
Rooster

Воспользуемся colspan и rowspan чтобы улучшить таблицу.

Примечание: Законченный пример можно посмотреть в animals-table-fixed.html на GitHub (живой пример).

Стилизация столбцов

Возьмём простой пример:

Data 1	Data 2
Calcutta	Orange
Robots	Jazz

Мы определяем два «стилизующих столбца». Мы не применяем стиль к первому столбцу, но пустой элемент ввести необходимо — иначе к первому столбцу не будет применён стиль.

Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент с атрибутом span, таким образом:

Упражнение: colgroup и col

Теперь попробуйте сами.

Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.

Mon	Tues	Wed	Thurs	Fri	Sat	Sun
1st period	English	German	Dutch
2nd period	English	English	German	Dutch
3rd period	German	German	Dutch
4th period	English	English	Dutch

Заново создайте таблицу, проделав указанные ниже действия.

Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в timetable-fixed.html (посмотрите живой пример).

Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.

Источник

HTML Таблицы

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

Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.

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

Пример: Простая HTML-таблица

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 2×1	Ячейка 2×2	Ячейка 2×3
Ячейка 3×1	Ячейка 3×2	Ячейка 3×3

Граница таблицы

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

Пример: Применение свойства border

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 2×1	Ячейка 2×2	Ячейка 2×3
Ячейка 3×1	Ячейка 3×2	Ячейка 3×3

Свойство border следует устанавливать как для самой таблицы так и для её ячеек и .

Одинарная рамка для таблицы

По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:

Пример: Применение свойства border-collapse

Заголовок 1	Заголовок 2	Заголовок 3
Ячейка 2×1	Ячейка 2×2	Ячейка 2×3
Ячейка 3×1	Ячейка 3×2	Ячейка 3×3

Поля и интервалы таблицы

По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.

Пример использования padding и border-spacing:

Пример: Применение свойств padding и border-spacing

padding — это расстояние между содержимым ячейки и ее границей (желтый цвет)

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

border-spacing — это расстояние между ячейками (зеленый цвет)

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

Примечание: Если к таблице применено свойство border-collapse: collapse, то интервал ячеек (border-spacing) не сработает.

Ширина таблицы

Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:

Пример: Применение свойства width

Объединение ячеек (colspan и rowspan)

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

Объединение столбцов

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

Пример: Применение атрибута colspan

Объединение строк

Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:

Пример: Применение атрибута rowspan

Заголовок таблицы

Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.

Пример: Применение тега

Это заголовок таблицы

Ячейка на две строки	Ячейка 1	Ячейка 2
	Ячейка 3	Ячейка 4

Теги группирования элементов таблиц

Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.

Пример: Теги , и

Это шапка таблицы
Это подвал таблицы
Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4

Объединение столбцов

Напиште разметку для таблицы, изображенной на рис.1.

Объединение строк

Напиште разметку для таблицы, изображенной на рис.1.

Убрать двойную рамку таблицы

По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.

Широкая таблица

Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.

Заголовок таблицы

Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.

Поле внутри ячеек

Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.

Объединение строк

Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.

Источник

Table html что это

HTML-таблицы используются для логического структурирования контента. Они состоят из строк и ячеек которые можно объединять. В этой статье вы найдете подробное руководство по созданию HTML-таблиц с нуля. Материал рассчитан на новичков — школьников и студентов первых курсов. Рассмотрим как создаются таблицы в HTML.

Если вы не хотите изучать материал, а хотите просто создать таблицу, вы можете воспользоваться генератором html-таблиц.

Как сделать таблицу в HTML?

Результат выполнения кода будет следующим.

Границы таблицы

В стилях таблиц по умолчанию граница отсутствует. Добавить границы можно с помощью HTML-кода и с помощью CSS.

Устанавливает границу равную 1 пикселю, серого цвета. Равнозначным будет CSS-код:

Цвет границ задается с помощью bordercolor, а размер с помощью border.

Как убрать внутренние границы таблицы?

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Строка таблицы

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

(от англ. table row — строка таблицы). Элемент

является контейнером содержащим ячейки таблицы. Ячейки вне этого контейнера будут неправильно отображаться на экране.

Ячейки таблицы

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

(от англ. able data — данные таблицы), который вкладывается в

. Думаю со строками и ячейками все понятно.

Заголовок таблицы

Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.

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

(от англ. table head — заголовок таблицы).

Все это немного запутано, правда? Давайте разбираться на примере.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Таблица по центру

Часто возникает необходимость выровнять таблицу по центру документа. Тут есть два варианта (как и с границей).С помощью HTML-кода добавить атрибут align со значением center тега

.

Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.

Размер таблицы

Если вы не указываете размер таблицы, то он определяется количеством текста (или иного контента) внутри. проще говоря таблица растягивается по размеру контейнера в котором она находится.

При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Размер шрифта

Размер шрифта в таблице можно измять двумя способами. Наверное вы уже догадались какими.

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Теперь воспользуемся CSS для того что бы изменить шрифт в этой таблице.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.

Выравнивание текста

Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.

Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.

Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;

Вертикальное выравнивание осуществляется с помощью тега valign который имеет следующие свойства:

Отступы в таблице

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

Отступы от границ ячеек. С помощью HTML задать отступы можно используя атрибут cellpadding тега

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td .

Объединение ячеек

Довольно важный момент в HTML-таблицах это объединение ячеек.

Объединение может быть горизонтальным.

Для горизонтального объединения ячеек используется атрибут colspan. Соответственно если у нас 4 ячейки, а мы объединяем две по горизонтали, то в первой строке у нас будет одна ячейка. Разберемся на примере.

Таблица сотрудников фирмы

ФИО	Должность
Руководящий состав:
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Теперь представим ситуацию что на время отпуска главного бухгалтера директор занимает две должности. Для вертикального объединения ячеек будем использовать атрибут rowspan.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
	Главный бухгалтер

Оформление HTML-таблиц

Под оформлением таблиц я имею ввиду следующие манипуляции:

Изменение цвета фона таблицы

Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
	Главный бухгалтер

Изменить цвет ячейки (или строк)

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер

Картинки в ячейке

Давайте сделаем вот что. Добавим Справа фото сотрудников. Если фотографии сотрудника нет, то мы сделаем полупрозрачное фоновое изображение и напишем, что фото нет.

А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.

Таблица сотрудников фирмы

ФИО	Должность	Фото
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер	Нет фото

Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.

Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).

Кнопки и элементы управления

Кнопки и элементы управления вставляются в таблицу стандартными способами. Создадим справа еще один столбец и вставим туда текстовое поле с кнопкой.

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

Скролл или прокрутка таблицы

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

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

Думаю что если вы дочитали до конца, то вы сможете разобраться как это реализовано. На этом с HTML-таблицами все. Задавайте ваши вопросы в комментариях.

Генератор HTML-таблиц

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

Источник