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-таблицы
Меню ресторана "Ромашка"
| Кухня |
Холодные блюда |
Горячие блюда |
Десерты |
| Салаты |
Закуски |
Первые блюда |
Вторые блюда |
| Русская |
Винегрет |
Язык с хреном |
Щи с квашеной капустой |
Вареники с картошкой |
Печеные яблоки с медом |
| Оливье |
Студень говяжий |
Рассольник домашний |
Караси запеченые в сметане |
Блинчатый пирог |
| Сельдь под "шубой" |
Судак заливной |
Мясная солянка |
Котлеты "Пожарские" |
Пирожное "Картошка" |
| Испанская |
Севиче из гребешков |
Эмпанадас |
Хлебный суп с чесноком |
Паэлья с морепродуктами |
Чуррос |
| Тимбал из авокадо и тунца |
Ахотомате |
Астурийская фабада |
Свиное раксо |
Альмойшавена |
| Фасоль с ветчиной |
Чанфайна |
Рыбный суп с манными клецками |
Тортилья картофельная |
Бунуэлос |
| Французская |
Вогезский салат |
Рийет из курицы |
Баклажанный крем-суп "Ренуар" |
Картофель огратен |
Бриоши |
| Салат "Панзанелла" |
Делисьез из сыра |
Французский тыквенный суп |
Гратин из птицы |
Лигурийский лимонный пирог |
| Тар-тар |
Маринованный лосось |
Суп "Конти" |
Тартифлетт |
Саварен "Триумф" |
body {
margin: 0;
background: #F4F1F8;
}
table {
border-collapse: collapse;
line-height: 1.1;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background: radial-gradient(farthest-corner at 50% 50%, white, #DCECF8);
color: #0C213B;
}
caption {
font-family: annabelle, cursive;
font-weight: bold;
font-size: 2em;
padding: 10px;
color: #F3CD26;
text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
caption:before, caption:after {
content: "\274B";
color: #A9E2CC;
margin: 0 10px;
}
th {
padding: 10px;
border: 1px solid #A9E2CC;
}
td {
font-size: 0.8em;
padding: 5px 7px;
border: 1px solid #A9E2CC;
}
.first {
font-size: 1em;
font-weight: bold;
text-align: center;
}
таблиц
лучше всего рассмотреть на примере простой таблицы, HTML-код которой приведен в листинге 5.10.
Это обычная таблица, ячейки которой пронумерованы - так нам будет проще в дальнейшем. На рис. 5.2 показан ее вид в окне Web-обозревателя.
А теперь рассмотрим таблицу на рис. 5.3.
Здесь выполнено объединение некоторых ячеек. Видно, что объединенные ячейки словно слились в одну. Как это сделать?
Специально для этого теги и
поддерживают два весьма примечательных необязательных атрибута. Первый - COLSPAN - объединяет ячейки
по горизонтали, второй -ROWSPAN- по вертикали.
Чтобы объединить несколько ячеек по горизонтали в одну, нужно выполнить следующие шаги.
1. Найти в коде HTML тег ( | ), соответствующий первой из объединяемых ячеек (если считать ячейки слева направо).
2. Вписать в него атрибут COLSPAN и присвоить ему количество объединяемых ячеек, считая и самую первую из них.
3. Удалить теги ( | ), создающие остальные объединяемые ячейки данной строки.
Давайте объединим ячейки 2 и 3 таблицы (см. листинг 5.10). Исправленный фрагмент кода, создающий первую строку этой таблицы, приведен в листинге 5.11.
Точно так же создадим объединенные ячейки 4 + 5 и 12 + 13 + 14 + 15.
Объединить ячейки по вертикали чуть сложнее. Вот шаги, которые нужно для этого выполнить.
1. Найти в коде HTML строку (тег ), в которой находится первая из объединяемых ячеек (если считать строки сверху вниз).
2. Найти в коде этой строки тег ( | ), соответствующий первой из объединяемых ячеек.
3. Вписать в него атрибут ROWSPAN и присвоить ему количество объединяемых ячеек
, считая и самую первую из них.
4. Просмотреть последующие строки и удалить из них теги ( | ), создающие остальные объединяемые ячейки.
Нам осталось объединить ячейки
1 и 6 нашей таблицы. Листинг 5.12 содержит исправленный фрагмент ее HTML-кода (исправления затронут первую и вторую строки).
Обратим внимание, что мы удалили из второй строки тег , создающий шестую ячейку, поскольку она объединилась с первой ячейкой.
Сейчас применяется не очень часто. Однако ранее, в период расцвета табличного Web-дизайна, трудно было встретить таблицу без объединенных ячеек
. Так или иначе, знать о нем не помешает.
Таблицы в HTML имеют две функции. Первая - это собственно таблицы, то есть вывод информации в виде
таблицы. А вторая - это вёртска страницы. Отдельные части контента размещаются в разных ячейках
таблицы и таким образом оказываются в нужном месте страницы.
Создание таблицы
Рассмотрим, как создать таблицу в HTML.
Это делается с помощью тэга
. Таблицы состоят из строк,
внутри которых находятся ячейки. Эти ячейки и содержат контент таблицы. Тэг
добавляет в таблицу строку, а тэг |
добавляет в строку ячейку. Не забывайте, что тэги нужно закрывать. Для примера создадим такую таблицу:
Для того, чтобы были видны рамки таблицы, тэгу
был задан
атрибут border
, но в HTML5 этот атрибут считается устаревшим, и использование
его не желательно. Кроме того, есть и другие атрибуты для работы с рамками и изменения
фона, а так же у ячеек есть атрибуты для выравнивания контента. Все эти атрибуты также нежелательны,
вместо них нужно использовать стили.
Объединение ячеек таблицы
Есть возможность объединить ячейки таблицы в одну. Для этого у тэга
есть атрибут colspan
, который объединяет
ячейки внутри одной строки, а также атрибут rowspan
, который объединяет ячейки
из разных строк. Значением этих атрибутов является количество объединяемых ячеек.
Создадим такую таблицу:
Обратите внимание, во второй строке таблицы одна ячейка занимает место двух ячеек, поэтому общее количество
ячеек в этой строке будет меньше, чем в других, в данном случае, одна.
Теперь создадим такую таблицу:
Дополнительные табличные тэги
Кроме тех тэгов, которые мы использовали, есть ещё тэги, которые также используются при создании таблицы.
|
- заголовочная ячейка. Обычно находятся в первой строке таблицы.
Используются для создания названия колонки таблицы. От тэга |
отличается
только жирным шрифтом и выравниванием по центру.
- находится внутри тэга
,
добавляет заголовок таблицы.
- cодержит несколько первых строк таблицы для указания особого
стиля. Такой тэг может быть только один в таблице. Строки, которые он содержит, должны начинаться с
самой первой строки.
- содержит несколько строк таблицы для указания особого стиля.
Таких тегов в таблице может быть несколько.
- содержит строки таблицы, которые отобразятся в самом низу
таблицы.
- определяет стиль для одной колонки таблицы, начиная с первой. То есть
первый такой тэг укажет стиль для первой колонки, второй тэг для второй колонки и так далее. Работает
по-разному в разных браузерах.
3.8. Объединение ячеек таблицы На практике встречается большое количество таблиц, в которых одна ячейка объединяет в себе несколько ячеек по высоте и ширине (см. рис. 3.2). В HTML ячейки объединяют с помощью атрибутов colspan и rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan – по вертикали. На рис. 3.12 изображена таблица с объединенными ячейками. Заголовок таблицы находится в ячейке, объединяющей все три ячейки строки. Таблица содержит еще две ячейки, каждая из которых объединяет две ячейки по вертикали. Код такой таблицы приведен в листинге 3.7. Рис. 3.12.
Таблица с объединенными ячейками Листинг 3.7.
Пример использования атрибутов объединения ячеек HTML-таблица| Ячейка объединяет в себе все ячейки строки |
|---|
| Ячейка на две строки | Ячейка 2х2 | Ячейка 2х3 | | Ячейка 3х2 | Ячейка 3х3 | | Ячейка на две строки | Ячейка 4х2 | Ячейка 4х3 | | Ячейка 5х2 | Ячейка 5х3 |
Из книги
Компьютер на 100. Начинаем с Windows Vista
автора
Зозуля Юрий
Выделение ячеек
Чтобы изменить параметры форматирования сразу нескольких ячеек, их нужно выделить, используя один из следующих приемов.? Для выделения отдельной ячейки подведите указатель мыши к ее левой границе и, когда он примет форму черной наклонной стрелки,
Из книги
AutoCAD 2009
автора
Орлов Андрей Александрович
Очистка ячеек
В предыдущем уроке уже упоминалось, что для очистки ячейки достаточно сделать ее активной и нажать клавишу Delete. Таким же образом можно очистить сразу несколько ячеек, предварительно выделив нужный диапазон.Очистка приводит к удалению только имеющихся в
Из книги
Excel. Мультимедийный курс
автора
Мединов Олег
Изменение ячеек таблицы
Чтобы изменить ячейку таблицы, вы должны щелкнуть на ней кнопкой мыши. Отобразятся маркеры управления (рис. 4.45).
Рис. 4.45. Выделенная ячейка таблицыПеремещая указатель при нажатой кнопке мыши, вы можете выделить группу ячеек. Можно также выделить
Из книги
AutoCAD 2010
автора
Орлов Андрей Александрович
Объединение ячеек
Две и более ячейки на листе могут быть объединены в одну. Объединение ячеек может понадобиться, например, при создании общего заголовка для нескольких столбцов (рис. 3.15).
Рис. 3.15. Пример объединения ячеекЧтобы объединить ячейки, выполните следующие
Из книги
Основы информатики: Учебник для вузов
автора
Малинина Лариса Александровна
Изменение ячеек таблицы
Чтобы изменить ячейку таблицы, вы должны щелкнуть на ней кнопкой мыши. При этом отобразятся маркеры управления (рис. 4.46).
Рис. 4.46. Выделенная ячейка таблицыПеремещая указатель при нажатой кнопке мыши, вы можете выделить группу ячеек. Можно также
Из книги
MySQL: руководство профессионала
автора
Паутов Алексей В
6.5. Форматирование ячеек
Форматирование текста и размещение его внутри ячейки1. В меню Формат выберите команду Ячейки, затем перейдите к вкладке Выравнивание. Выберите соответствующие параметры выравнивания по горизонтали и вертикали, а также, если необходимо,
Из книги
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов.
автора
Дронов Владимир
10.3.3. Набор символов и объединение таблицы
Каждая таблица имеет набор символов таблицы и объединение. Инструкции CREATE TABLE и ALTER TABLE имеют факультативные предложения для определения набора символов таблицы и объединения:CREATE TABLE tbl_name(column_list)[ CHARACTER SET charset_name]}
| | | 