|
|
Конспект. Чтобы создать простую таблицу html достаточно 3 тега
Чтобы создать простую таблицу HTML достаточно 3 тега: , и .
Тег является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.
Далее необходимо определить строки и ячейки – структуру таблицы.
В HTML таблицах строка (ряд) является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка | внутри строки | будет в первой колонке, второй элемент - во второй колонке и так далее.
Для разделения таблицы на колонтитулы и основную часть, как обвертку строк | основной части таблицы используют тег . Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически. Если таблица не имеет колонтитулов, вы можно не использовать тег .
Пример простой таблицы HTML
Ячейка 1
|
Ячейка 2
|
Ячейка 3
|
Ячейка 4
|
Ячейка 5
|
Ячейка 6
|
Ячейка 7
|
Ячейка 8
|
Ячейка 9
|
Исходный код простой таблицы HTML
Ячейка 1 |
Ячейка 2 |
Ячейка 3 |
Ячейка 4 |
Ячейка 5 |
Ячейка 6 |
Ячейка 7 |
Ячейка 8 |
Ячейка 9 |
Заголовки таблицы HTML
В HTML таблицах существует 2 типа ячеек. Тег определяет ячейку обычного типа. Если ячейка выполняет роль заголовка, она определяется с помощью тега | .
Пример HTML таблицы с заголовком th
Volkswagen AG
|
Daimler AG
|
BMW Group
|
Audi
|
Mercedes-Benz
|
BMW
|
Skoda
|
Mercedes-AMG
|
Mini
|
Lamborghini
|
Smart
|
Rolls-Royce
|
Исходный код таблицы HTML с заголовками th
Volkswagen AG |
Daimler AG |
BMW Group |
|---|
Audi |
Mercedes-Benz |
BMW |
Skoda |
Mercedes-AMG |
Mini |
Lamborghini |
Smart |
Rolls-Royce |
Изменение ширины HTML-таблиц и ячеек
По умолчанию браузеры высчитывают ширину таблицы исходя из содержимого ее ячеек, а изменить ее можно, используя атрибут width, общий синтаксис такой:
– любое неотрицательное число указывающее ширину в пикселях.
– неотрицательное число задающее ширину в процентах (%) исходя из ширины родительского контейнера, элемента в котором находится таблица.
Тем не менее, если указанная ширина будет меньше, чем необходимо для размещения всего содержимого HTML-таблицы, то браузеры ее проигнорируют и увеличат до нужной.
В качестве значений для ширины ячеек лучше тоже использовать только пиксели (px) и проценты (%). Естественно, процентные размеры будут высчитываться исходя из ширины таблицы.
В HTML-таблицах ширина столбца всегда равна его самой широкой ячейке. Поэтому, меняя ширину одной (любой) ячейки – меняется ширина всего столбца.
Пример изменения ширины HTML-таблиц и ячеек
| Ячейка 1.1 | Ячейка 1.2 |
|---|
| Ячейка 2.1 | Ячейка 2.2 |
| Ячейка 1.1 | Ячейка 1.2 |
|---|
| Ячейка 2.1 | Ячейка 2.2 |
Ячейка 1.1 |
Ячейка 1.2 |
Ячейка 2.1 |
Ячейка 2.2 |
| | |
|
|
Скачать 25.28 Kb.