Учебник по HTML
На сайт Информатика в школе К оглавлению учебника
Таблицы
Таблицы являются очень удобным средством форматирования данных на Web-станице. Они позволяют решать чисто дизайнерские задачи: выравнивать части страницы друг относительно друга, размещать рядом рисунки и текст, управлять цветовым оформлением и т.д.
При создании таблиц используется принцип вложения: внутри основного элемента таблицы TABLE создается ряд элементов, определяющих строки TR, а внутри этих элементов размещаются элеметы для описания каждой ячейки в с строке TD.
<TABLE> </table> — внешний элемент талицы.
<TR> </tr>- элемент, задающий строку таблицы. Конечный тег можно не использовать, т.к. строка заканчивается там, где начинается следующая строка.
<TD> </td> — элемент, задающий ячеку таблицы.
Для примера опишем таблицу, которая будет состоять из двух строк и двух столбцов:
| <TABLE> | Начало таблицы | Посмотреть |
| <TR> | Начало первой строки | |
| <TD> Первая ячейка первой строки</td> | Первая ячейка первой строки | |
| <TD> Вторая ячейка первой строки</td> | Вторая ячейка первой строки | |
| </tr> | Конец первой строки | |
| <TR> | Начало второй строки | |
| <TD>Первая ячейка второй строки</td> | Первая ячейка второй строки | |
| <TD>Вторая ячейка второй строки</td> | Вторая ячейка второй строки | |
| </tr> | Конец второй строки | |
| </table> | Конец таблицы |
Ширину таблицы можно задавать точно в пикселах или в процентном
отношении к ширине страницы в окне броузера.
Например, если нам нужно здать таблицу определенного размера, то мы укажем:
<TABLE>
<TR>
<TD> Ширина этой таблицы 500 пикселей и она состоит из одной строки и одного столбца.</td>
</tr>
</table>
Посмотреть
Если мы хотим получить таблицу на всю ширину экрана, не заботясь при этом, какое разрешение монитора (800х600, 1024 х 768, 1280 х 1024) у того, кто будет просматривать нашу Web-страницу, то мы зададим ширину страницы как 100%.
<TABLE width=»100%»>
<TR>
<TD> Ширина этой таблицы 100%.</td>
<TD> и она состоит из одной строки и двух столбцов </td>
</tr>
</table>
Посмотреть
Для всей таблицы может быть задан цвет фона: bgcolor=»Цвет» или bgcolor=»#RRGGBB», например:
<TABLE bgcolor=»#00CC99″>
<TR>
<TD> Ширина этой таблицы 50%.
</tr>
<TR>
<TD> и она состоит из двух строк и одного стобца </td>
</tr>
</table>
Посмотреть
Можно задавать отдельно цвет ячеек таблицы.
table border=»1″ cellspacing=»0″
cellpadding=»5″ align=»center»>
<tr>
<td bgcolor=»#00FFFF»></td>
<td bgcolor=»#CCFF00″></td>
<td bgcolor=»#FF6633″></td>
</tr>
<tr>
<td bgcolor=»#0000FF»></td>
<td bgcolor=»#33FF66″></td>
<td bgcolor=»#FF00FF»></td>
</tr>
<tr>
<td bgcolor=»#CCCCCC»></td>
<td bgcolor=»#9933FF»></td>
<td bgcolor=»#FFFFCC»></td>
</tr>
</table>
Шириной боковой грани управляет атрибут border.
Можно
задать ширину боковой грани таблицы в пикселах.
<TABLE bgcolor=»#00CC99″ border=»3″ >
<TR>
<TD> </td>
<TD> Ширина этой таблицы 300 пикселов</td>
<TD> </td>
</tr>
<TR>
<TD> и она состоит из двух строк и трех столбцов</td>
<TD> </td>
<TD></td>
</tr>
</table>
Посмотреть
Можно сделать грани таблицы невидимыми, для этого ширину бордюра таблицы нужно задать равной 0:
<TABLE bgcolor=»#00CC99″ border=»0″ >
<TR>
<TD> </td>
<TD> Ширина этой таблицы 300 пикселов</td>
<TD> </td>
</tr>
<TR>
<TD> и она состоит из двух строк и трех столбцов</td>
<TD> </td>
<TD></td>
</tr>
</table>
Посмотреть
Существует набор атрибутов, предназначенных для выравнивания
данных в ячейках таблиц.
Атрибут align позволяет выравнивать данные
в ячейках по горизонтали. Он принимает следующие значения:
right — выравнивание вправо;
center — центрирование.
Атрибут valign позволяет выравнивать текст по вертикали. Значения могут быть такие:
top — выравнивание по верхнему краю ячейки
center — выравнивание по центру
baseline — выравнивание по первой строке.
<table border=»1″
cellspacing=»0″ cellpadding=»5″ align=»center»>
<tr> <td>Выравнивание по горизонтали</td>
<td align=»center»>
По центру
</td>
<td align=»left»>
По левому краю
</td>
<td align=»right»>
По правому краю
</td>
</tr>
<tr>
<td>Выравнивание
по вертикали</td>
<td valign=»top»>По
верхнему краю</td>
<td valign=»middle»>По
центру</td>
</tr>
</table>
Посмотреть
Задание
1.
Составьте таблицу для расписания
ваших уроков. Пусть эта таблица состоит из восьми столбцов и девати
строк. Ширина таблицы — 100%.
2. В первом столбце укажите время начала и конца ваших уроков. Выравнивание данных в ячейках по левому краю.
3. В остальных стобцах школьные предметы по дням недели.
4. Выравнивание дней недели — по центру ячейки и жирным шрифтом.
5. Выравнивание названий предметов — по левому краю.
6. У всех стоблцов фон сделайте разным цветом.
7. Перед таблицей поместите заголовок «РАСПИСАНИЕ УРОКОВ», выделив его тегами <h2> и </h2>. Цвет заголовка — красный.
8. Между заголовком и таблицей поместите рисунок.
Посмотреть
Как сделать таблицу в html
Как создать таблицу в HTML5 и указать её параметры через стили?
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
8. 0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.
Решение
Пример 1. Создание таблицы
HTML5 IE Cr Op Sa Fx
Порядок расположения ячеек и их вид показан на рис. 1.
Рис. 1. Результат создания таблицы с четырьмя ячейками
Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0.
Пример 2. Поля внутри ячеек
HTML5 CSS 2.1 IE Cr Op Sa Fx
Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.
Создание таблиц в HTML. Все о HTML таблицах
В HTML для создания таблиц используются теги группы table.
К ним относятся:
Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.
Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.
Простая HTML таблица
Чтобы создать простую таблицу HTML достаточно 3 тега: , и .
Далее необходимо определить строки и ячейки — структуру таблицы.
Пример простой таблицы HTML
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 | Ячейка 6 |
| Ячейка 7 | Ячейка 8 | Ячейка 9 |
Исходный код простой таблицы HTML
Заголовки таблицы HTML
Для наглядности в примерах далее мы будем использовать конкретные ситуации, где можно применять те или иные возможности HTML таблиц.
Пример HTML таблицы с заголовком th
| Volkswagen AG | Daimler AG | BMW Group |
|---|---|---|
| Audi | Mercedes-Benz | BMW |
| Skoda | Mercedes-AMG | Mini |
| Lamborghini | Smart | Rolls-Royce |
Исходный код таблицы HTML с заголовками th
Объединение ячеек в таблице HTML
В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.
Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х» , у ячейки или , где x — количество ячеек для объединения.
Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х» , у ячейки или , где x — количество ячеек для объединения.
Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:
Пример HTML таблицы с объединением ячеек
| Nissan | ||
|---|---|---|
| Модель | Комплектация | Наличие |
| Nissan Qashqai | VISIA | + |
| TEKNA | + | |
| Nissan X-Trail | ACENTA | + |
| CONNECTA | — | |
Исходный код таблицы HTML с объединенными ячейками
Колонтитулы и подпись в HTML таблицах
HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.
По умолчанию, колонтитулы не отличаются стилями (это можно сделать через CSS при необходимости), но могут быть использованы браузерами. Например, при печати многостраничной таблицы колонтитулы могут дублироваться на каждой напечатанной странице.
По необходимости к таблице можно добавить подпись. Для этого используйте тег .
Подпись , при использовании, ставится сразу после открывающего тега .
Пример HTML таблицы с колонтитулами и подписью
| Характеристика | SUTA 09H 6R | SUTA 09HR6R | SUTA 15H 5R |
|---|---|---|---|
| Наличие | + | + | + |
| Мощность двигателя | 0,9 (90 л.с.) | 0,9 (90 л.с.) | 1,5 (90 л.с.) |
| Топливо | бензин | бензин | дизель |
| Норма токсичности | Евро-6 | Евро-6 | Евро-5 |
Исходный код таблицы с колонтитулами и подписью
Колонки и группы колонок
HTML таблицу можно делить на колонки и группы колонок с помощью тегов и .
Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).
Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число» , указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.
Теги и похожи друг на друга, однако тег позволяет использование вложенных тегов , таким образом можно задать стили группе колонок через и конкретной колонке внутри группы через элемент (см. пример ниже).
Если внутри есть вложенные теги , то атрибут span у тега не ставится, а количество колонок на которые влияет тег определяется вложенными элементами.
Пример HTML таблицы с разделением на колонки
| ZEN 2E2C AL A | ZEN 2E2C J5 A | INTENSE 2E3C AL A | Характеристика |
|---|---|---|---|
1. 5 (90 л.с.) | 1.2 (115 л.с.) | 1.5 (90 л.с.) | Мощность двигателя |
| дизель | бензин | дизель | Топливо |
| АКП6 (EDC) | АКП6 (EDC) | АКП6 (EDC) | Трансмиссия |
Исходный код таблицы HTML c и
Таблицы в макете страниц сайта
На современных сайтах немаловажно корректное отображение страниц как на компьютерах, так и на мобильных устройствах. Использовать таблицы для создания каркаса HTML страницы не целесообразно, так как теряется возможность адаптирования контента под экрыны разного размера (компьютеры, смартфоны, планшеты).
Теги группы Table лучше использовать внутри страницы для отображения контента табличного формата.
1.7. HTML-таблицы
HTML-таблицы упорядочивают и выводят на экран данные с помощью строк или столбцов. Таблицы состоят из ячеек, образующихся при пересечении строк и столбцов.
Ячейки таблиц могут содержать любые HTML-элементы, такие как заголовки, списки, текст, изображения, элементы форм, а также другие таблицы.
Каждой таблице можно добавить связанный с ней заголовок, расположив его перед таблицей или после неё.
Таблицы больше не используются для вёрстки веб-страниц и компоновки отдельных элементов, потому что такой приём не обеспечивает гибкость структуры и адаптивность сайта, существенно увеличивая HTML-разметку.
Для всех элементов таблицы доступны глобальные атрибуты, а также собственные атрибуты.
Создание таблиц в HTML
- Содержание:
- 1. Как создать таблицу
- 2. Как создать строки (ряды) таблицы
- 3. Как сделать ячейку заголовка столбца таблицы
- 4. Как сделать ячейку тела таблицы
- 5. Как добавить подпись (заголовок) к таблице
- 6. Группирование строк и столбцов таблицы и
- 7. Группировка разделов таблицы,и
- 8. Как объединить ячейки таблицы
- 9. Атрибуты элементов таблицы
- 10. Пример создания таблицы
1. Как создать таблицу
Таблица создаётся при помощи элемента , который является контейнером для элементов таблицы и все элементы должны находиться внутри него.
Например, с помощью данной разметки можно создать таблицу, состоящую из двух столбцов и двух строк:
| текст заголовка | текст заголовка |
|---|---|
| данные | данные |
Фигура 1. Внешний вид таблицы без форматирования css-свойствами
По умолчанию таблица и ячейки не имеют видимых границ. Границы задаются с помощью свойства border :
Промежутки между ячейками таблицы убираются с помощью свойства table .
Ширина таблицы по умолчанию равна ширине её внутреннего содержимого. Чтобы установить ширину, нужно задать значение для свойства width :
Если для ячеек таблицы заданы внутренние отступы и границы, то ширина таблицы будет включать в себя следующие значения: padding-left и padding-right , ширина border-left плюс ширина border-right последней ячейки в ряду.
Если заданы ширина и границы ячеек, то ширина таблицы будет складываться из ширины ячеек плюс ширина border-left и ширина border-right последней ячейки в ряду.
2. Как создать строки (ряды) таблицы
3. Как сделать ячейку заголовка столбца таблицы
Элемент
4. Как сделать ячейку тела таблицы
5. Как добавить подпись (заголовок) к таблице
6. Группирование строк и столбцов таблицы
Элемент создает структурную группу столбцов, выделяя логически однородные ячейки. Группирует один или более столбцов для единого форматирования, позволяя применить стили к столбцам вместо того, чтобы повторять стили для каждой ячейки и для каждой строки.
Элемент формирует группы столбцов, которые делят таблицу на разделы, не относящиеся к общей структуре, т.е. не содержащие информацию одного типа. Позволяет задавать свойства столбцов для каждого столбца в пределах элемента .
С помощью атрибута style можно изменить основной цвет фона ячеек.
Для элемента доступен атрибут span , задающий количество столбцов для объединения.
Рис. 2. Выделение столбцов таблицы другим цветом с использованием элементов и
7. Группировка разделов таблицы
Элемент
создает группу заголовков для строк таблицы с целью задания единого оформления. Используется в сочетании с элементамии для указания каждой части таблицы.Элемент
группирует основное содержимое таблицы. Используется в сочетании с элементамии .Такая группировка строк была заложена в стандарте в расчете на то, что обозреватели при отображении длинных таблиц обеспечат прокрутку строк данных при сохранении надзаголовка и подзаголовка неподвижными, а при их выводе на принтер смогут использовать надзаголовок и подзаголовок в качестве колонтитулов страницы. Однако, современные обозреватели этого не делают и либо просто отображают
и как строки данных, либо, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.
8. Как объединить ячейки таблицы
Атрибуты colspan и rowspan объединяют ячейки таблицы. Атрибут colspan задает количество ячеек, объединенных по горизонтали, а rowspan — по вертикали.
Рис. 3. Пример объединения ячеек таблицы по горизонтали при помощи атрибута colspan
9. Атрибуты элементов таблицы
| Атрибут | Описание, принимаемое значение | |||
|---|---|---|---|---|
| colspan | Количество ячеек в строке для объединения по горизонтали. | Возможные значения: число от 1 до 999. | ||
| headers | Задает список ячеек заголовка, содержащих информацию о заголовке текущей ячейки данных. Предназначен для речевых браузеров. | . | . | |
| rowspan | Количество ячеек в столбце для объединения по вертикали. | Возможные значения: число от 1 до 999. | ||
| span | Количество колонок, объединяемых для задания единого стиля, по умолчанию равно 1. Принимаемые значения: любое целое положительное число. | |||
10. Пример создания таблицы
Рис. 4. Создание меню ресторана с помощью HTML-таблицы
(устаревший) HTML: таблицы: ширина и высота
Последнее обновление
Эта статья основана на устаревшем программном обеспечении.
ПРИМЕЧАНИЕ. HTML-страницы устарели и не будут обновляться.
Можно управлять шириной и высотой таблиц и отдельных ячеек, назначая фиксированный размер в пикселях или переменный размер, определяемый пропорцией окна. (Таблицы будут различаться от браузера к браузеру, если вы используете параметр пропорции.) Чтобы управлять высотой или шириной всей таблицы, поместите атрибут размера (либо «WIDTH=», либо «HEIGHT=») в код
Чтобы управлять отдельными ячейками, поместите атрибут размера в код этой ячейки. Обратите внимание, что изменение размера одной ячейки в строке или столбце влияет на все соответствующие ячейки.
|
A Table With a Fixed Width of 200 Pixels
|
|
A Table Containing a Cell With a Fixed Width of 200 Pixels
|
|
Таблица с фиксированной высотой 200 пикселей
| Красный | Зеленый | Синий |
| Оранжевый | Желтый | Фиолетовый |
| Красный | Зеленый | Синий< /TD> |
| Оранжевый | Желтый | Фиолетовый |
Стол с пропорциональной высотой 40%
|
|
A Table Containing a Cell With a Fixed Height of 100 Pixels
|
|
Была ли эта статья полезной? Да Нет
Просмотр/печать PDFКак создать таблицу с фиксированным заголовком и прокручиваемым телом
В этом руководстве вы найдете несколько методов создания HTML-таблицы с фиксированным заголовком и прокручиваемым телом.
Конечно, вам нужно использовать CSS.
Такого результата можно добиться, установив для свойства position значение «sticky» и указав 0 в качестве значения свойства top для
Как обычно, вы можете открыть демонстрационную ссылку Попробуйте сами и поиграть со свойствами, чтобы лучше понять их.
Вы также можете прочитать комментарии перед каждой строкой, чтобы лучше понять свойства.
Пример создания таблицы с прокручиваемым телом с использованием свойства position:
<голова>
Название документа
<стиль>
.tableFixHead {
переполнение-у: авто; /* сделать таблицу прокручиваемой, если высота больше 200 пикселей */
высота: 200 пикселей; /* задает начальную высоту таблицы 200 пикселей */
}
.tableFixHead thead th {
положение: липкое; /* делаем заголовки таблицы липкими */
верх: 0px; /* головка стола будет размещена сверху стола и прилипнет к нему */
}
стол {
граница коллапса: коллапс; /* складываем границы таблицы друг к другу */
ширина: 100%;
}
й,
тд {
отступ: 8px 16px;
граница: 1px сплошная #ccc;
}
й {
фон: #еее;
}
<тело>
<дел>
<таблица>
Столбец 1
Столбец 2
1.
1
<тд>2.1
1.2
2.2
1.3
2.3
1.4
2.4
1,5
2.5
1.6
2.5
1.7
2.5
1.8
2.5
1Попробуй сам »
Результат
| Кол. 1 | Кол 2 |
|---|---|
| 1.1 | 2.1 |
| 1,2 | 2,2 |
| 1,3 | 2,3 |
| 1,4 | 2,4 |
| 1,5 | 2,5 |
| 1,6 | 2,5 |
| 1,7 | 2,5 |
| 1,8 | 2,5 |
Отлично! Хм? Но давайте посмотрим правде в глаза! Мне не нравится видеть эту полосу прокрутки, начинающуюся с заголовка таблицы!
Итак, давайте перейдем к следующему примеру и вместе решим эту проблему!
Еще один метод создания таблицы с фиксированным заголовком и прокручиваемым телом.
В приведенном ниже примере мы устанавливаем отображение на «блок» для элемента
Пример создания таблицы с прокручиваемым телом с использованием свойства display:
<голова>
Название документа
<стиль>
.fixed_header {
ширина: 400 пикселей;
макет таблицы: фиксированный;
граница коллапса: коллапс;
}
.fixed_header тело {
дисплей: блок;
ширина: 100%;
переполнение: авто;
высота: 100 пикселей;
}
.fixed_header thead tr {
дисплей: блок;
}
.fixed_headerобъявление {
фон: черный;
цвет: #fff;
}
.fixed_header-й,
.fixed_header тд {
отступ: 5px;
выравнивание текста: по левому краю;
ширина: 200 пикселей;
}
<тело>
<таблица>
Столбец 1
Столбец 2
Столбец 3
<тд>1
2
<тд>3
<тд>4
<тд>5
<тд>6
<тд>7
8
<тд>9
<тд>10
<тд>11
12
<тд>13
14
15
16
17
18
19
20
<тд>21
22
<тд>23
<тд>24
25
Попробуй сам »
Как упоминалось ранее, мы использовали overflow: auto для tbody вместе с display: block.