От автора: в CSS есть селекторы для поиска элементов на основе их положения в дереве документа. Их называют индексными псевдоклассами, потому что они смотрят на положение элемента, а не на его тип, атрибуты или ID. Всего их пять.

:first-child и:last-child

По названию вы могли догадаться, что псевдоклассы:first-child и:last-child выбирают первый и последний дочерний элемент в узле (элементе). Как и с другими псевдоклассами, :first-child и:last-child оказывают минимальное стороннее воздействие при использовании простых селекторов.

Рассмотрим HTML и CSS ниже:

List of fruits

• Apples
• Bananas
• Blueberries
• Oranges
• Strawberries

На скриншоте ниже показан результат.

Заголовок h2 и первый li окрасились в розовый, так как:first-child не привязан к конкретным элементам. Тег h2 – первый ребенок тега body, а li – первый дочерний элемент ul. Но почему оставшиеся элементы li зеленые? Потому что:last-child тоже не привязан к конкретному элементу, а ul является последним дочерним элементом в теге body. По сути, в стилях выше мы прописали *:first-child и *:last-child.

Если добавить к:first-child и:last-child простой селектор, они станут конкретнее. Давайте ограничим нашу выборку только элементами списка. Замените:first-child на li:first-child и:last-child на li:last-child. На скриншоте ниже показан результат.

:nth-child() и:nth-last-child()

Уметь выбирать первый и последний дочерние элементы в документе неплохо. А что если нужно выбрать четные или нечетные элементы? Может, нам нужно выбрать шестой элемент в дереве или применить стили к каждому третьему дочернему элементу. Здесь нам помогут псевдоклассы:nth-child() и:nth-last-child().

Как и:not, :nth-child() и:nth-last-child() также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть:

ключевым словом odd;

ключевым словом even;

целочисленным значением типа 2 или 8;

аргументом в форме Аn+B , где А – шаг, B – смещение, а n – переменная с положительным целочисленным числом.

Последний аргумент немного сложнее остальных. Разберем его чуть позже.

Чем отличаются:nth-child() и:nth-last-child()? Они отличаются точкой отсчета: :nth-child() считает вперед, а:nth-last-child() – назад. CSS индексы используют натуральные числа и начинаются с 1, а не с 0.

С помощью псевдоклассов:nth-child() и:nth-last-child() удобно создавать чередующиеся узоры. Полосатая таблица – идеальный пример использования. CSS ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:

tr:nth-child(even) { background: rgba(96, 125, 139, 0.1); }

Если переключиться с:nth-child на:nth-last-child, полосы инвертируются, так как отсчет начнется с низа. Смотрите скриншот ниже.

А хотите что-нибудь посложнее, с более сложными аргументами? Давайте создадим документ с 20 элементами, как показано ниже.

С помощью:nth-child() и:nth-last-child() можно выбрать один определенный элемент. Можно выбрать все дочерние элементы после заданной позиции, или можно выбрать элементы с кратностью со смещением. Давайте изменим фон шестого элемента:

Item:nth-child(6) { background: #e91e63; }

Еще раз, А – шаг. Это множитель для n, начинающийся с 1. То есть если А = 3, то 3n выберет третий, шестой и девятый элементы и т.д. Именно это можно наблюдать на скриншоте ниже.

Здесь уже все немного интереснее. С помощью:nth-child() и:nth-last-child() можно выбрать все элементы после заданной точки. Давайте выберем все элементы кроме первых семи:

Item:nth-child(n+8) { background: #e91e63; }

Здесь шаг не задан. Как результат, n+8 выбирает все элементы n, начиная с восьмого. Смотрите скриншот ниже.

Замечание: отрицательное смещение

Отрицательные значения и диапазоны также валидны. Запись типа:nth-child(-n+8) инвертирует выборку и выбирает первые восемь элементов.

С помощью смещения и шага можно выбрать каждый третий элемент, начиная с пятого:

Item:nth-child(3n+5) { background: #e91e63; }

Результат.

only-child

Псевдокласс only-child выбирает элемент только в том случае, если он единственный дочерний элемент. Ниже представлено два маркированных списка. В первом один элемент, во втором три:

• Apple

• Orange
• Banana
• Raspberry

Селектор li:only-child{color: #9c27b0;} выберет

:empty

С помощью псевдокласса:empty можно выбрать элементы, у которых нет дочерних элементов. Псевдокласс:empty говорит сам за себя (empty от англ. «пустой»). Чтобы попасть в выборку:empty, элемент должен быть абсолютно пустым, не должно быть даже пробелов. То есть попадает в выборку, а нет.

Иногда WYSIWYG редакторы вставляют пустые теги p в ваш контент. С помощью:empty и:not можно делать так, чтобы к этим элементам не применялись стили. Например, p:not(:empty).

Выбор элементов определенного типа по их индексу

Описанные в предыдущем разделе псевдоклассы выбирают элементы, если те занимают определенную позицию в дереве документа. Например, p:nth-last-child(2) выберет все теги p перед последним внутри родительского блока.

В этом разделе мы поговорим о типизированных индексных псевдоклассах. Эти псевдоклассы также выбирают элементы по значению индекса, но выбор ограничен определенным типом. Например, нужно выбрать пятый тег p или четные h2.

Существует пять таких псевдоклассов, имена которых полностью противоположны их нетипизированным коллегам:

nth-last-of-type()

Грань между ними и дочерними индексными псевдоклассами тонка. Запись p:nth-child(5) находит только пятый тег p, а запись p:nth-of-type(5) находит все теги p и вычленяет среди них пятый.

Давайте создадим другой документ. В нем также 20 элементов, только некоторые — это теги p, а другие – div. Теги p со скругленными углами, смотрите скриншот ниже.

Не кажется ли вам, что черно-белая таблица выглядит скучновато? Вот и мы так думаем! Поэтому в этом уроке мы поговорим о том, как изменить цвет таблицы в HTML. Существует три возможности добавления цвета, для каждой из которых присутствует свое свойство.

1. Указание цвета фона ячеек. Осуществляется с помощью свойства background-color .
2. Указание цвета текста в ячейках. Осуществляется с помощью свойства color .
3. Указание цвета рамок ячеек. Осуществляется с помощью свойства border-color .

Ранее, чтобы изменить цвет, применялась более сжатая форма описания рамки. Выглядела она вот так:

Border: 1px solid lightgray

И за цвет здесь отвечала последняя часть – lightrgay .

Существуют различные способы, позволяющие задать значение цветов в CSS . Мы же покажем вам, как происходит описание цвета с использованием атрибутов.

Как изменить цвет ячейки

Давайте посмотрим, как выглядит код в CSS , в котором задан цвет для ячейки.

Td { background-color: цвет-фона; }

Разумеется, изменять цвета можно и у table , и у td , и у th . Давайте попробуем придать нашей таблице умножения более солидный вид.

Добавим стили для ячеек-заголовков с тегом th , а также для ячеек по диагонали, в которых расположены квадраты чисел:

Результат в браузере:

Как изменить цвет рамки в таблице

Как вы уже заметили в примере выше, в таблице мы изменили цвет рамки. Для этого мы использовали свойство border. В нём задаются параметры в порядке, перечисленном ниже:

1. тип линии, в нашем случае solid (сплошная)
2. толщина линии, в нашем случае 1px
3. цвет линии, в нашем случае синий

Напомним ещё раз, как выглядит задание цвета рамки для ячейки:

Td { border: 1px solid blue; }

Как изменить цвет строки в таблице

Итак, мы с вами научились менять цвета ячеек, а также ячеек-заголовков, используя возможности CSS. Если мы указываем стили для таких тегов, как th или td , то должны понимать, что применимы стили будут и к остальным тегам.

Однако, бывают ситуации, когда надо изменить цвет конкретной ячейки или же несколько ячеек, или же всю строку целиком. Что делать в данном случае? Здесь следует использовать классы, а также осуществлять применение их стилей. На практике это выглядит вот так:

RowGreen { background-color:green; }

А чтобы изменить цвет с помощью этого класса определённые строки нужно сделать следующее:

И результат в браузере:

Как изменить цвет текста в таблице

Для того, чтобы изменить цвет текста в таблице используется свойство color . Применять его можно к самым разным элементам: к table, tr, th, td. В зависимости от этого цвет в выбранном элементе будет изменён. Например, для всей таблицы зададим зелёный цвет шрифта:

Table { color: green; ... }

Аналогично можно изменять цвет для отдельных ячеек. А на этом данный урок заканчивается, не забудьте сделать домашнее задание. Всем пока!

Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.

Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border:

Table { border-collapse: collapse; /*убираем пустые промежутки между ячейками*/ border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/ }

Границы ячеек заголовка каждого столбца задаются для элемента th:

Th {border: 1px solid grey;}

Границы ячеек тела таблицы задаются для элемента td:

Td {border: 1px solid grey;}

Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:

Th, td {border: 1px solid grey;}

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

Table {border: 3px solid grey;}

Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */ table {border-top: 3px solid grey; } /* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */ td {border-bottom: 1px solid grey;}

Подробнее о свойстве border вы можете прочитать .

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или % , например:

Table {width: 600px;} th {width: 20%;} td:first-child {width: 30%;}

Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов и . Фиксировать высоту с помощью свойства height не рекомендуется.

Th, td {padding: 10px 15px;}

3. Как задать фон таблицы

По умолчанию фон таблицы и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка ,
,
.

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега

с помощью тега

Можно задать фон для любого количества столбцов;

с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);

с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

Подробнее про CSS-селекторы вы сможете прочитать .

5. Как добавить таблице заголовок

Добавить заголовок в таблицу можно с помощью тега , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align . Наследуется.

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.

Синтаксис

Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.

Синтаксис

Table {border-collapse: separate; border-spacing: 10px 20px;} table {border-collapse: separate; border-spacing: 10px;} Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.

Синтаксис

Table {table-layout: fixed;}

10. Лучшие макеты таблиц

1. Горизонтальный минимализм

Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .

При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .

Td { border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; }/*остальной код - как в примере выше*/

Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:hover td {background: #e8edff;}

2. Вертикальный минимализм

Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.

Th { font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; } td { border-right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; }

3. «Коробочный» стиль

Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.

Th { font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; } td { background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; } tr:hover td {background: #ccddff;}

Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.

Table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } th { font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; } td { background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px; }

4. Горизонтальная зебра

Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.

Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:nth-child(2n) {background: #e8edff;}

5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; } td { color: #669; padding: 7px 17px; } tr:hover td {background: #ccddff;}

Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; padding: 10px; } td { color: #669; border-top: 1px dashed #fff; padding: 10px; background:#ccddff; } tr:hover td {background: #99bcff;}

Table {border: 1px solid #6cf;} th { font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; } td { color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; }

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

Png") 98% 86% no-repeat; } th { font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; } td { color: #669; border-top: 1px solid white; padding: 10px 12px; background: rgba(51, 51, 153, .2); transition: .3s; } tr:hover td { background: rgba(51, 51, 153, .1); }

Здравствуйте, уважаемые читатели блога сайт. Решил написать небольшой пост по теме использования CSS в целях улучшения восприятия посетителями сайта.

Ни с того, ни с сего в голову пришла мысль, что если пункты в правом меню моего блога оживить с помощью чередования фонового цвета (сделать разные цвета для четных и нечетных строк), то это может повысить юзабилити. Надежды я тут возлагаю на удобство восприятия большого количества информации при ее разбиении на блоки (как это, например, происходит при использовании абзацев в тексте).

Подобную практику очень часто применяют при стилевом оформлении таблиц, когда хотят повысить наглядность выводимой в них информации. По ходу поиска решения оказалось, что задача эта решается довольно просто и средствами одного лишь CSS.

Не требуется помечать классами четные и нечетные элементы списка (правое меню у меня на основе функционирует). Достаточно лишь дописать пару строк кода с использованием псевдокласса nth-child в файл CSS , который отвечает за стилевое оформление сайта. Однако, nth-child имеет и массу других применений, о чем тоже не премину упомянуть в посте.

Возможности псевдокласса nth-child и его применение на сайте

Собственно, после анонсирования псеводкласса nth-child можно было бы пост и завершать, ибо вы и сами можете нагуглить массу информации по нему. Но это не наш путь, поэтому продолжим. Итак, сначала я опишу свои действия по превращению правого меню в «полосатое». Достаточно было выяснить с помощью встроенных в браузеры инструментов для разработчиков (вызывается из контекстного меню нужного элемента на веб-странице выбором пункта подобного «Просмотр код элемента») в каком месте файла стилей задается внешний вид строк этого списка.

Принцип работы с инструментами разработчиков аналогичен тому, что я описывал в статье про . Кликаем правой кнопкой по любому пункту в левом меню моего блога и смотрим на открывшейся панели результирующий отчет:

Слева вы увидите Html код этого элемента (нас интересует элемент с тегами LI — строка списка), а в правой колонке приведены CSS правила, которые браузер использует для его стилевого оформления. Где находится стилевой файл вы сможете незамедлительно узнать, подведя курсор мыши к его названию.

В моем случае это будет файл , который можно открыть подключившись к сайту по ФТП и пройдя по следующему пути (править файлы шаблона из админки WordPress я бы не советовал, ибо нет возможности сделать шаг назад, как это позволяет, например, ).

/wp-content/themes

Собственно, на панели инструментов для разработчиков в области CSS стилей вы даже строку найдете, на которой нужное правило прописано в файле стилей. В моем случае это 281 строка. Поэтому, открыв style.css в Нотепаде (он у меня назначен редактором по умолчанию для всех файлов, которые встречаются в движке сайта), я на эту строку немедленно переместился.

И дописал сразу под ней еще пару правил с (это правило отвечает за изменение цвета фона строки правого меню, когда прямо над ней находится курсор мыши — это делает меню более «живым», что ли) и с упомянутым выше псевдоклассом nth-child. Если про hovver мы уже говорили (см. ссылку чуть выше), то про nth-child поговорим сейчас. Если обратили внимание, что в круглых скобках для этого псевдокласса прописан параметр 2n.

Nth-child(2n)

В общем виде значение этого псевдокласса nth-child задаётся с помощью выражения: an+b , где a и b - целые числа, а n - счетчик, принимающий целые значения от 0 и больше: 0,1,2,3... В нашем случае при при изменение счетчика n мы будем получать цифры 0, 2, 4, 6 и т.д. Это означает, что прописанное для этого псевдокласса свойство (в нашем случае это правило для задания фона строки списка с помощью ) в списке на #E4F2FA.

Этот шестнадцатеричный наиболее часто. Для поиска подходящих цветов я использовал программу Contrast Analyser 2.0, описанную по приведенной ссылке. Она позволяет захватить цвет с экрана и подобрать его более светлые тона, что я, собственно, и сделал.

Для фона строки меню, при наведении на нее курсором мыши (псевдокласс hover), я выбрал еще более светлый оттенок из того же ряда.

Другие примеры использования nth-child

Если захотите изменить фон или каким-то еще образом воздействовать на внешний вид (например, добавить им отступы, увеличить шрифт или сделать еще что-то более неприличное), то используйте выражение. Можете проверить, что подставляя вместо n целые числа начиная с нуля, вы получите в результате только нечетные числа. Можно использовать сразу оба варианта (для четных и нечетных строк списков, таблиц или чего-либо еще).

Еще несколько примеров использования nth-child для выделения различных строк списков, таблиц и тому подобных элементов:

1. Для глумления над нечетными элементами можно использовать вместо показанного выше выражения nth-child (odd), а для четных — nth-child (even).
2. Если захотите внести изменения только в четвертую строку? то допишите к CSS правилу через двоеточие псевдокласс nth-child (4).
3. Хотите изменить вид строк начиная с девятой? Нет проблем — nth-child (n+9).
4. Если хотите наоборот, выделить только первые девять элементов, то воспользуйтесь конструкцией nth-child (-n+9).
5. Хотите выделить элементы начиная с девятого по восемнадцатый — добавьте составной псевдокласс:nth-child (n+9):nth-child (-n+18). Чистая логика.
6. Хотите сделать то же самое, что и в предыдущем пункте, но при этом выделить в этом диапазоне только четные строки? Да нет проблем — :nth-child (n+9):nth-child (-n+18):nth-child (even).

Ну вот, где так. Штука может оказаться весьма полезной. Во всяком случае, мне пригодилась.

Удачи вам! До скорых встреч на страницах блога сайт

Вам может быть интересно

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода
Display (block, none, inline) в CSS - задаем тип отображения Html элементов на вебстранице
CSS свойства text-decoration, vertical-align, text-align, text-indent для оформления текста в Html
List style (type, image, position) - Css правила для настройки внешнего вида списков в Html коде
Как найти и удалить неиспользуемые строки стилей (лишние селекторы) в CSS файле вашего сайта
Position (absolute, relative и fixed) - способы позиционирования Html элементов в CSS (правила left, right, top и bottom) Разное оформление для внутренних и внешних ссылок через CSS
Приоритеты в Css и их повышение за счет Important, комбинация и группировка селекторов, пользовательские и авторские стили
Правила Font (Weight, Family, Size, Style) и Line Height для оформления шрифтов в CSS
Float и clear в CSS - инструменты блочной верстки
Для чего нужен CSS, как подключить каскадные таблицы стилей к Html документу и основы синтаксиса этого языка
Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS

Любая таблица состоит из столбцов и строк.

Тег создает строку, а тег ячейку в строке. Соответственно сколько ячеек включено в строку, столько будет и столбцов в таблице.

Тег также создает ячейку. Его отличие от тега в том, что ячейка созданная тегом является ячейкой - заголовком: ее содержимое располагается по центру, а если это текст, то браузер отображает его жирным шрифтом.

Содержимое ячейки, созданной тегом по умолчанию располагается в ее левой чаcти.

Тег создает заголовок таблицы, он располагается внутри тега

Заголовок таблицы

1-я ячейка 1-ой строки	2-я ячейка 1-ой строки
1-я ячейка 2-ой строки	2-я ячейка 2-ой строки

Выравнивание таблицы. Выравнивание содержимого ячеек

Для выравнивания таблицы используется атрибут align тега

При помощи атрибут align Вы можете разместить таблицу в левой или правой (align= "left" и align= "right" ) части окна браузера (родительского элемента ) или по его центру (align= "center" ).

Выравнивание содержимого строк (тег

>

Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.

Границы таблицы и ячеек

Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.

Атрибут border тега

позволяет сделать границы видимыми и задать их толщину. При этом будут отображены границы и вокруг таблицы и вокруг каждой ячейки.

Толщина границы (или рамки ) задается в пикселях. В качестве значения атрибута border указывается целое положительное число. Если атрибут border указан без значения, толщина рамки составит 1 пиксель.

Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует ).

По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.

Атрибут bordercolor задает цвет границы и устраняет эффект трехмерности. Атрибут может использоваться для задания цвета границы таблицы (тег

), строки (тег ) или ячейки (тег

). Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS ). Атрибут border не указан. Поэтому границы отсутствуют. Толщина границы таблицы составляет 3 пикселя. Ячейки имеют границы толщиной 1 пиксель! Частичное отображение границ Граница таблицы и рамка вокруг ячеек могут быть отображены частично. Атрибут frame тега указывает, где рисовать границу таблицы. Атрибут rules указывает, как отобразить границы ячеек. "500px" frame= "hsides" rules= "cols" > Установлены горизонтальные границы таблицы И отображены границы между колонками Отступы внутри и снаружи ячеек При форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек. Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding тега . Внешние отступы - расстояние между границами соседних ячеек и расстояние от границ ячеек до границы таблицы, задаются атрибутом cellspacing тега . В качестве значений атрибутов указываются целые положительные числа, которые задают расстояние в пикселях. Расстояние от содержимого ячеек до их границ составляет 10 пикселей Расстояние между ячейками и от ячеек до границы таблицы составляет 25 пикселей Объединение ячеек При оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега

. Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали. Оба атрибута имеют смысл, если таблица состоит из нескольких строк. 1 2 3 4 1 2 3 4 Фон таблицы. Фон ячеек таблицы В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки. Атрибут background тега задает изображение, которое будет фоновым рисунком таблицы. В качестве значения атрибута указывается адрес файла с изображением - абсолютный или относительный путь к файлу (). Атрибут bgcolor тега задает цвет фона таблицы. Цвет можно задать двумя способами () При помощи этих же атрибутов задают фоновый рисунок и цвет фона для любой ячейки таблицы (тег , и . Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали - при помощи атрибутов align и valign соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor . При использовании этих тегов следует знать несколько нюансов, которые как раз и определяют различия между ними. Теги и должны быть расположены перед тегом , сразу после открывающего таблицу тега ). Темно-розовый - цвет фона таблицы. Фоновый рисунок отдельной ячейки - небо! Напомним также о существовании атрибута cols тега , который указывает браузеру количество столбцов в таблице. Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы. Редактирование таблицы В этом разделе, рассмотрим теги, которые применяют при редактировании сразу нескольких элементов таблицы. Эти теги можно разделить на две группы. К первой группе относятся теги и . Они практически идентичны и служат для задания некоторых свойств и изменения характеристик одной или нескольких колонок таблицы. Один из этих тегов располагают сразу после тега . Допустим это тег . При помощи атрибута span тега указывают количество колонок, к которым будут применены атрибуты align , valign или width (выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок ). Если атрибут span в теге отсутствует, то будут изменены характеристики одной - первой колонки таблицы. При втором использовании тега задаются свойства для следующих (следующей - если атрибут span отсутствует ) колонок таблицы и т.д. "2" width= "70px" > 1 2 3 4 5 1 2 3 4 5 Ко второй группе тегов относятся также практически идентичные между собой теги . Строки, помещенные в тег представлены вверху таблицы, а строки заключенные в тег будут расположены внизу таблицы. Оба тега могут быть применены только один раз в пределах одной таблицы. Тег допускается использовать несколько раз внутри тега . "right" bgcolor= "#00FF33" > 1 2 3 4 5 6 7 8 9 10 1 2 3 4 5 6 7 8 9 10 Сергей Савенков какой то “куцый” обзор… как будто спешили куда то © 2024 Главные новости высоких технологий