Как задать границы таблицы в html
Перейти к содержимому

Как задать границы таблицы в html

  • автор:

Границы, рамки и отступы HTML-таблиц

Рамка таблицы, границы ячеек, расстояния между ними и внутренние отступы.

Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing и cellpadding , поэтому чтобы убрать расстояния вовсе — установите у атрибутов значения ноль (0).

Пример границ, рамок и отступов HTML-таблиц

    Границы, рамки и отступы таблиц  

Таблица с измененными отступами и расстояниями:

Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейка 3.1Ячейка 3.2Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1Ячейка 1.2Ячейка 1.3
Ячейка 2.1Ячейка 2.2Ячейка 2.3
Ячейка 3.1Ячейка 3.2Ячейка 3.3

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

Таблица с измененными отступами и расстояниями:

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

Таблица только с установленными рамкой и границами ячеек:

Ячейка 1.1 Ячейка 1.2 Ячейка 1.3
Ячейка 2.1 Ячейка 2.2 Ячейка 2.3
Ячейка 3.1 Ячейка 3.2 Ячейка 3.3

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

Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding= «10» — браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.

Отступление от темы или как убрать отступы по краям страницы

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

В свое время у тега существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.

Способ первый. B теге указать атрибут style со следующими значениями:

. — убирает отступы сразу со всех сторон HTML-страницы.

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

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

 . body 
 . body 

В этом уроке я тоже не буду все подробно описывать — только общие моменты. Для полноты картины посмотрите результат примера.

  1. Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
  2. В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй — левое и правое меню, а также основное содержимое (контент), в третьей — Footer или «подвал» страницы.
  3. Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
  4. Важно. Используйте тег только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
  5. Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
  6. Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где — увеличить.

Разделы сайта

  • Как сделать сайт
    Самому и бесплатно
  • Учебник HTML
    Для начинающих
  • Учебник CSS
    Для новичков
  • Справочники
    По HTML и CSS
  • Примеры
    HTML и CSS
  • Ссылки
    Полезные сайты для вебмастеров
  • Инструментарий
    Программы для создания сайтов

Учебник HTML

  • Введение
  • Что такое HTML?
  • Теги и синтаксис HTML
  • Атрибуты HTML-тегов
  • Общие и текст
  • Структура HTML-документа
  • Параграфы и заголовки
  • Как изменить шрифт?
  • Меняем цвет текста и фона
  • Выравнивание содержимого
  • Цитаты и обрыв строки
  • Что такое спецсимволы HTML?
  • Горизонтальные линии
  • Группирование элементов
  • Комментарии в HTML
  • Ссылки
  • Cсылки и их разновидности
  • Меняем цвета ссылок
  • Ссылки на электронную почту
  • Якоря — создаем закладки
  • Изображения
  • Изображения
  • Изображения для фонов
  • Изображения — ссылки
  • Таблицы
  • Таблицы
  • Границы, рамки и отступы HTML-таблиц
  • Объединение ячеек таблицы
  • Вложенные таблицы
  • Списки
  • Нумерованные и маркированные списки
  • Метатеги
  • Метатеги и их типы

Copyright © 2010-2015 seodon.ru Все права защищены.

С условиями использования материалов данного сайта вы можете ознакомиться на странице автора.

Сетка таблицы

Для создания таблицы показанной на рис. 1 потребуется всего ничего: установить стилевое свойство border для каждой ячейки и воспользоваться свойством border-collapse .

Рис. 1. Вид таблицы с сеткой

При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse , как показано в примере 1.

Пример 1. Создание сетки

    Таблица    
 200420052006
Рубины435179
Изумруды283448
Сапфиры295736

В данном примере также устанавливается цвет фона для ячеек заголовка (тег ) через свойство background .

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

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

Пример 2. Таблица без внешней рамки

    Таблица    
 200420052006
Рубины435179
Изумруды283448
Сапфиры295736

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

63. Рамки для таблиц, строк и ячеек в HTML

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

Создание рамки при помощи атрибута

Вообще не расширяемый атрибут, я бы сказал бессмысленный. Атрибут border устанавливает толщину рамки и все. Далее пример:

 

Ячейка 1
Ячейка 2

Простой способ создать рамку вокруг элемента

Сразу говорю, подробные записи приводить не буду, так как о свойстве border будет огромный урок в дальнейшем и может не один. Универсальное свойство border способно установить сразу и толщину, и стиль, и цвет границ (рамки). Толщина может быть любой, цвет границ устанавливается в шестнадцатеричном формате, rgb формате и ключевыми словами (red, black и т.д.). Какие бывают стили, картинка ниже (картинка взята с сайта htmlbook.ru) и далее пример:

td border: 5px solid #CCCCCC;
>

Рамка слева, справа, снизу и сверху

При использовании border рамка создается со всех сторон. Но можем контролировать, с какой же стороны обрисовывать рамку. Рамка слева border-left: 2px solid black ; рамка справа border-right: 1px dotted #FF0000 ; рамка снизу border-bottom: 10px solid #000000 ; рамка сверху border-top: 1px solid green . Как видите, они не обязательно должны иметь одинаковые значения, а так же их можно комбинировать, то есть написать несколько, например, левую и правую границу (рамку) и т.д. Все. Далее лезть не буду, эта тема другого урока. Пример:

table border-left: 5px solid #CCCCCC; 
border-right: 5px solid #CCCCCC;
>
td border-top: 5px solid #CCCCCC;
border-bottom: 5px solid #CCCCCC;
>

Закругленные углы

Теперь немного затронем тему «красивостей» и юзабилити. Чтобы сделать края рамок закругленными, существует свойство border-radius . Это тоже отдельный урок, сильно подробно разбирать не будем. Он принимает разное количество аргументов. Мы будем писать (только в этом уроке) один аргумент, и если пишем одно значение, значит, будет одинаковое закругление со всех сторон (углов). Значение может быть в разных «мерах», например, в пикселях и процентах. Далее пример:

td border: 5px solid #CCCCCC; 
border-radius: 10px;
>

Поля или внутренний отступ

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

td border: 5px solid #CCCCCC; 
border-radius: 10px;
padding: 10px;
>

HTML Границы таблицы

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

Пример

table, th, td <
border: 1px solid black;
border-collapse: collapse;
>

Стилизация границ таблицы

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

Пример

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

Закругленные границы таблицы

С помощью свойства border-radius границы получают закругленные углы:

Пример

table, th, td <
border: 1px solid black;
border-radius: 10px;
> Пропустите границу вокруг таблицы, исключив table в селекторе CSS:

Пример

th, td <
border: 1px solid black;
border-radius: 10px;
>

Пунктирные границы таблицы

С помощью свойства border-style можно настроить внешний вид границы.

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Пример

th, td <
border-style: dotted;
>

Цвет границы

С помощью свойства border-color вы можете установить цвет границы.

Пример

th, td <
border-color: #96D4D4;
>

ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!

Связь с админом

Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:

Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты

Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *