Рамка вокруг таблицы


Содержание

Создание таблиц в HTML — фон таблицы — рамка таблицы — объединение ячеек

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

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

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

За создание таблиц в HTML отвечает тег

и закрывающий тег

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

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

Для того чтобы, увидеть что из этого получится, создайте html страницу используя код расположенный ниже. Если не знаете как создать HTML страницу, смотрите урок основы HTML.

У вас должно получиться следующее:

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

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

т. е. то что мы будем изменять.

И так тег

имеет следующие атрибуты:

border — задает ширину рамки таблицы в пикселях, записывается так: .

bordercolor – цвет рамки таблицы, данный атрибут поддерживает не все браузеры, поэтому вы можете и не увидеть заданный цвет рамки:

Мы задали ширину рамки 2 пикселя, синего цвета, таблица примет следующий вид:

width – задает ширину таблицы в пикселях или процентах:

height – высота таблицы в пикселях или процентах:

Ширина таблицы будет 250 пикселей, а высота 150 пикселей, таблица будет выглядеть так:

align – выравнивание таблицы;

align=left – таблицы будет выровнена по левому краю;

align=right – таблица будет выровнена по правому краю:

Наша таблица должна выровняться по правому краю.

bgcolor – цвет фона таблицы, bgcolor=#FFC000 – цвет фона таблицы будет желтый:

Таблица получит следующий вид:

background – при помощи данного атрибута можно задать изображение, которое будет фоном таблицы.

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

добавьте background=»fon.gif » весь код:

Таблица примет следующий вид:

сellpadding – атрибут, задающий левый, правый, верхний и нижний отступы внутри ячейки. Например, если к нашему тегу

добавить сellpadding=10, то текст, написанный внутри ячеек, получит отступ.

cellspacing – задает отступ между ячейками таблицы.

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

прописать cellspacing=0. Весь код:

В результате наши ячейки прижались друг к другу, а текст внутри ячеек получил отступ:

hspace — задает промежуток от таблицы в лево и в право в пикселях, записывается так: hspace=20

nowrap – запрещает перенос слов в ячейке, записывается просто nowrap

Последние два атрибута применяются крайне редко, поэтому пример кода с ними я не показываю.

Теперь рассмотрим атрибуты тега

текст следует писать в одну строку, чтобы не было зазоров между ячейками.

Декоративная рамка

Для создания желаемой рамки ее необходимо предварительно нарисовать в каком-нибудь графическом редакторе. На рис. 3.4, например, показана рамка со скругленными углами. Затем это изображение разрезаем на 9 частей, помеченные на рисунке 3.5 оранжевыми линиями и номерами. Разрезать изображение можно, например, в программе ImageReady или другой подобной.

После разрезания рисунка на части получим 8 фрагментов:

Пятого фрагмента рамки не будет (5.gif), поскольку у нас его заменит содержимое. Теперь создаем таблицу размером 3х3, как показано на рис. 3.2 и в ее ячейках размещаем созданные рисунки.

Пример 3.4. Создание декоративной рамки

, некоторые из них такие же, как и атрибуты тега

width — ширина ячейки в пикселях или в процентах.

height – высота ячейки в пикселях или процентах.

Например, зададим ширину первой ячейки первой строки в 30% — w >

Наша таблица примет следующий вид:

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

align – выравнивает содержимое ячеек, имеет следующие значения:

align=»lef» – содержимое ячейки будет выровнено по левому краю;

align=»right» – содержимое будет выровнено по правому краю;


align=»center» – содержимое будет выровнено по центру ячейки.

Добавим эти атрибуты и значения в наш код и выровняем содержимое 1 — й ячейки по левому краю (по левому краю содержимое выравнивается по умолчанию, однако в некоторых случаях данный атрибут необходим), содержимое 2 – й ячейки выровняем по правому краю, а 4 -й по центру.

bgcolor – при помощи данного атрибута можно задать цвет ячейки.

background – устанавливает изображение в виде фона ячейки.

С данными атрибутами мы уже встречались, рассматривая атрибуты тега

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

Для этого в наш код добавим необходимые атрибуты, для наших ячеек bgcolor=»#FFFF00″ для 2-й ячейки и background= «fon.jpg» для 4-й ячейки. В результате наша таблица станет выглядеть так:

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

bordercolor – задает цвет рамки ячейки.

C этим атрибутом мы так же встречались, рассматривая атрибуты тега

. Напоминаю, что он работает не во всех браузерах. Обратите внимание на то, что у тега

нет атрибута border обозначающего рамку ячейки. Зададим цвет рамки 2 – й ячейки красным для этого ко второй ячейке добавим атрибут bordercolor=»#FF0000″

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

valign – он производит выравнивание содержимое ячеек по вертикали.

Имеет следующие значения:

valign=»top» – выравнивание содержимого ячейки по верхнему краю;

valign=»bottom» – выравнивание содержимого ячейки по нижнему краю;

valign=»middle» – выравнивание посередине ячейки;

valign=»baseline» – выравнивание содержимого ячейки по базовой линии.

Добавим эти атрибуты к каждой из наших 4-х ячеек.

Наша таблица примет следующий вид:

Последнее что нам необходимо рассмотреть в этом уроке, это объединение ячеек таблицы. Для того чтобы объединить несколько ячеек в строке, существует атрибут colspan=»» где в кавычках указывается количество ячеек которое необходимо объединить.

Чтобы объединить ячейки по вертикали т. е. в столбце, необходимо использовать атрибут rowspan=»» где в кавычках указывается количество ячеек, которое необходимо объединить.

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

Теперь объединим 1-ю и 2-ю ячейку в строке и 3-ю, 6-ю и 7-ю ячейку в ряду. Код нашей таблицы будет следующий:

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

Это были последние атрибуты ячеек. Как вы можете видеть атрибутов у тегов

и

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

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

Делаем границы для таблицы в HTML

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

В прошлом уроке таблицы отображались без границ. И, согласитесь, выглядит так себе, даже и табличкой-то не назовёшь. Чтобы сделать границы таблицы в HTML, следует добавить к тегу атрибут border, придав ему значение отличное от нуля.

Итак, давайте сделаем границы для таблицы. Например, для уже имеющейся у нас:

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

Как убрать границы таблицы

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

Атрибут позволяет создать, но не управлять границами. Он позволяет лишь изменять их толщину.

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

Давайте посмотрим как применять CSS для создания внешних и внутренних границ таблицы.
Для этого удалим у нашей таблицы атрибут border и добавим стили:

Так мы добавили только внешнюю границу для таблицы синего цвета.

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

Теперь давайте добавим границы и для каждой ячейки. Для этого просто дополним стили:

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

Как убрать отступы между ячейками в таблице HTML

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


Однако, от таких вот границ, которые именуются двойными, вполне можно избавиться, если использовать CSS-свойство border-collapse. На практике это выглядит вот так:

Как результат — убирается расстояние между ячейками:

Значение collapse, приписанное атрибуту border, позволяет убрать двойные рамки. Как можно увидеть, результатом является «схлопывание» границ ячеек, расположенных рядом, а также рамок ячеек и внешней рамки таблицы. Что касается последней, то она может удалиться и вовсе. И если есть необходимость в ее отображении, необходимо увеличивать ее ширину. Таким образом мы избавились от разделителей в таблице. А в следующем уроке мы поговорим о том, как можно задавать вертикальные и горизонтальные границы. Всем удачи!

Свойство CSS border

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

1. Синтаксис CSS border

  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения
    • none или hidden — отменяет границу
    • dotted — рамка из точек
    • dashed — рамка из тире
    • solid — простая линия (применяется чаще всего)
    • double — двойная рамка
    • groove — рифленая 3D граница
    • ridge , inset , outset — различные 3D эффекты рамки
    • inherit — применяется значение родительского элемента
  • border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

Вторая рамка вокруг ячеек таблицы в Chrome, как убрать?

Создаю таблицу используя свойство display: table . У ячеек таблицы есть своя рамка толщиной 5px, и свойство border-radius . В браузере Chrome (только) вокруг рамок ячеек появляется ещё одна рамка толщиной 1px (которая при масштабировании исчезает и видна только в местах скругления рамок ячеек, как на скриншоте). Как избавится от нее?

1 ответ 1

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css css3 или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35399

Отображение границ таблицы html-страницы

Границы html-таблицы легко изменить с помощью средств css. Настройка их отображения осуществляется за счет свойств: collapse и spacing.

Для редактирования вида таблицы используют группу свойств border. Она позволяет настроить ширину, цвет, присутствие/отсутствие границ, их стиль и другие особенности отображения.

Основы

Таблица без указания стилей будет выглядеть как структурированный текст без границ. Table в html строится благодаря тегам:

  • tr для строк;
  • th для заголовков;
  • td для столбцов.

Размер и шрифт текста, фон, отступы от края окна браузера заданы в css в контейнере body.

С помощью стилей оформляют вид матрицы. Свойство border позволяет прописать значение толщины, вида и цвета границы html-таблицы.

Сокращенно задается по шаблону border: width style color.

Для определенной стороны задается по шаблону border-top(/right/bottom/left)-style(/color/width/radius).

Padding устанавливает отступы внутри ячейки от текста до рамки, text-align задает выравнивание.

С помощью стилей оформляют вид таблицы. Свойство border позволяет прописать значение толщины, стиля и цвета рамки. Padding устанавливает отступы от текста, text-align задает выравнивание.

Без рамок

Использовать border или отдельно прописывать border-color, -width и -style не обязательно, так как сделать html-таблицу без границ можно с полноценным оформлением. Например, следующий код задает фон, отступы и скругленные углы (последняя матрица без внутренних и внешних линий).

Благодаря возможности задать фон для каждой ячейки, таблица без границ может выглядеть так, будто у нее они есть.

Можно убрать границы html-таблицы, оставив внутренние. Для этого, например, прописывают свойство border для ячеек (tr), устанавливают на смежных сторонах общие рамки (collapse) и запрещают рисовать линии вокруг матрицы (hidden). Последнее действие скроет линии ячеек, которые при включенном collapse оказываются там же, где и внешние края таблицы.

Collapse и separate

Одно из основных свойств table в html — border-collapse — определяет, как будут отображаться границы ячеек. Свойство может иметь одно значение из трех: collapse, separate, inherit.

По умолчанию установлено значение separate, поэтому каждая ячейка будет иметь свою границу. Благодаря collapse можно слить линии ячеек, чтобы их содержимое разделяла одна рамка. На картинке представлено три описанных выше состояния границ: без стилей; со значением border-collapse по умолчанию; со значением border-collapse, оставляющим между ячейками общую линию.


Двойные рамки

Свойство collapse позволяет сделать границы ячеек в html-таблице как независимыми друг от друга, так и общими. С ним часто используют свойство border-spacing, регулирующее расстояние между рамками ячеек. Можно указать как горизонтальный, так и вертикальный интервал.

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

Пустые ячейки

Если для таблицы не задано объединение границ ячеек, свойство empty-cells позволяет отобразить их линии и фон, которые считаются пустыми (помечены как visibility или не имеют символов). Если нужно показать рамки и фон каждой ячейки, свойству задают значение show.

Значение hide прячет границы и фон пустых блоков. Если все ячейки ряда пусты, то строка имеет нулевую высоту и только одну вертикальную линию.

Атрибут

Для выделения границ группам элементов (ячейкам, столбцам, строкам, группам строк или столбцов) существует атрибут rules. Его значение прописывается непосредственно в html в теге table.

Он позволяет выборочно прорисовать рамки элементов. Достаточно указать атрибут в html, это создаст внутренние линии между ячейками. Границу html-таблицы придется указывать вручную в css.

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

У атрибута может быть несколько значений. All создает границы между ячейками с толщиной рамки, равной 1px. Cols создает линии между столбцами, rows — между строками, none стирает края. На картинке приведены примеры таблицы со значениями all и rows.

Изменить цвет границ ячеек и ширину рамки при использовании атрибута rules можно с помощью border и bordercolor.

Конфликты стилей

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

В режиме collapse возникают конфликты офрмления. Из-за того, что на одну границу может распространяться правило двух разных ячеек, возникает проблема выбора стиля, который будет приоритетным. Как пишет Е. Мальчук, выигрывает самый «броский» (кроме hidden).

  1. Если у одного из элементов в свойстве border-style для спорной границы указано значение hidden, этот стиль побеждает. Hidden имеет высший приоритет.
  2. Самый маленький вес имеет значение none. Оно тоже диктует линии не отображаться, но чтобы указание исполнилось, все элементы для этой линии должны иметь это (none) правило.
  3. Между тонкими и толстыми границами больший приоритет имеют толстые.
  4. При одинаковых рамках, но разных стилях всегда побеждает двойной сплошной (double), за ним идет solid, пунктирный (dashed), dotted.
  5. Если отличия заключаются только в цветах, то вид самого маленького компонента всегда выше (оформление ячейки имеет больший приоритет, чем строки, а строки выше, чем таблицы).

Иллюстрация конфликта

Проиллюстрировать конфликт стилей легко на уже рассмотренной таблице. Достаточно добавить пару классов ячейкам и прописать для них оформление. Html принимает вид:

Соответствующий ему css.

Стили рамок

Оформление границы можно установить для каждой из сторон ячейки отдельно. Для этого достаточно в border-style указать не одно значение, а перечислить четыре, соответственно сторонам ячейки.

Указать данные в одну строку можно, задав от одного до четырех разных значений. Каждое традиционно становится инструкцией для одной из сторон.

  • Если поставить два значения, первое будет отвечать за нижнюю и верхнюю границы, второе — за левую и правую.
  • Из трех первое отвечает за верхнюю, второе — за левую и правую, третье — за нижнюю черту.
  • Четыре значения однозначно определяют каждую из линий, начиная с верхней по часовой стрелке до левой.

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

Всего есть десять стилей для рамок. Все они изменяют линию или удаляют ее:

  • none — границы нет;
  • hidden — более строгое none, блокирует появление черты (в ситуации конфликта);
  • dotted — из точек;
  • dashed — пунктирная;
  • solid — сплошная;
  • double — двойная сплошная;
  • groove — рамка будто вдавлена в поверхность;
  • ridge — выпуклая линия;
  • inset — по факту для одной стороны элемента ведет себя как ridge, если применяется ко всему элементу, то top и left затенены, а bottom и right высветлены;
  • outset — ведет себя подобно groove при применении к одной стороне элемента, затеняет bottom и right, top и left оказываются более светлыми.

К каждой из ячеек (к top и left сторонам) применен один из стилей. Для того чтобы они не конкурировали между собой, самым «слабым», проставлены наибольшие значения.

Структурирование материала

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

  • обнуление линий (для border-width указывают значение в 0px);
  • hidden.

Преимущество hidden в силе его приоритета. Если на границу действует правило сразу двух элементов и в одном из них в border-style указано значение hidden, линия отображаться не будет. Т. е. можно спокойно сделать всю таблицу, а затем выборочно удалить ненужные рамки.

Использование hidden по отношению к ячейкам делает невозможным восстановление границы другими методами (кроме тяжеловеса !imporant). Поэтому при необходимости удалить некоторые из сторон ячеек, лучше использовать none.

Допустим, есть таблица. Цель – удалить вертикальные границы внутри первой строки. Она помечена отдельным тегом (заголовком), поэтому дополнительный класс вводить не требуется. Если применить hidden ко всему тегу, прописав его border-left, то вместе с внутренними границами удалится и одна часть боковой рамки таблицы, что не требовалось по условию. Если же воспользоваться none и линией матрицы, то для внутренних черт будет два неконфликтующих правила, а у внешнего края none будет конфликтовать с правилом, которое ей задается в table, и сторона останется на месте.

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

Тогда как убрать боковую границу в html-таблице легче через обращение к внешним рамкам матрицы, которые указывают в table. Достаточно прописать указание на конкретную линию в css.

Удаление рамок в строках легко реализовать с помощью свойства border со значением hidden в tr. Исчезают не только горизонтальные линии таблицы, но и боковые. Матрица вырождается в вертикальные колонки.

В крайнем случае обращаются к !important. Если добавить его после инструкции, то она получит дополнительный приоритет.


Границы html-таблицы гибко и легко настраиваются. Группа свойств border позволяет скрыть элементы, изменить цвет, ширину или стиль. Недостатком таблиц является не всегда однозначно предсказуемый результат сочетания правил, примененных к отдельному элементу. Ввиду этого рекомендуют либо сокращать количество возможных стилей для границ, либо применять их точечно.

Создать рамку в HTML/CSS

Рамки — один из ключевых элементов дизайна, который может использоваться для создания простой обводки, а также для более сложных элементов дизайна.

В этой статье мы расскажем вам о создании рамок, а именно о группе свойств border, опишем каждое её отдельное свойство.

Border. HTML & CSS

Давайте рассмотрим каждое свойство отдельно, разобрав разные примеры использования.

Как сделать рамку таблицы в HTML

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

Создадим таблицу с 3 колонками, по 3 ячейки в каждой(9х9), с помощью тега

. Внутри вписываем теги .

Для создания рамки записываем в тег-контейнер атрибут border, присваиваем ему значение 2px.

В итоге у нас получилась простая таблица, которая имеет темно-серую обводку шириной в 2 пикселя. Её можно сделать красивее, но для этого уже понадобится CSS.

Стиль обводки. Свойство Border-style.

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

  1. Solid > — создает обводку в виде нескольких сплошных линий, соединенных между собой. Линии соединяются без образования пространства между ними.
  2. Dotted > — создает рамку в виде точек.
  3. Dashed > — создает рамку в виде небольших разделенных линий. По виду напоминает пунктирную линию.
  4. Double > — создает сплошную рамку, образуя двойную линию.
  5. Groove > — создает рамку имеющую 2 цвета. Внешняя часть рамки имеет заданный цвет, а внутренняя его темный оттенок.
  6. Ridge > — создает рамку с градиентом. Заданный для рамки цвет плавно распределяется по всем линиям, плавно меняя свой оттенок.
  7. Inset > — создает 2-х цветную рамку. Левая и нижняя линии имеет заданный цвет. Правая и нижняя линии имеют его темный оттенок.
  8. Outset > — Полная противоположность стилю Inset. Правая и верхняя — заданный цвет. Левая и нижняя имеют его темный оттенок.

Можно задавать разные стили для каждой отдельной линии. Для этого нужно использовать отдельный стиль для каждой линии, например свойство border-top-style. Оно будет изменять стиль для каждой линии рамки.

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53420b73bdef8ee3 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Кухня HTML-верстальщика

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

Параметр border

Самый простой способ создания рамки заключается в использовании параметров таблицы border, определяющего толщину рамки и bordercolor, который задает ее цвет. Рамки созданные таким образом отличаются по своему виду в разных браузерах (рис. 3.1).

и

Netscape Содержимое

В верхней таблице устанавливаем ширину и высоту таблицы по желанию, параметром bgcolor задаем цвет рамки, cellspacing присваиваем нулю, а cellpadding управляет толщиной границы. Чем этот параметр больше, тем толще будет и рамка.
Для внутренней таблицы надо обязательно задать ее цвет, отличный от цвета внешней, совпадающий с цветом фона веб-страницы, в примере, например, задан белый. Параметр cellspacing или cellpadding (в данном случае без разницы какой использовать) определяет расстояние от границы рамки до содержимого таблицы.
Ширина и высота внутренней таблицы обязательно должны совпадать с шириной и высотой внешней таблицы.
Замечание: Перенос строки в тексте кода HTML автоматически добавляет пробел. Если рамка в некоторых местах получается толще, чем задумано, следует убрать лишние пробелы между тегами и тем самым сократить количество строк.

Заливка ячеек таблицы цветом


Использование цвета фона ячеек таблицы – один из универсальных и распространенных способов создания рамки. Создаем таблицу (рис. 3.2) и заливаем крайние ячейки нужным цветом (рис. 3.3).

Толщина рамки определяется шириной и высотой ячеек. Обязательно следует поместить внутри этих ячеек таблицы распорку – прозрачный рисунок размером 1 на 1 пиксел (в примере он называется spacer.gif), иначе в браузере Netscape этот способ работать не будет.

Пример 3.3. Создание рамки заливкой цветом ячеек таблицы

height=»2″>
height=»2″> Содержимое height=»2″>
height=»2″> height=»2″>

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

Замечание: Приведенный способ чувствителен к разным параметрам, поэтому, в случае неправильной отрисовки рамки следует проверить следующее:

  • если размер таблицы задается в пикселах, надо задать фиксированные размеры всех ячеек;
  • когда ширина таблицы указана в процентах, внутри рамки нужно поместить текст, который «распирает» внутреннюю ячейку до нужной ширины; при отсутствии текста или другого содержимого внутри таблицы с рамкой, ее ширина окажется гораздо шире желаемой;
  • в ячейках, где проходит рамка, не должно быть никаких символов неразделяемого пробела (& nbsp;), что так любят автоматически добавлять некоторые редакторы веб-страниц;
  • перенос строки автоматически добавляет в текст пробел, поэтому между открывающим и закрывающим тегами
и

w >
Содержимое
w >

В таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой.
Уголки вставляем как обычные рисунки с помощью тега IMG, а вот горизонтальные и вертикальные линии следует задавать с помощью фона ячейки таблицы, параметром background. Это позволит сделать нашу рамку масштабируемой и размер ее будет изменяться в зависимости от содержимого.
Чтобы линии плотно прилегали друг к другу и между ними не было пробелов надо обязательно указывать все размеры ячеек и рисунков.
В ячейках, где фоном размещаются горизонтальные и вертикальные линии, необходимо поместить распорку – это либо пробел, либо прозрачный рисунок формата GIF размером 1 на 1 пиксел (в примере файл называется spacer.gif). Делается это для того, чтобы обмануть браузер Netscape, который не показывает содержимое ячейки, если она пуста.
Приведенный способ позволяет создавать рамки практически любого вида.

Использование стилей

С помощью стилей рамку можно применить к любому блочному тегу, например, параграфу (тег P), таблице и тегу DIV. Стили позволяют создать рамку проще и удобней, чем с использованием таблиц и предоставляют разные виды рамок, которые показаны на рис. 3.6.

Рис. 3.6 Вид рамок задаваемых с помощью стилей

Первые две типа рамок – dotted и dashed поддерживаются браузерами Netscape и Internet Explorer только со старших версий.
Рамка задается проще всего параметром border, который сразу указывает ее вид, толщину и цвет.

Пример 3.6. Использование стилей

При работе на вычислительной технике необходимо сесть так, чтобы
руки с предплечьями образовывали прямой угол, глаза поставить на
расстояние 30-40 см от рабочей поверхности монитора.

Рамка вокруг таблицы

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

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

Для начала создадим простую таблицу, состоящую из четырёх ячеек, в которых будут написаны короткие фразы.

Перед этим нужно понять следующее:

• Теги – объявляют таблицу.
border=» « – устанавливает толщину рамки таблицы.
• Теги – определяют табличный ряд (по вертикали).
• Теги – определяют ячейку (по горизонтали).

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

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

«
Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

Параметр «color: » задаёт цвет текста, который будет написан внутри ячеек этой таблицы.

Отступы между ячейками и рамкой таблицы html

Существую два атрибута:

• cellspacing=» » – определяет расстояние между ячейками таблиц и рамкой самой таблицы.
• cellpadding=» » – определяет расстояние между границей ячейки и ее содержимым.

Рамка в таблице

01.06.2010, 20:25

Графическая рамка в таблице
Доброго времени суток. Вопрос, как лучше сделать графическую рамку для таблицы? .

рамка
Не знаете ли, как можно сделать рамку не прозрачной если у элемента есть свойство opacite

Рамка
А как задать рамку для тега

, что бы эта ячейка была в рамке. если задать так Рамка
Подскажите пожалуйста,как средствами CSS сделать вот такую рамку

Рамка
Здравствуйте, подскажите, как сделать рамку дива border:#000000 solid 8px; как тень? И еще, как.

Илон Маск рекомендует:  Что такое код domnode >set_content
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL