Значение и применение
Таблицы помогают нам систематизировать определённые данные в строки и столбцы. Они могут содержать в себе различную информацию, например, такую как текст, изображения, нумерованные и маркированные списки и т.п.
Чтобы понять, как составить таблицу, давайте рассмотрим ее простейший вариант:
Основное содержимое таблицы заключается в тег
Каждая строка таблицы помещается в элемент
Ячейка заголовка таблицы помещается в элемент
Каждая ячейка данных таблицы помещается в элемент
Наименование таблицы, если оно требуется размещается внутри элемента
| Тег | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| Да | Да | Да | Да | Да | Да |
Атрибуты
Пример использования
| Ячейка заголовка 1 | Ячейка заголовка 2 | Ячейка заголовка 3 |
|---|---|---|
| Ячейка данных 1 Строка 2 | Ячейка данных 2 Строка 2 | Ячейка данных 3 Строка 2 |
| Ячейка данных 1 Строка 3 | Ячейка данных 2 Строка 3 | Ячейка данных 3 Строка 3 |
К данной таблице для наглядности мы добавили атрибут border (граница) и установили равным 1 . Атрибут граница практически не используется в HTML, в данном случае использование CSS было бы предпочтительнее и давало бы более гибкие возможности.
Результат нашего примера:
Объединение столбцов
Объединение столбцов в элементах
| Ячейка заголовка 1 | Ячейка заголовка 2 | |
|---|---|---|
| Ячейка данных 1 Строка 2 | Ячейка данных 2 Строка 2 | Ячейка данных 3 Строка 2 |
| Ячейка данных 1 Строка 3 | Ячейка данных 2 Строка 3 | Ячейка данных 3 Строка 3 |
Результат нашего примера:
Объединение строк
Объединение строк в элементах
| colspan = "2" > Ячейка заголовка 1 | Ячейка заголовка 2 | |
|---|---|---|
| rowspan = "2" > Ячейка данных 1 Строка 2 | Ячейка данных 2 Строка 2 | Ячейка данных 2 Строка 3 |
| Ячейка данных 2 Строка 3 | Ячейка данных 3 Строка 3 |
Результат нашего примера.
Атрибут align
Атрибут align , тега
Значения
Значением атрибута является одно из ключевых слов.
- bottom - Заголовок под таблицей, по центру.
- left - Internet Explorer и Opera оставляют заголовок над таблицей и прижимают к левому краю. Mozilla Firefox располагает его слева от таблицы, оттеснив ее вправо. И если ширина таблицы 100%, то она уйдет за край экрана и появится горизонтальный скроллинг.
- right - Internet Explorer и Opera оставляют заголовок над таблицей и прижимают к правому краю. Mozilla Firefox располагает его справа от таблицы, оттеснив ее влево. И если ширина таблицы 100%, то заголовок уйдет за край экрана и появится горизонтальный скроллинг.
- top - Заголовок сверху таблицы, по центру.
Значение по умолчанию: top.
Синтаксис
Обязательный атрибут: нет.
Пример HTML: применение атрибута align
| Алк., 40° | М | Ж |
|---|---|---|
| 0 л. |  |
 |
| 0,5 л. |  |
 |
| 1 л. |  |
 |
Результат.
Поддержка версиями HTML
Google Chrome и Safari не понимают значения left, right .
HTML надпись над таблицей
HTML caption - надпись над таблицей
Теги
HTML
Результат:
В XHTML
спецификации также присутствуют теги
Распространение компьютерной коммуникации
Ранние эксперименты, связанные с передачей и получением информации с помощью компьютеров, стартуют в крупных научных центрах в середине 50-х годов ХХ-го века. Но уже спустя десять лет, в конце 60-х, служба по управлению перспективными исследовательскими проектами при Министерстве обороны США (DARPA) создает компьютерную сеть национального масштаба. В 1969 году DARPA разрабатывает первую в мире глобальную сеть ARPANET (Advanced Research Projects Agency Network), которая предшествует появлению интернета. Первоначально ARPANET имеет экспериментальный характер, служит в качестве связи между научными центрами посредством кабельной сети и специализированных программ. С помощью этой сети координируются научные группы, работающие над научно техническими проектами. Сотрудники лабораторий обменивают между собой информацию различного типа. Первый узел ARPANET создан в 1969 году в Калифорнийском университете в Лос-Анджелесе. Постепенно сеть разрастается в академической среде и в рамках крупных электронных корпораций. Университетское происхождение паутины, предшествующей интернету, имеет решающее значение для развития и распространения компьютерной коммуникации.
Параметры
- align - Определяет выравнивание заголовка по горизонтали.
- valign - Устанавливает расположение заголовка до или после таблицы.
Закрывающий тег обязателен.
Описание параметров тега
Параметр ALIGN
Параметр align определяет выравнивание заголовка относительно таблицы. Результат его действия зависит от используемого браузера и установленного значения.
Синтаксис
Аргументы
- left - В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
- right - В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
- center - Заголовок располагается сверху таблицы по ее центру.
- top - Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
- bottom - Заголовок размещается внизу таблицы по ее центру.
Значение по умолчанию: center — для браузера Internet Explorer; top — для других браузеров. Аналог CSS - text-align.
Параметр VALIGN
Параметр valign предназначен для размещения заголовка до таблицы или после нее. Этот параметр работает только в браузере Internet Explorer, а для всех остальных применяется align. Тем не менее, параметр align корректно действует и для IE, поэтому сочетание параметров align и valign необходимо только для этого браузера, когда требуется одновременное выравнивание заголовка по вертикали и горизонтали.
Синтаксис
Аргументы
- bottom - Заголовок размещается под таблицей.
- top - Заголовок размещается перед таблицей.
Значение по умолчанию - top
Атрибуты
| align | выраванивание заголовка относительно таблицы
|
|---|---|
| class | определяет имя используемого класса |
| dir | определяет направление символов:
|
| id | уникальный индетификатор |
| lang | определяет язык отображаемого документа |
| style | задает встроенную таблицу стилей |
| onclick | щелчок на элементе |
| ondblclick | двойной щелчок на элементе |
| onkeydown | нажатие клавиши, когда элемент имеет фокус |
| onkeypress | нажатие и освобождении клавиши, когда элемент имеет фокус |
| onkeyup | освобождение ранее нажатой клавиши, когда элемент имеет фокус |
| onmousedown | нажатие кнопки мыши, когда элемент имеет фокус |
| onmousemove | движение указателя мыши, когда элемент имеет фокус |
| onmouseout | смещение указателя мыши с элемента |
| onmouseover | помещение указателя мыши на элемент |
| onmouseup | освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус |
| title | задает расшифровку аббревиатуры, показывается в виде всплывающей подсказки |
| valign | выраванивание заголовка относительно таблицы. Применяется только в IE. Может комбинироваться с align
|
Пример
приведен только код заголовка таблицы
- закрывающий тег обязателен (
