Сегодня вы познакомитесь с еще одним очень мощным элементом создания сайтов - HTML-таблицами. А почему мощным? Видите ли, с давних пор и по сегодняшний день, чаще всего таблицы в HTML используются не по их прямому назначению - отображению табличных данных, а для создания глобального каркаса страницы. То есть создается таблица, растягивается во всю ширину страницы, а потом в ее левом столбце делают одно меню, в правом - другое, в среднем располагают основную информацию и так далее.
Кстати, если не знали, то создание сайтов, а вернее HTML-кода, называется версткой, и вы сейчас учитесь именно ей. Вообще существует три вида верстки: табличная, о которой я вам рассказал выше; слоями (блочная), требующая среднего уровня знания стилей (CSS) и комбинированная. До сих пор в интернете идут ожесточенные споры о том, какая же из них лучше, но поверьте, спорят там в основном любители споров или новички, так как любой профессионал вам скажет - лучшая верстка та, которая больше подходит в конкретном случае, вот и все! А спорить о том, что лучше - танк или самолет - пустая трата времени. Но справедливости ради скажу, что по многим параметрам блочная верстка все же предпочтительней, поэтому, если верстальщик может сделать задание, как с помощью таблиц, так и с помощью блоков, то обычно выбирается последнее. И это правильно. Но вам об этом задумываться рано, ведь, как я уже сказал, с помощью одного языка HTML можно верстать только таблицами.
Создание таблиц в HTML
Для создания простой HTML-таблицы надо использовать три типа тегов, это
|
. Поэтому давайте сделаем так: посмотрите на пример указанный ниже и попробуйте самостоятельно догадаться, какие теги и для чего нужны.
Пример создания таблиц в HTML
Результат в браузере
Теперь проверим ваши догадки. И опять вам говорю - не старайтесь все запоминать, не надо, главное - понять. Итак: Тег | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ... | создает ячейки таблиц и должен располагаться только внутри тега||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
.
Тег | ... | . Да, его нет в нашем примере, так как это практически аналог тега
и применяется вместо него, когда необходимо сделать заголовочные ячейки. Такие ячейки отличаются от обычных только тем, что браузеры выделяют в них текст жирным шрифтом и располагают содержимое по центру.
При создании таблиц всегда обращайте внимание на то, чтобы во всех рядах было одинаковое количество ячеек. Разное количество не является в HTML ошибкой, но в таких случаях ваша табличка может просто «поехать» и все отобразиться совсем не так, как вы хотели. HTML-таблицы по центру, слева, справаПо умолчанию браузеры располагают таблицы с левой стороны родительского элемента, в котором она находится. В большинстве случаев это вполне устраивает, особенно если таблицу растягивают во всю ширину. Но все-таки иногда хочется разместить HTML-таблицу по центру или справа. В прошлом у тега Теперь поясню. Используя эти значения, мы изменяем размер внешних полей (отступов) таблицы. Так как таблица является блочным HTML-элементом, а у блоков четыре стороны, то и параметры указываются для четырех сторон по часовой стрелке: style= "margin:сверху справа снизу слева" . Ну, что такое ноль, я думаю, вы понимаете, а вот «auto» говорит браузеру, чтобы он сам высчитывал с данной стороны размер пустого пространства, исходя из значений других сторон. Вот и получается, что если с трех сторон ноль, то с четвертой - все остальное пространство, а если с двух сторон «auto», то значит делим внешние поля пополам. И самое главное - не бойтесь использовать CSS вместо чистого и, во многих ситуациях, «деревянного» и устаревшего HTML. Так как этим вы вкладываете в свое развитие, а не возвращаетесь к каменным топорам! Тем более я вам все преподношу «на блюдечке». :) Пример расположения таблицы по центру
Результат в браузере
Изменение ширины HTML-таблиц и ячеекПо умолчанию браузеры высчитывают ширину таблицы исходя из содержимого ее ячеек, а изменить ее можно, используя знакомый вам атрибут width , общий синтаксис такой: Тем не менее, если указанная ширина будет меньше, чем необходимо для размещения всего содержимого HTML-таблицы, то браузеры ее проигнорируют и увеличат до нужной. А вот атрибута width для изменения ширины ячеек нет, вернее он был, но устарел, поэтому снова применим стили (CSS). style=
"width:значение"
>... |
style=
"width:значение"
>... |
В качестве значений для ширины ячеек лучше тоже использовать только пиксели (px) и проценты (%). Естественно процентные размеры будут высчитываться исходя из ширины таблицы. Только не забудьте, что при указании размеров в атрибуте style , всегда после чисел пишутся единицы измерения, в том числе и пиксели. И тоже, если вы укажете ширину ячейки, а содержимое в нее не уместится - браузер проигнорирует вашу ширину и установит свою. В HTML-таблицах ширина столбца всегда равна его самой широкой ячейке, что, впрочем, вполне естественно вообще для любых таблиц. Поэтому, меняя ширину одной (любой) ячейки - вы меняете ширину всего столбца. Пример изменения ширины HTML-таблиц и ячеек
Результат в браузере
Как вы уже знаете, по умолчанию браузеры не отрисовывают рамки у таблиц, поэтому, чтобы вы четко увидели картину изменения ширины, я установил атрибут border , о котором мы поговорим чуть позже. Изменение высоты HTML-таблиц и ячеекВ стандартном HTML у тега А вот для изменения высоты ячеек в HTML у тегов
и |
все-таки был атрибут height
(вот и пойми этих разработчиков), но он устарел, поэтому снова стили.
| style=
"height:значение"
>... |
style=
"height:значение"
>... |
Как и для ширины, используйте пиксели (px) или проценты (%), но здесь есть один момент. Когда вы указываете процентную запись, то конечно высота высчитывается исходя из размеров таблицы, поэтому если высота блока
Результат в браузере
Выравнивание в HTML-таблицахЕсли вы обратили внимание, то браузеры изначально определенным образом выравнивают содержимое ячеек таблиц. У обычных ячеек (
) содержимое выравнивается горизонтально по левой стороне и вертикально по центру, а у заголовочных ( |
) - в обоих случаях по центру.
| Для изменения выравнивания содержимого HTML-таблиц имеются атрибуты align и valign , которые указываются в тегах
и |
для отдельных ячеек:
| Горизонтальное выравнивание: align= "left" - Выравнивание по левой стороне ячейки. align= "center" - По центру. align= "right" - По правой стороне. valign= "top" - Выравнивание по верхней стороне ячейки. valign= "middle" - По центру. valign= "bottom" - По нижней стороне. Пример выравнивания в HTML-таблицах
Результат в браузере
Фон HTML-таблицВ старых версиях HTML у тегов таблиц был специальный атрибут bgcolor , который изменял цвет фона всей таблицы или ее части. Но в уроке Меняем цвет текста и фона мы с вами изучили универсальный способ изменения фона абсолютно любых HTML-элементов, поэтому им и пользуйтесь. А вот фонового изображения у таблиц язык HTML вообще не предусматривал, поэтому в свое время производители браузеров ввели для этого атрибут - background . Браузеры и до сих пор его понимают, но опять же, в уроке Изображения для фонов вы уже научились правильно устанавливать изображения-фоны для любых элементов. Домашнее задание. Все задание я вам расписывать не буду, обрисую только некоторые моменты, просто сделайте так, как показано в результате примера. Если вы в свое время не скачали картинки для обучения, то можете скачать сейчас.
А в этой статье я расскажу об их оформлении с помощью CSS. Для форматирования таблиц каскадные стили используют перечисленные ниже свойства. width и heightЗадают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера Table {width: 450px; height: 80%;} Указывает, где будет размещён заголовок таблицы, описанный тегом Эксклюзивно для обозревателя Firefox доступны значения left
(заголовок слева) и right
(справа от таблицы), но другие браузеры их не понимают. Table {caption-side: top;} Помогает избежать ситуаций, когда границы ячеек образуют двойные рамки. На рисунке ниже показан как раз такой случай. Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate;
даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse;
(результат показан на рисунке ниже). Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе - по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}
. Table {
border: 4px double #FCA360;
border-collapse: separate;
border-spacing: 10px 20px;
}
td {
padding: 3px;
border: 1px solid #FCA360;
} Задаёт таблице следующее оформление: Указывает, будет ли отображаться фон и границы ячейки, если она пуста. Значение у свойства может быть одно из двух: Указывает браузеру, как определять ширину ячеек таблицы, основываясь на их содержимом. Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height
) и шириной (width
). Помня это, оформим несложную таблицу, частично прокомментировав код.
В браузере таблица будет выглядеть, как показано ниже. width: 50%;
Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера
, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера. caption-side: bottom;
Размещаем заголовок снизу, под таблицей. border: 4px solid #006400;
Задаём таблице цветную рамку толщиной 4 пикселя. border-collapse: collapse;
Объединяем границы ячеек. table-layout: fixed;
Настраиваем способ определения браузером ширины таблицы. font-size: 13px;
Задаём размер шрифта заглавных ячеек. font-weight: bold;
Делаем текст внутри них жирным. background: #ADFF2F;
Устанавливаем цвет фона ячеек. border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;
Настраиваем верхние и нижние рамки. color: #039;
Определяем цвет текста. padding: 8px;
Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям. Табличные данные
- информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег Внутри тега По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border . Но стоит обратить внимание на то, что если добавить рамку только к элементу Table, th, td { border: 1px solid black; }
Попробовать »
Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing , которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально. Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing , то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse . Оно может принимать два значения: После добавления рамок к ячейкам таблицы стало заметно, что содержимое ячеек слишком близко расположено к краям. Для добавления свободного пространства между краями ячеек и их содержимым можно воспользоваться свойством padding : Th, td { padding: 7px; }
Попробовать »
Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height , задавая нужные размеры или самой таблице или ячейкам: Table { width: 70%; }
th { height: 50px; }
Попробовать »
По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали. CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align: При просмотре больших таблиц, содержащих много строк с большим количеством информации, бывает трудно отследить, какие данные относятся к конкретной строке. Чтобы помочь пользователям сориентироваться, можно использовать два разных фоновых цвета поочередно. Для создания описанного эффекта можно использовать селектор class , добавляя его к каждой второй строке таблицы:
Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс:nth-child , позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса:nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные): Tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »
Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных. Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс:hover к селектору строки таблицы и задать нужный цвет фона: Tr:hover { background-color: #E0E0FF; }
Попробовать »
Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin , задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе - за автоматическое выравнивание по центру: Table { margin: 10px auto; }
Попробовать »
Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу: Table { margin: 10px auto 30px; } Сами по себе таблицы выглядят довольно «бедно», к тому же браузеры по-своему отображают некоторые характеристики таблиц, в частности, рамки. Вместе с тем эти недостатки легко исправить воспользовавшись мощью стилей. При этом весьма расширяются средства по оформлению таблиц, что позволяет удачно вписать таблицы в дизайн сайта и нагляднее представить табличные данные. Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background
, которое применяется к селектору TABLE
. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background
не наследуется, для ячеек значением фона по умолчанию выступает transparent
, т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE
задать цвет у селектора TD
или TH
, то этот цвет будет установлен в качестве фона ячейки (пример 2.3). Пример 2.3. Цвет фона
В данном примере получим синий цвет фона у ячеек (тег Результат данного примера показан на рис. 2.4. Рис. 2.4. Изменение цвета фона Полем называется расстояние между краем содержимого ячейки и её границей. Обычно
для этой цели применяется атрибут cellpadding
тега Пример 2.4. Поля в таблицах XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
В данном примере с помощью группирования селекторов поля установлены одновременно
для селектора TD
и TH
. Результат примера показан на рис. 2.5. Рис. 2.5. Поля в ячейках Если применяется стилевое свойство padding
для ячеек таблицы,
то действие атрибута cellpadding
тега Для изменения расстояния между ячейками применяется атрибут cellspacing
тега Свойство border-spacing
действует только в том случае, если для селектора TABLE
не задано свойство border-collapse
со значением collapse
(пример 2.5). Пример 2.5. Расстояние между границами ячеек XHTML 1.0
CSS 2.1
IE 7
IE 8+
Cr
Op
Sa
Fx
Результат данного примера показан на рис. 2.6. Рис. 2.6. Вид таблицы при использовании border-spacing Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing
, поэтому в этом браузере для таблиц будет применяться значение cellspacing
заданное по умолчанию (обычно оно равно 2px). При добавлении к селектору TABLE
свойства border-collapse
со значением collapse
, атрибут cellspacing
игнорируется, а значение border-spacing
обнуляется. По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border
тега Известно, что атрибут cellspacing
тега Заметим, что это не совсем удобный способ создания границ, поскольку он имеет
ограниченную область применения. Так можно получить только одноцветную сетку,
а не вертикальные или горизонтальные линии в нужных местах. Стилевое свойство border
одновременно устанавливает цвет
границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные
линии на разных сторонах, лучше использовать производные —
border-left
, border-right
,
border-top
и border-bottom
,
эти свойства соответственно определяют границу слева, справа, сверху и снизу. Применяя свойство border
к селектору TABLE
,
мы добавляем рамку вокруг таблицы в целом, а к селектору TD
или TH
— рамку вокруг ячеек (пример 2.6). Пример 2.6. Добавление двойной рамки XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
В данном примере используется двойная рамка черного цвета вокруг самой таблицы
и сплошная рамка белого цвета вокруг каждой ячейки. Результат примера показан на рис. 2.7. Рис. 2.7. Граница вокруг таблицы и ячеек Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они
получаются опять же за счет действия атрибута cellspacing
тега Пример 2.7. Создание одинарной рамки XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
В данном примере создается сплошная линия зеленого цвета между ячейками и черная
вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8. Рис. 2.8. Граница вокруг таблицы По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением
из этого правила служит тег Пример 2.8. Выравнивание содержимого ячеек по горизонтали XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
В данном примере содержимое тега Рис. 2.9. Выравнивание текста в ячейках Выравнивание по вертикали в ячейке всегда происходит по её центру, если это
не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое
ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему
краю ячейки с помощью свойства vertical-align
,
как показано в примере 2.9. Пример 2.9. Выравнивание содержимого ячеек по вертикали XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
В данном примере устанавливается высота заголовка Рис. 2.10. Выравнивание текста в ячейках Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает. Старые браузеры не отображали цвет фона пустых ячеек вида К счастью эпоха однопиксельных рисунков и всяческих распорок на их основе прошла. Браузеры достаточно корректно работают с таблицами и без присутствия содержимого ячеек. Для управления видом пустых ячеек используется свойство empty-cells
, при значении hide
граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях: Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10). Пример 2.10. Пустые ячейки XHTML 1.0
CSS 2.1
IE
Cr
Op
Sa
Fx
Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б. а. В браузере Safari, Firefox, Opera, IE8, IE9 б. В браузере IE7 Рис. 2.11. Вид таблицы с пустыми ячейками |
|---|
