Разпределение на границите на таблиците в CSS

Anonim

CSS инструментите притежават богат набор от атрибути за елементи на уеб страници, за да могат максимално да съживят и декорират уебсайтове. Атрибутът border-spacing не е изключение. Той е широко използван при създаването на таблици като елементи на уеб страници, а също така е невъзможно без него в така нареченото "таблично" оформление на сайтовете.

уговорена среща

Атрибутът border-spacing се прилага за маркера.

и служи за определяне на разстоянието между клетките на таблицата в пиксели. HTML има подобен инструмент за запълване на клетки.

И двата атрибута не могат да бъдат приложени към същата таблица поради причината, че CSS има по-висок приоритет от HTML. В противен случай ще работи само разстоянието между границите и браузърът cellspacing ще игнорира.

Свойствата на атрибутите могат да бъдат показани в таблична форма за яснота.

приложениеОпределя празнината между клетките.
Стойност по подразбиране0 px
наследяванеда
анимацияне
Работи с версииCSS 2, 3

Поради факта, че граничното разстояние работи с CSS 2, то се показва правилно от по-голямата част от съвременните браузъри. Сайтове, написани преди около десетилетие с помощта на тази вече остаряла технология, са достъпни за визуално възприятие.

синтаксис

За да натиснете клетките на таблицата на желаното разстояние, е необходимо да маркирате

приложите атрибута border-spacing, задайте неговия параметър за дължина и число, изразяващо броя на пикселите. В същото време между цифрата и измервателната единица няма място. Например, ако клетките в редове трябва да бъдат преместени с 12, а в колони с 18 пиксела, CSS кодът ще изглежда така:

table { border-spacing: 12px 18px; }

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

  1. При определяне на два параметъра, първият определя хоризонталното разстояние, а вторият - вертикално.
  2. Ако е посочено едно, то определя същото разстояние хоризонтално и вертикално.

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

Пример за използване

Техническа задача: Необходимо е да се създаде таблица, в която да се показват популярните браузъри и техните минимални версии, от които става използването на интервал на граници в CSS. Разпространете клетките с 15 пиксела хоризонтално и вертикално. Изпълнението на задачата ще изглежда така:

Липсата на свойство на анимация означава, че езикът за маркиране не може да запълни празнините между клетките с цвят или да приложи други графични ефекти към тях. За целта се използват графични редактори (GIMP, Photoshop, Inkscape).