Html table border style: Атрибут border | htmlbook.ru

Даже если свойства границы установлены на «none», между этими границами все еще есть небольшой интервал. Когда указана ширина границы больше нуля, этот интервал создает эти уродливые двойные границы.

Остерегайтесь фетишистов с двойными границами: эти двойные границы вот-вот исчезнут!

Мы можем использовать два малоизвестных свойства бордюров, чтобы избавиться от интервалов между бордюрами:

• border-collapse: Collapse;
• интервал между границами: ДЛИНА;

Свертывание границы может принимать одно из двух значений: отдельное или свертывание. Значение по умолчанию — «свернуть».

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

И border-collapse, и border-spacing используются с селектором таблицы CSS, как показано в приведенных ниже примерах.

Взгляните на четыре примера изображений таблицы, показанных ниже:

1. Таблица 1 имеет 2-пиксельную границу для тегов и

   во второй таблице установлена ​​граница в 2 пикселя для тегов и , но для свойства border-collapse установлено значение «collapse» таблица 3 имеет границу в 2 пикселя, установленную для тегов и , но значение border-spacing равно нулю Таблица четыре не имеет установленных границ, но имеет значение border-spacing, равное 2 пикселям, и контрастные цвета фона, указанные как для тегов, так и для тегов Глядя на эти примеры таблиц: стол номер один имеет уродливую двойную рамку, которую я обычно ненавижу видеть вторая и четвертая таблицы имеют четкие, тонкие границы без промежутков между ними Таблица 3 имеет четко очерченную границу, окружающую ее ячейки, которая, по-видимому, в два раза толще границы, описанной в таблицах 2 и 4. Рассмотрим таблицу 1 и метод ее создания в виде бинов. Столы два и четыре выглядят одинаково. У каждого из них есть граница в 2 пикселя вокруг их ячеек и окружения; и все они имеют одинаковую ширину и высоту. Единственная разница в том, что у второй таблицы свойства границ явно указаны в CSS, а у четвертой таблицы границы не указаны. Взгляните на их CSS, если не верите мне. Во второй таблице используется свойство свернутых границ. К сожалению, свойство свернутых границ имеет одну небольшую сложность. На самом деле, это огромное усложнение, по сравнению с которым двойные рамки кажутся довольно приятными: свернутые границы превращаются в беспорядок, когда таблица и ее внутренние ячейки имеют стилизованные границы. Чтобы убедиться в этом, посмотрите на следующие две таблицы, таблицы пять и шесть. Обе таблицы имеют 20-пиксельную рифленую границу таблицы и 5-пиксельную рифленую границу ячейки данных, но в пятой таблице границы свернуты, а в шестой — нулевой интервал между границами. Для каждой из этих таблиц использовался следующий CSS: table. one{border: 2px сплошной черный;} td.one{граница: 2px сплошной черный;} table.two{граница: 2px сплошной черный;граница-коллапс:коллапс;} td.two{граница: 2px сплошной черный;} table.three{граница: 2px сплошной черный;между границами: 0px} td.three{граница: 2px сплошной черный;} table.four {цвет фона: черный; расстояние между границами: 2 пикселя;} td.four{background-color:white} В каждом случае использовалась разметка HTML (с указанием соответствующих идентификаторов и классов): <голова> <тело> <таблица> Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 5 Ячейка 6 Стать настоящим уродом Согнутые рифленые бордюры Несвернутые рифленые бордюры с нулевым интервалом Пятый стол Шестой стол Трудно поверить, что пятый стол должен выглядеть как шестой. Это еще один пример того, почему я не люблю и не одобряю использование CSS «граница-коллапс: коллапс»; стоимость имущества. Таблица 6 аналогична таблице 3 примера. Исключением является то, что его границы более толстые и желобчатые. Он иллюстрирует преимущество указания значения для интервала между границами для CSS вашей таблицы. Существует обратная сторона определения границ тегов и , даже если интервал между границами настроен на ноль пикселей: таблица может выглядеть немного несбалансированной, когда границы тега имеют ширину, отличную от < table> границы тега. Попробуйте сами, чтобы понять, что я имею в виду. Можно ли задать стиль границы без специального определения границы таблицы? Определенно! Существует еще одно малоиспользуемое свойство CSS, которое создает немного призрачного изображения: контур: ЦВЕТ СТИЛЬ ШИРИНА Свойство контура рисует стилизованную или нестилизованную тень вокруг объекта, на который оно влияет. Outline имеет несколько поведенческих свойств, на которые стоит обратить внимание: контуры не увеличивают размер объекта в пикселях контуры не занимают дополнительного места на экране контуры перекрывают другие элементы последние нарисованные контуры перекрывают контуры, нарисованные до них контур, визуализированный последним, закроет любой контур, визуализированный раньше, чем он Некоторые из этих заметок являются повторениями друг друга, но я подумал, что их нужно углубить, чтобы прояснить любую двусмысленность. Просто чтобы убедиться, что вы поняли… если два объекта нарисованы рядом друг с другом, один наложен на другой, нижний край верхнего объекта будет закрыт контуром верхнего края нижнего объекта. Верхний объект не будет смещен контуром нижнего объекта. Думайте об контуре как о тени объекта — он может быть отброшен на другие объекты, не мешая им. Мы можем нарисовать стилизованную «границу» для ячеек таблицы без указания ширины границы, установив для контура таблицы ширину, равную ширине границы таблицы; если нам нужен определенный контур для тега, который не перекрывает элементы, расположенные рядом с ним, мы можем указать поле для тега, равное контуру, определенному для него. Результаты, как и следовало ожидать, немного отличаются от результатов для таблиц со стилизованными границами без интервалов. Рассмотрим следующие две таблицы, таблицу семь и таблицу восемь. В седьмой таблице используются стилизованные границы, тогда как в восьмой таблице используются стилизованные контуры для придания формы границам. Сравнение методов оформления границ таблицы Определенная граница без интервала между границами Определенный контур с интервалом между границами Седьмой стол Восьмой стол Обратите внимание на отсутствие двойной рамки в восьмой таблице. Контуры, окружающие его ячейки данных, перекрываются и устраняют двойное появление. Ширина контура тегов восьмой таблицы должна быть немного увеличена, чтобы ее размеры (почти) были равны размерам седьмой таблицы. CSS для этих двух таблиц: table.seven {граница: серая канавка 10px; интервал между границами: 0px;} td.seven {граница: серый гребень 10px;} table.eight {контур: серая канавка 10 пикселей; интервал между границами: 14px; поле: 10px;} td. eight {контур: серый выступ 14px;} Поле в 10 пикселей, используемое в восьмой таблице, равно ширине контура ее тега и служит для предотвращения наложения контура на другие элементы страницы. При использовании в реальном макете страницы это поле будет установлено только на сторонах, которые соприкасаются с другими элементами страницы. Стилизация таблиц WordPress Таблицы, используемые в сообщениях WordPress, можно легко стилизовать с помощью плагина header-footer. Посетите настройки плагина и добавьте этот код во вторую текстовую область с аннотацией «HTML-код для вставки в заголовок каждой страницы»: <стиль> #content .entry table {граница: 1px сплошной серый; интервал между границами: 0px;} #content .entry td {граница: 1px сплошной серый;} #content .entry th {граница: 1px сплошной серый;} #content .entry caption {border-bottom: 1px сплошной серый цвет;} Это определит границу в одну линию. Если вы предпочитаете не использовать явно заданные границы в соответствии с CSS, попробуйте что-то похожее на это: