Сиреневый код. Учeбник HTML. Цвета RGB. Цвета безопасной палитры. Задание цвета в HTML по его названию
Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.
Теги, используемые для построения таблицы в html
table
- обязательный тег, открывающий и закрывающий таблицу
caption
- необязательный тег, обозначающий заголовок таблицы
th
- необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
tr
- обязательный тег, с которого открывается и закрывается строка
td
- обязательный тег, обозначающий открытие и закрытие ячейки в строке
Пример кода простой таблицы
Таблица html
Название таблицы
Стобец 1
|
Стобец 2
|
Текст в первой ячейке
|
Текст во второй ячейке
|
В браузере отобразится
Назначение таблиц в html
Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать
фон
(или его цвет),
отступ
,
ширину
,
границу
и
другие параметры
, что придаст ей красивый
внешний вид. Таблица - Ваш первый шаг к понимаю
web-дизайна
! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (
боковое меню,
верхнее меню, содержание) - было содержанием ячеек большой таблицы.
На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой...
Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)
У
тега table
есть следующие атрибуты:
width
- ширина таблицы. может быть в пикселях или % от ширины экрана.
bgcolor
- цвет фона ячеек таблицы
background
- заливает фон таблицы рисунком
border
- рамка и границы в таблице. Толщина указывается в пикселях
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей
Как и ранее, значение атрибута прописываем в кавычках.
Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th
) и зададим параметр атрибуту border (граница)
, width (ширина таблицы, строки или ячейки)
и bgcolor (цвет ячейки)
Таблица html
Стобец 1
|
Стобец 2
|
|
|
В результате в браузере будет выведена таблица следующего вида
frame
- атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:
Void - рамки нет,
above - только верхняя рамка,
below - только нижняя рамка,
hsides - только верхняя и нижняя рамки,
vsides - только левая и правая рамки,
lhs - только левая рамка,
rhs - только правая рамка,
box - все четыре части рамки.
rules
- атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:
None - между ячейками нет границ,
groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
rows - границы только между строками,
cols - границы только между стобцами,
all - отображать все границы.
Рассмотрим пример кода
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат
Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице
. Для этого есть следующие уже знакомые параметры:
align
- выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
cellspacing
- расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
cellpadding
- отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
Рассмотрим пример
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
В браузере отобразится выравненная по центру таблица следующего вида
Строки tr и ячейки td в таблицах HTML
Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек
(td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек.
Стобец 1
|
Стобец 2
|
Для тегов tr и td есть следующие align
- выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
valign
- выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
bgcolor
- задает цвет строки
width
- ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
height
- высота ячейки (все ячейки в строке примут данный параметр)
Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:
Таблица html
Стобец 1
|
Стобец 2
|
Текст в первой ячейке первого столбца
|
Текст во второй ячейке второго столбца
|
Результат
С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!)
Спасибо за внимание! Надеюсь материал был полезен!
В данном разделе рассматриваются некоторые специфичные возможности отдельных браузеров, а также отдельные тонкости построения и отображения таблиц.
Отображение пустых ячеек в HTML таблицах
Одной из особенностей представления HTML таблиц различными браузерами является отображение пустых ячеек. Согласно описанию HTML языка все браузеры должны дополнять строки пустыми ячейками, если в какой-либо строке их количество задано меньшим, чем в остальных строках. Кроме того, в любом месте таблицы могут находиться ячейки, не содержащие данных.
Существует различие между пустыми ячейками и ячейками, содержащими невидимые данные. В пустых ячейках внутри пары тегов
и | не содержится никакой информации или один или более пробелов, которые не трактуются как данные. Ячейки, содержащие невидимые данные, к примеру, могут содержать код или код перевода строки
, или любой текст, цвет которого совпадает с цветом фона ячейки. Если ячейки, содержащие данные (пусть даже невидимые), отображаются всеми браузерами одинаково, то пустые ячейки будут показаны по-разному. Браузер Netscape пустую ячейку не показывает, т. е. место, где располагается данная ячейка, будет закрашено цветом фона страницы, а не цветом фона ячейки в отличие от ячеек, содержащих данные. Вокруг пустых ячеек не прорисовывается рамка. Пример HTML таблицы с пустой ячейкой приведен на рис. 4.15.Рис. 4.15.
Пустая ячейка HTML таблицы отображается по-разному различными браузерами
Microsoft Internet Explorer и те, и другие ячейки отображает цветом фона ячеек. Такой браузер как NSCA Mosaic предоставляет пользователю возможность самому определить характер выдачи пустых ячеек таблицы с помощью выбора соответствующих опций. Знание таких особенностей позволит разрабатывать таблицы, которые будут отображены подходящим образом, вне зависимости от выбранного пользователем браузера. В ряде случаев достаточно для этого вместо некоторых пустых ячеек создавать ячейки, содержащие единственный код.
Популярное в рубрике:
Перенос контактов на новый телефон android
читать
Самсунг Галакси перезагружается сам по себе — Решения Galaxy note...
читать
Основные возможности Kaspersky Rescue Disk
читать
Макбук не подключается к wifi Макбук не видит вай фай
читать
Top