Сетка таблицы
Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется по умолчанию, если включить отображение границ с помощью атрибута border тега <table> . Однако такие линии отображаются по-разному в различных браузерах, поэтому применение стилей не только позволит удобно управлять видом таблиц, но и сделает их однотипными.
Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .
Рис. 1. Вид таблицы с сеткой
При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.
Пример 1. Создание сетки
В данном примере также устанавливается цвет фона для ячеек заголовка (тег <th> ) через свойство background .
Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).
Рис. 2. Сетка внутри таблицы
При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE .
Пример 2. Таблица без внешней рамки
В данном примере толщина линий между ячейками составляет один пиксел, а белая рамка вокруг — два пиксела, т.е. на один пиксел больше. Это требуется для того, чтобы надежно скрыть внешнюю границу вокруг таблицы.
Таблицы и рамки
Чтобы четко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает параметр border тега <TABLE> , который определяет толщину рамки.
В примере 1 показано создание границы вокруг ячеек.
Пример 1. Добавление рамки к таблице
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Толщина границы</title>
</head>
<body>
Рамки созданные таким образом незначительно отличаются по своему виду в разных браузерах.
| Internet Эксплорер | Файер фох | Опера |
 |
 |
 |
Рис. 1. Рамка, полученная с помощью параметра border
Чтобы получить рамку одного вида, рекомендуется применить стилевым тегом border , применяя его к ячейкам таблицы (тегу <TD> или <TH> ). Однако и здесь нас подстерегают подводные камни. Поскольку рамка создается для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для решения указанной особенности существует несколько путей. Самый простой — применить свойством border-collapse со значением collapse . В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Этот атрибут дастаткова добавляем к тегу <TABLE> , а дальше он все сделает самостоятельно (пример 2).
Пример 2. Применение border-collapse при создании рамок таблицы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание рамки</title>
<style type="text/CSS (ЦСС)">
TABLE <
border-collapse: collapse; /* Линия между ячейками отображается как одна */
>
TD <
border: 2px solid green; /* Параметры рамки вокруг ячеек таблицы */
text-align: center; /* Выравниваем контент по центру */
>
</style>
</head>
<body>
Разница между границами таблицы при добавлении параметра border-collapse , а также без него представлена на рис. 2.
a
б
Рис. 2. Вид таблицы при использовании атрибута border-collapase
На рис. 2а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление параметра border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 2б).
Для разработки однотипных линий внутри таблицы можно пойти и другим путем. Следует добавляем для селектора <TD> рамку, но отменить линию справа и снизу, задавая соответствующим атрибутам значение none . Тогда при состыковке ячеек их границы не будут накладываться друг с другом по той причине, что линия будет только одна. Однако при этом методе формирования границ нет линий снизу и справа у самой таблицы. Добавляя параметры border-right и border-bottom к селектору <TABLE> , получим в итоге нужную рамку (пример 3). Для однотипности следует позаботиться, чтобы стиль, толщина и цвет границы во всех случаях совпадали.
Пример 3. Создание рамки у таблицы с помощью атрибута border
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание рамки</title>
<style type="text/CSS (ЦСС)">
TABLE <
border-right: 2px solid green; /* Граница у таблицы справа */
border-bottom: 2px solid green; /* Граница у таблицы снизу */
>
TD <
border: 2px solid green; /* Параметры рамки вокруг ячеек таблицы */
border-right: none; /* Убираем линию справа */
border-bottom: none; /* Убираем линию снизу */
text-align: center; /* Выравниваем контент по центру ячейки */
>
</style>
</head>
<body>
У этого способа возможны вариации, например, для селектора <TD> добавляем границу только справа и снизу, а у <TABLE> , наоборот, добавляем атрибут border , но линию справа и снизу убрать. В любом случае представленный результат будет один.
Простой и оригинальный вид таблицы можно получить, если цвет границ сделать совпадающим с цветом фона. Но чтобы линии были видны, обязательно следует сделать заливку фона у тега <TD> или <TABLE> . Тогда ячейки таблицы получаются, словно рассеченные резцом между собой (пример 4).
Пример 4. Использование невидимых границ в таблице
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание границ</title>
<style type="text/CSS (ЦСС)">
BODY <
background: white; /* Цвет фона web-страницы */
>
TABLE <
border-collapse: collapse; /* Линия между ячейками отображается как одна */
>
В данном примере цвет фона web-страницы вводится через свойство background , добавленное к селектору BODY . Хотя белый цвет установлен по умолчанию, его иногда желательно задавать, чтобы пользователь не указал свой цвет фона через настройки браузера. Такой же цвет должен быть и у линий таблицы, в этом случае они явно не выдаются и лишь делят ячейки между собой.
Как убрать внешние границы таблицы html
Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.
Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!
Граница таблицы обозначается атрибутом «border». У которого должно быть свойство — толщина и цвет.
1. Если используется такая конструкция как в ниже идущей таблице — цвет указывать необязательно -по умолчанию это черный + начертание -по умолчанию линия.
2. Если требуется изменить цвет, то следует добавить свойство цвета.
Если используются стили css, то в них требуется указать и толщину, и начертание — иначе без одного из этих свойств вы границу не увидите.
Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.
Как обозначается граница таблицы!?
Видео как сделать границу таблицы
Видео сделано еще на старом оборудовании и качество не очень, если смотреть в разрешении 1920×1080, но как говорится, что есть, то есть. дл общего понимания вполне годится!
Не забываем сказать спасибо! Я старался для вас!
Как сделать одинарную границу у таблицы!?
Вообще — такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию.
Добавляем в таблицу border-collapse:collapse;
2.a. Либо в таблицу записываем атрибуты таким образом:
<table border="1" width="900" style="border-collapse:collapse;"> 2.b. Либо через стили css:
В таблице надо прописать класс:
Результат будет в двух случаях аналогичный:
| Привет | Привет |
| Текст | Текст |
Как сделать границу таблицы точками?
Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.
Сделать границу таблицы пунктирной линией.
Далее я не буду показывать код, наверное понятно, как это работает, мы приведем ещё несколько вариантов границ таблиц.
Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed
Есть еще несколько разновидностей отображения границ таблиц, но думаю, что и такого описания будет достаточно, ну а если не достаточно, то вам поможет поиск.
Скрыть наружную границу таблицы html
Ну и напоследок. бывает такая ситуация, что требуется скрыть наружные границы таблицы — как это сделать!?