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

Границы, рамки и отступы 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 со следующими значениями:

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

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

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

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

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

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

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

Источник