HTML Таблицы
Таблица — это сетка из ячеек, формирующих строки и столбцы. Примерами таблиц могут служить различные финансовые отчеты, результаты спортивных соревнований, календари, расписания и т.д. Отдельный блок сетки называется ячейкой таблицы. Ячейки таблицы могут содержать самую разнообразную информацию, включая числа, текст, и даже видео и аудио объекты. С помощью языка HTML таблицы пишутся построчно.
Элемент служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы (сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом .
Элемент (сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент , однако его назначение — создание заголовка строки или столбца. Как правило, элемент размещают в первой строке таблицы. Браузеры отображают текст в элементе жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами.
Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки:
Пример: Простая HTML-таблица
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
Граница таблицы
Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так:
Пример: Применение свойства border
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
Одинарная рамка для таблицы
По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей:
Пример: Применение свойства border-collapse
| Заголовок 1 | Заголовок 2 | Заголовок 3 |
|---|---|---|
| Ячейка 2×1 | Ячейка 2×2 | Ячейка 2×3 |
| Ячейка 3×1 | Ячейка 3×2 | Ячейка 3×3 |
Поля и интервалы таблицы
По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу или . Интервал ячеек (border-spacing) — это расстояние между ними ( или ). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing. Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими.
Пример использования padding и border-spacing:
Пример: Применение свойств padding и border-spacing
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Ширина таблицы
Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет «растягиваться» или «сжиматься» в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера.
Вот пример использования свойства width:
Пример: Применение свойства width
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение ячеек (colspan и rowspan)
Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки или ячейки объединяются посредством добавления атрибутов colspan или rowspan. Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали.
Объединение столбцов
Объединение столбцов достигается с помощью атрибута colspan в элементах или — ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца.
Пример: Применение атрибута colspan
| Ячейка на два столбца | |
|---|---|
| Ячейка 1 | Ячейка 2 |
| Ячейка 3 | Ячейка 4 |
Объединение строк
Строки, объединенные при помощи атрибута rowspan, ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк.
В этом примере первая ячейка таблицы растягивается на две строки вниз:
Пример: Применение атрибута rowspan
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
Заголовок таблицы
Для создания заголовка или подписи таблицы используется парный тег (от англ. caption – подпись). Элемент предназначен для организации заголовка таблицы. Располагается сразу после тега , но вне описания строки или ячейки.
Пример: Применение тега
| Ячейка на две строки | Ячейка 1 | Ячейка 2 |
|---|---|---|
| Ячейка 3 | Ячейка 4 |
Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги , и . Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег . Заголовки таблицы должны быть помещены в элемент , например:
Основное содержимое (тело) таблицы должно находиться внутри элемента (таких блоков в таблице может быть несколько). Для логического группирования строк в нижней части таблицы (то есть для создания «подвала» таблицы) используется тег (в одной таблице допускается не более одного тега ). В исходном коде тег ставится до тега . Кроме логического группирования одной из причин использования элементов и является то, что если ваша таблица слишком длинная для единовременного отображения на экране (или для печати), то браузер будет отображать и заголовок ( ) и последнюю строку ( ), когда пользователь станет прокручивать вашу таблицу.
Пример: Теги , и
| Это шапка таблицы | |||
|---|---|---|---|
| Это подвал таблицы | |||
| Ячейка 1 | Ячейка 2 | Ячейка 3 | Ячейка 4 |
Несмотря на то, что мы перед добавили , он, тем не менее, появляется в конце таблицы. Это исходит из того, что может содержать много строк. Но браузеру нужно отобразить нижнюю часть таблицы до получения всех (потенциально многочисленных) строк данных. Вот почему в коде прописывается перед элементом .
- Задача1
- Задача2
- Задача3
- Задача4
- Задача5
- Задача6
- Задача7
Объединение столбцов
Напиште разметку для таблицы, изображенной на рис.1.
Реши сам »
| Ячейка на два столбца | |
|---|---|
| Ячейка 1 | Ячейка 2 |
Объединение строк
Напиште разметку для таблицы, изображенной на рис.1.
Реши сам »
| Ячейка на три строки | Ячейка 1 |
|---|---|
| Ячейка 2 | |
| Ячейка 3 |
Убрать двойную рамку таблицы
По умолчанию граница таблицы имеет эффект двойной рамки, измените код так, чтобы все линии этой рамки стали одинарными.
Широкая таблица
Сделайте чтобы эта таблица отображалось полностью на всю ширину окна браузера вне зависимости от ее ширины.
Заголовок таблицы
Измените приведенный код так, чтобы над таблицей появился основной заголовок (подпись), как показано на рис.1.
Поле внутри ячеек
Измените приведенный код так, чтобы между текстом внутри ячеек и их границей появился зазор (поле) шириной 25px, как показано на рис.1.
Объединение строк
Попробуйте написать разметку для таблицы, изображенной на рис.1. Совет: Строки всегда объединяются сверху вниз, поэтому ячейка с «ананасами» является частью первой строки.
Источник
Сетка на листе Excel – скрыть, отобразить, печатать
Скрытие и отображение сетки на листе рабочей книги Excel – на всем листе и на диапазоне ячеек. Вывод сетки на печать.
Речь пойдет не о границах ячеек, а о сетке по умолчанию из бледных линий, которые делают ячейки видимыми на листе рабочей книги.
Скрыть и отобразить сетку на всем листе
Excel 2007-2016
Основной способ:
Для того, чтобы скрыть сетку на всем активном листе, выберите на ленте вкладку «Вид» и уберите галочку у чекбокса «Сетка». Сетка не листе исчезнет.
Можно и так:
Перейдите по пунктам меню «Файл» – «Параметры», в окне «Параметры Excel» выберите вкладку «Дополнительно», где в разделе «Параметры отображения листа» снимите галочку у чекбокса «Показывать сетку» (предпочтительно) или выберите «Цвет линий сетки:» белый. Здесь можно выбрать лист текущей книги, у которого необходимо скрыть сетку.
Excel 2000-2003
Чтобы скрыть сетку на всем листе, в пункте меню «Сервис» выберите «Параметры», в открывшемся окне выберите вкладку «Вид» и в разделе «Параметры окна» уберите галочку у чекбокса «Сетка» (предпочтительно) или выберите «Цвет линий сетки:» белый.
Чтобы скрыть сетку сразу на нескольких листах Excel или во всей книге, выберите сразу несколько листов или все листы и, точно также, в зависимости от версии Excel, уберите сетку.
Отображается сетка путем возвращения галочки в чекбокс «Сетка» или выбора цвета линий сетки: «Авто», в зависимости от того, как вы сетку скрыли.
Скрыть и отобразить сетку диапазона ячеек
Вокруг ячеек на листе Excel, к которым применена заливка, сетка не видна. Будем использовать это свойство для скрытия и отображения сетки применительно к диапазону ячеек. Чтобы цвет ячеек оставался белым, примените заливку белым цветом. Этот же прием можно использовать и применительно ко всему рабочему листу.
Чтобы вернуть сетку, выбирайте цвет фона для заливки «Нет цвета».
Отображение сетки на диапазоне с заливкой
Если вы хотите вернуть серую сетку на диапазон с заливкой, выполните следующие действия:
- Выделите диапазон с заливкой и через панель инструментов или контекстное меню откройте диалог «Формат ячеек».
- Перейдите на вкладку «Границы» и выберите желаемый цвет (у меня второй серый, как на изображении, повторяет цвет сетки по умолчанию).
- После назначения цвета выберите границы «внешние», «внутренние» и нажмите кнопку «OK».
Вывод сетки на печать
По умолчанию сетка листа Excel на печать не выводится. Чтобы ее распечатать, в Excel 2007-2016 пройдите по пунктам меню «Файл» – «Печать» – «Параметры страницы» (в Excel 2000-2003: «Файл» – «Параметры страницы»). В открывшемся окошке выберите вкладку «Лист» и в разделе «Печать» поставьте галочку у чекбокса «Сетка». Теперь сетка будет распечатываться.
5 комментариев для “Сетка на листе Excel – скрыть, отобразить, печатать”
Куда то нажала и появилась мелкая сетка на всех файлах, даже чистых, не могу убрать
Привет, Надежда!
Откройте любой файл Word, на ленте выберите вкладку «Вид» и снимите галочку у чек-бокса «Сетка». После этого все ваши файлы Word будут открываться без мелкой сетки.
А если наоборот – надо отобразить сетку на участке, где заливка?
Привет, Антон!
Это тоже возможно. Я добавил в статью параграф «Отображение сетки на диапазоне с заливкой».
Хоть ставлю галочку, хоть убираю – отображается эта сетка при печати. Причем, вне таблицы. А внутри ее нет. И есть еще кусочек, где ее нет по умолчанию. И первый лист этого же документа (делала полгода назад, этот лист приделала для второй части отчета) распечатался без сетки.
Источник
Как сделать, показать и скрыть границы в файле Excel
Excel — программа, в которой юзер может создавать, просматривать и редактировать таблицы с базами данных. Ячейки в каждом файле по умолчанию разделены, что помогает организовать хранение информации. Структура документа сделана в виде тонкой серой сетки.
Для печати документа все контуры нужно настраивать отдельно
Тем не менее, установка по умолчанию не всегда удобна. В Эксель вы можете настроить ячейки самостоятельно — указать из базовых вариантов, либо нарисовать свои, с произвольной формой, одним из множества контуров и цветов.
Если файл Эксель или его часть используется не в качестве таблицы, либо вы просто хотите убрать серую сетку — это можно настроить несколькими способами. Следует учитывать, что при переносе документа на бумагу (печати) её необходимо настраивать отдельно.
Как сделать разделение в Excel
Границы в программе могут быть добавлены к верхней, нижней, правой и левой части ячейки. Кроме того, они могут иметь орнамент и цвет на выбор. Это позволяет вам более тонко настраивать её отображение при создании нужной таблицы. Так, можно настроить разделение для одного или нескольких объектов. Например, можно отделить в файле целую строку, столбец или сектор, либо разлиновать всю таблицу.
Существует 2 способа создания разделения в файле Эксель:
- Через меню «Границы» во вкладке «Главная»;
- Кликнув на «Другие границы» в этом же меню.
Оба варианта имеют свои особенности и преимущества, но любой из них позволит создать и изменить разделение.
Создание контура через кнопку «Границы»
Этот вариант — самый простой из всех, но и предоставляет он меньше всего возможностей. Выделите определённое количество ячеек, к которым хотите применить настройки, после чего:
- Нажмите на кнопку «Границы», которая расположена снизу от выбора шрифта (её внешний вид зависит от последней использованной функции, но по умолчанию это «нижняя граница»);
- Укажите необходимую команду, после чего разметка будет применена;
- Сохраните прогресс.
Создание разметки через «Другие границы»
Некоторые функции не поместились в выпадающее меню «Границы», поэтому они находятся в расширенном. Выделите необходимые ячейки, а далее:
- Откройте меню «Границы»;
- Кликните на «Другие границы» внизу выпадающего окошка — откроется вкладка, в которой вы сможете самостоятельно нарисовать контур любой сложности, какой позволяет программа;
- Сделайте шаблон, нажмите «ОК»;
- Сохраните прогресс.
Вкладка «Границы» позволяет сделать разметку более сложной. Вам доступны 13 видов контура и все цвета спектра, а также возможность нарисовать внешние и внутренние линии объекта (в том числе диагональные).
Как нарисовать разметку
Для того чтобы создать собственный контур, нужно:
- Указать элемент, либо определённое количество групп;
- В выпадающем меню «Границы» кликнуть на последнюю вкладку;
- Откроется окно «Формат ячеек» со вкладкой «Границы» — выберите тип линии, её цвет, расположение относительно элемента;
- Укажите контур, нажимая на кнопки с соответствующими изображениями, либо на саму модель элемента;
- Если в базовой палитре нет подходящего цвета, откройте «Другие цвета» (переход во вкладку «Спектр» в новом окошке позволит сделать настройку ещё более точно);
- Если вам не нужны линии, выберите «Нет» в окне «Формат ячеек»;
- Нажмите «ОК» и сохраните прогресс.
Как сохранить разметку при печати
По умолчанию, как серые, базовые линии на поверхности листа Excel, так и любые другие, не печатаются при выводе на бумагу через принтер. Это можно заметить, нажав «Печать» — «Предварительный просмотр». Для того чтобы включить контур в будущий документ, необходимо указать определённое количество листов и применить соответствующую функцию. Варианты выделения:
- Отдельный лист — просто щёлкните на него. Если он не виден в списке, сначала прокрутите с помощью кнопки.
- Два или несколько листов, идущих рядом — кликните на ярлык крайнего в диапазоне (слева или справа), после чего, зажав Shift, нажмите на противоположный ему (с другой стороны множества).
- Два и более несмежных — кликните на ярлык первого листа. Затем, удерживая Ctrl, нажмите на остальные, которые нужно включить в диапазон.
- Все страницы в файле Эксель — кликните на ярлык любого правой клавишей мыши, после чего в меню выберите «Выделить все листы».
Выбранные страницы отображаются в качестве группы. Для того, чтобы разъединить их, нажмите на любой из невыделенных, либо кликните по любому правой клавишей мыши, а затем выберите «Разгруппировать листы».
Дальнейшие действия для печати:
- На вкладке «Разметка страницы» в «Параметры страницы» выберите пункт «Печать» в области «Сетка»;
- Откройте «Файл», нажмите «Печать» (или Ctrl + «P»);
- В окне с параметрами печати нажмите «ОК».
Если вы не можете выбрать пункт в области «Сетка», значит, выбран график или элемент в таблице. Для того чтобы функции стали доступны, необходимо снять это выделение. Если при печати контур вам не нужен, соответственно, снимите галочку с пункта «Печать» в «Сетка».
Как скрыть и показать разметку в Эксель
Сетка в Excel отображается по умолчанию. Иногда она не нужна на листе или в книге — в случае, когда вы работаете с различными объектами (например, изображениями). Кроме того, «чистая» страница без контура выглядит аккуратнее.
В то же время, в некоторых файлах Эксель разметка отсутствует, но необходима. Это бывает в случае сбоя, или если вы работаете с документом, который составлял и настраивал другой юзер.
Скрыть или показать с помощью функций Excel
Если вам нужно сделать линии видимыми, можно воспользоваться одним из двух способов — первый настроит всю книгу Эксель, а другой позволит указать это выборочно.
- Откройте вкладку «Разметка страницы» и найдите область «Сетка»;
- Установите параметр «Показать» — это включит отображение базовых линий;
- Сохраните прогресс;
- Если вам нужно убрать контур, который отображается, снимите галочку с «Показать».
Второй, более функциональный вариант:
- Выделите листы, на которых необходимо включить отображение (если нужно указать несколько несмежных — кликните на них, зажав Ctrl, а если смежных — кликните на крайний с одной из сторон, затем, удерживая Shift, на противоположный);
- Откройте вкладку «Вид», после чего поставьте галочку напротив «Сетка» в области «Показать»;
- Сохраните прогресс;
- Если нужно наоборот, убрать её, снимите галочку напротив «Сетка».
Скрыть или отобразить с помощью смены цвета заливки
Другой способ убрать разметку — установить белый цвет заливки. Excel скрывает серую сетку, если объект заполнен любым цветом, но белый — нейтральный, стандартный для страницы. В свою очередь, если нужно показать контур, установите параметр «Нет заливки». Для этого необходимо:
- Выделить определённое количество объектов;
- Перейдите во вкладку «Главная», после чего в области «Шрифт» найдите функцию «Цвет заливки» и выберите белый, затем кликните по нему;
- Сохраните прогресс.
Скрыть или отобразить разметку с помощью настройки её цвета
Третий способ скрыть или восстановить базовую разметку в произвольном количестве ячеек Эксель. Чтобы воспользоваться им, нужно:
- Выделить определённое количество объектов документа, где нужно скрыть или восстановить линии;
- Нажмите по ним правой кнопкой мыши, после чего откроется контекстное меню — кликните на «Формат ячеек»;
- Откройте вкладку «Граница»;
- Выберите белый цвет и нажмите «Внешние» и «Внутренние» во «Все»;
- Нажмите «ОК», чтобы увидеть прогресс, затем сохраните его.
Как скрыть или отобразить линии выборочных объектов
В некоторых случаях необходимо убрать или восстановить не всю сетку на странице Excel, а только у некоторых объектов. Это можно настроить, вручную выбирая количество объектов:
- Одна ячейка — кликните по ней левой клавишей мыши;
- Несколько смежных — кликните по одной, в начале диапазона, а затем, удерживая Shift, нажмите на противоположную;
- Несколько несмежных — кликните по любой, после чего, зажав Ctrl, добавляйте во множество элементы левой клавишей мыши;
- Несколько смежных листов — кликните на крайний снизу в соответствующем меню, после чего, удерживая Shift, выберите противоположный;
- Несколько несмежных листов — кликните на произвольную страницу, затем, зажав Ctrl, добавьте во множество остальные, нажимая правую кнопку мыши.
После того как вы указали необходимое количество объектов, скройте или покажите их линии. Это можно сделать любым из описанных вариантов — настройкой цвета заливки либо самого контура.
Сетка на странице Эксель — серая разметка, которая разделяет ячейки. Её можно скрыть и восстановить несколькими способами, если это необходимо. Все они простые и доступны даже новичку.
Источник
Отображение границ таблицы 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).
- Если у одного из элементов в свойстве border-style для спорной границы указано значение hidden, этот стиль побеждает. Hidden имеет высший приоритет.
- Самый маленький вес имеет значение none. Оно тоже диктует линии не отображаться, но чтобы указание исполнилось, все элементы для этой линии должны иметь это (none) правило.
- Между тонкими и толстыми границами больший приоритет имеют толстые.
- При одинаковых рамках, но разных стилях всегда побеждает двойной сплошной (double), за ним идет solid, пунктирный (dashed), dotted.
- Если отличия заключаются только в цветах, то вид самого маленького компонента всегда выше (оформление ячейки имеет больший приоритет, чем строки, а строки выше, чем таблицы).
Иллюстрация конфликта
Проиллюстрировать конфликт стилей легко на уже рассмотренной таблице. Достаточно добавить пару классов ячейкам и прописать для них оформление. Html принимает вид:
Источник