Тег ячейки таблицы. Поля внутри ячеек
Границы html-таблицы легко изменить с помощью средств css. Настройка их отображения осуществляется за счет свойств: collapse и spacing.
Для редактирования вида таблицы используют группу свойств border. Она позволяет настроить ширину, цвет, присутствие/отсутствие границ, их стиль и другие особенности отображения.
Основы
Таблица без указания стилей будет выглядеть как структурированный текст без границ. Table в html строится благодаря тегам:
- tr для строк;
- th для заголовков;
- td для столбцов.
| Head | Head | Head |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
Размер и шрифт текста, фон, отступы от края окна браузера заданы в css в контейнере body.
Body { font-family: Helvetica, Sans-serif; font-size: 5vw; color: black; background-color: rgba(228, 228, 245); padding: 20vh; }
С помощью стилей оформляют вид матрицы. Свойство border позволяет прописать значение толщины, вида и цвета границы html-таблицы.
{ border-width: 2vw; border-style: dotted; border-color: skyblue; }
Сокращенно задается по шаблону border: width style color.
{ border: 1px solid #4c6ea1; }
Для определенной стороны задается по шаблону border-top(/right/bottom/left)-style(/color/width/radius).
{ border-top-color: darkblue; }
Padding устанавливает отступы внутри ячейки от текста до рамки, text-align задает выравнивание.
С помощью стилей оформляют вид таблицы. Свойство border позволяет прописать значение толщины, стиля и цвета рамки. Padding устанавливает отступы от текста, text-align задает выравнивание.
Th, td { border: 1vw solid #4c6ea1; padding: 1vw; text-align: left; }
Без рамок
Использовать border или отдельно прописывать border-color, -width и -style не обязательно, так как сделать html-таблицу без границ можно с полноценным оформлением. Например, следующий код задает фон, отступы и скругленные углы (последняя матрица без внутренних и внешних линий).
Table { text-align: left; background-color: rgba(228, 228, 245); border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; } td, th { padding: 1.5vw; }
Благодаря возможности задать фон для каждой ячейки, таблица без границ может выглядеть так, будто у нее они есть.
Table { text-align: left; background-color: rgba(228, 228, 245); width: 70vw; border-spacing: 2vh 2vh; } td, th { padding: 1.5vh; } td { background-color: rgba(247, 247, 255); }
Можно убрать границы html-таблицы, оставив внутренние. Для этого, например, прописывают свойство border для ячеек (tr), устанавливают на смежных сторонах общие рамки (collapse) и запрещают рисовать линии вокруг матрицы (hidden). Последнее действие скроет линии ячеек, которые при включенном collapse оказываются там же, где и внешние края таблицы.
Table { text-align: center; border-collapse: collapse; background-color: rgba(228, 228, 245); border-radius: 50%; width: 29vh; height: 10vh; border-style: hidden; } td { padding: 1.5vh; border: 0.5vh solid black; }
Collapse и separate
Одно из основных свойств table в html — border-collapse — определяет, как будут отображаться границы ячеек. Свойство может иметь одно значение из трех: collapse, separate, inherit.
table { border-collapse: collapse; }
По умолчанию установлено значение separate, поэтому каждая ячейка будет иметь свою границу. Благодаря collapse можно слить линии ячеек, чтобы их содержимое разделяла одна рамка. На картинке представлено три описанных выше состояния границ: без стилей; со значением border-collapse по умолчанию; со значением border-collapse, оставляющим между ячейками общую линию.
Двойные рамки
Свойство collapse позволяет сделать границы ячеек в html-таблице как независимыми друг от друга, так и общими. С ним часто используют свойство border-spacing, регулирующее расстояние между рамками ячеек. Можно указать как горизонтальный, так и вертикальный интервал.
Table { border-spacing: 0.5vw 1vw; }
Первым значением указывается расстояние между ячейками по горизонтали, второе — по вертикали. Если рамка задана и для самой таблицы, то расстояние от нее до ячеек формируется также свойством spasing, но на него может влиять еще padding матрицы. В случаях когда у матрицы есть фон, освободившееся пространство между ячейками будет заполнено им.
Table { border-spacing: 0.5vw 1vw; border: 1vw solid #4c6ea1; padding: 1vw; background-color: black; } td, th { border: 1vw solid #4c6ea1; padding: 0.3vw; text-align: left; background-color: white; }
Пустые ячейки
Если для таблицы не задано объединение границ ячеек, свойство empty-cells позволяет отобразить их линии и фон, которые считаются пустыми (помечены как visibility или не имеют символов). Если нужно показать рамки и фон каждой ячейки, свойству задают значение show.
table { empty-cells: show; }
Значение hide прячет границы и фон пустых блоков. Если все ячейки ряда пусты, то строка имеет нулевую высоту и только одну вертикальную линию.
Table { border-spacing: 0.5vw 1vw; border: 0.1vw solid #4c6ea1; padding: 0.5vw; background-color: rgba(33, 31, 171, 0.12); empty-cells: hide; } td, th { border: 0.3vw solid #4c6ea1; padding: 0.5vw; text-align: left; background-color: white; }
Атрибут
Для выделения границ группам элементов (ячейкам, столбцам, строкам, группам строк или столбцов) существует атрибут rules. Его значение прописывается непосредственно в html в теге table.
Он позволяет выборочно прорисовать рамки элементов. Достаточно указать атрибут в html, это создаст внутренние линии между ячейками. Границу html-таблицы придется указывать вручную в css.
| Head | Head | Head |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
Так, на первой картинке представлена чистая работа атрибута без дополнительного оформления рамок через table. На второй картинке дорисована верхняя линия, которая установлена через инструкцию.
Table { border-top: 1vw doted #486743; }
У атрибута может быть несколько значений. All создает границы между ячейками с толщиной рамки, равной 1px. Cols создает линии между столбцами, rows - между строками, none стирает края. На картинке приведены примеры таблицы со значениями all и rows.
Изменить цвет границ ячеек и ширину рамки при использовании атрибута rules можно с помощью border и bordercolor.
Конфликты стилей
Ячейкам, строкам, столбцам и группам элементов могут быть заданы собственные значения границ. При этом они могут различаться по трем параметрам: стилю, толщине и цвету.
В режиме collapse возникают конфликты офрмления. Из-за того, что на одну границу может распространяться правило двух разных ячеек, возникает проблема выбора стиля, который будет приоритетным. Как пишет Е. Мальчук, выигрывает самый "броский" (кроме hidden).
- Если у одного из элементов в свойстве border-style для спорной границы указано значение hidden, этот стиль побеждает. Hidden имеет высший приоритет.
- Самый маленький вес имеет значение none. Оно тоже диктует линии не отображаться, но чтобы указание исполнилось, все элементы для этой линии должны иметь это (none) правило.
- Между тонкими и толстыми границами больший приоритет имеют толстые.
- При одинаковых рамках, но разных стилях всегда побеждает двойной сплошной (double), за ним идет solid, пунктирный (dashed), dotted.
- Если отличия заключаются только в цветах, то вид самого маленького компонента всегда выше (оформление ячейки имеет больший приоритет, чем строки, а строки выше, чем таблицы).
Иллюстрация конфликта
Проиллюстрировать конфликт стилей легко на уже рассмотренной таблице. Достаточно добавить пару классов ячейкам и прописать для них оформление. Html принимает вид:
| Head | Head | Head |
|---|---|---|
| Cell | Cell | Cell |
| Cell | Cell | Cell |
Соответствующий ему css.
Body { font-family: Helvetica, Sans-serif; font-size: 5vw; color: black; margin: 0; width: 80vw; background-color: white; padding: 3vw; } table { background-color: rgba(33, 31, 171, 0.12); padding: 0.5vw; border-collapse: collapse; border-spacing: 0.5vw 1vw; border-style: hidden; } th { padding: 1vw; text-align: left; border: 0.1vw solid #4c6ea1; } td { padding: 1vw; border: 0.2vw dotted #4c6ea1; } .second_cell { border: 0.01vw solid #4c6ea1; } .third_cell { border: 0.01vw double red; }
Стили рамок
Оформление границы можно установить для каждой из сторон ячейки отдельно. Для этого достаточно в border-style указать не одно значение, а перечислить четыре, соответственно сторонам ячейки.
Th, td { padding: 1vw; text-align: left; border-width: 0.5vw; border-color: darkred; border-style: dotted; } .seven { border-top-color: skyblue; border-top-style: solid; border-right-width: 2vw; border-bottom-style: dashed; border-left-style: hidden; }
Указать данные в одну строку можно, задав от одного до четырех разных значений. Каждое традиционно становится инструкцией для одной из сторон.
- Если поставить два значения, первое будет отвечать за нижнюю и верхнюю границы, второе — за левую и правую.
- Из трех первое отвечает за верхнюю, второе — за левую и правую, третье — за нижнюю черту.
- Четыре значения однозначно определяют каждую из линий, начиная с верхней по часовой стрелке до левой.
Указать оформление границ ячейки можно и через простое определение данных для каждой стороны, как это было показано выше.
Всего есть десять стилей для рамок. Все они изменяют линию или удаляют ее:
- none — границы нет;
- hidden — более строгое none, блокирует появление черты (в ситуации конфликта);
- dotted — из точек;
- dashed — пунктирная;
- solid — сплошная;
- double — двойная сплошная;
- groove — рамка будто вдавлена в поверхность;
- ridge — выпуклая линия;
- inset — по факту для одной стороны элемента ведет себя как ridge, если применяется ко всему элементу, то top и left затенены, а bottom и right высветлены;
- outset — ведет себя подобно groove при применении к одной стороне элемента, затеняет bottom и right, top и left оказываются более светлыми.
К каждой из ячеек (к top и left сторонам) применен один из стилей. Для того чтобы они не конкурировали между собой, самым "слабым", проставлены наибольшие значения.
Table { background-color: rgba(33, 31, 171, 0.12); padding: 0.5vw; border-collapse: collapse; border: 0.3vw solid black; } th, td { padding: 1vw; text-align: left; } .one { border-top: hidden; border-left: hidden; } .two { border-top: 0.4vw double #4c6ea1; border-left: 0.4vw double #4c6ea1; } .three { border-top: 0.5vw solid #4c6ea1; border-left: 0.5vw solid #4c6ea1; } .four { border-top: 0.7vw dashed #4c6ea1; border-left: 0.7vw dashed #4c6ea1; } .five { border-top: 0.8vw dotted #4c6ea1; border-left: 0.8vw dotted #4c6ea1; } .six { border-top: 0.9vw ridge #4c6ea1; border-left: 0.9vw ridge #4c6ea1; } .seven { border-top: 1vw outset #4c6ea1; border-left: 1vw outset #4c6ea1; } .eight { border-top: 1.1vw groove #4c6ea1; border-left: 1.1vw groove #4c6ea1; } .nine { border-top: 1.2vw inset #4c6ea1; border-left: 1.2vw inset #4c6ea1; }
Структурирование материала
Характер данных, представленных в матрице, часто требует модификации границ самой таблицы, рамок ее ячеек, строк или столбцов. Для этого можно использовать:
- обнуление линий (для border-width указывают значение в 0px);
- hidden.
Преимущество hidden в силе его приоритета. Если на границу действует правило сразу двух элементов и в одном из них в border-style указано значение hidden, линия отображаться не будет. Т. е. можно спокойно сделать всю таблицу, а затем выборочно удалить ненужные рамки.
Использование hidden по отношению к ячейкам делает невозможным восстановление границы другими методами (кроме тяжеловеса!imporant). Поэтому при необходимости удалить некоторые из сторон ячеек, лучше использовать none.
Допустим, есть таблица. Цель - удалить вертикальные границы внутри первой строки. Она помечена отдельным тегом (заголовком), поэтому дополнительный класс вводить не требуется. Если применить hidden ко всему тегу, прописав его border-left, то вместе с внутренними границами удалится и одна часть боковой рамки таблицы, что не требовалось по условию. Если же воспользоваться none и линией матрицы, то для внутренних черт будет два неконфликтующих правила, а у внешнего края none будет конфликтовать с правилом, которое ей задается в table, и сторона останется на месте.
Удаление отдельных линий ячеек производится с помощью классов, которые прописывают соответствующим элементам, как это было показано для индивидуального задания стиля, ширины и цвета.
Тогда как убрать боковую границу в html-таблице легче через обращение к внешним рамкам матрицы, которые указывают в table. Достаточно прописать указание на конкретную линию в css.
Table { border-left-style: hidden; }
Удаление рамок в строках легко реализовать с помощью свойства border со значением hidden в tr. Исчезают не только горизонтальные линии таблицы, но и боковые. Матрица вырождается в вертикальные колонки.
Tr { border-style: hidden; }
В крайнем случае обращаются к!important. Если добавить его после инструкции, то она получит дополнительный приоритет.
Границы html-таблицы гибко и легко настраиваются. Группа свойств border позволяет скрыть элементы, изменить цвет, ширину или стиль. Недостатком таблиц является не всегда однозначно предсказуемый результат сочетания правил, примененных к отдельному элементу. Ввиду этого рекомендуют либо сокращать количество возможных стилей для границ, либо применять их точечно.
Мы уже выяснили с вами, что у 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 |
Результат в браузере
Таблица с измененными отступами и расстояниями:
Естественно не обязательно рисовать у таблицы рамку и границы ячеек, чтобы изменять внутренние отступы и расстояния между ячейками.
Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing и cellpadding к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding= "10" - браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.
Отступление от темы или как убрать отступы по краям страницы
Изначально все браузеры устанавливают небольшие отступы по краям HTML-страницы, которые часто бывают не нужны, поэтому сейчас вы научитесь их убирать. Вообще, эту информацию следовало бы поместить в начало учебника, но там бы она вряд ли вам пригодилась.
В свое время у тега
существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin (сверху), rightmargin (справа), bottommargin (снизу) и leftmargin (слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.Способ первый. B теге
указать атрибут style со следующими значениями: style= "margin:0" >... - убирает отступы сразу со всех сторон HTML-страницы. style= "margin:сверху справа снизу слева" >... - регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: style= "margin:5px 3px 4px 5px" >...Второй и более удобный способ. В теге
Домашнее задание.
В этом уроке я тоже не буду все подробно описывать - только общие моменты. Для полноты картины посмотрите результат примера.
- Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
- В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй - левое и правое меню, а также основное содержимое (контент), в третьей - Footer или «подвал» страницы.
- Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
- Важно. Используйте тег
только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
- Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
- Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где - увеличить.
В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.
Средства описания таблиц в HTML
По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег
), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек
Таблица
Если в таблице два тега TR, то в ней две строки. Если в строке три тега TD, то в ней три столбца. Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.
| Заголовок центрирован по умолчанию | Заголовок может объединять столбцы | |
|---|---|---|
| Заголовок может быть расположен перед столбцами | Текст или данные | Текст или данные |
| Заголовок может объединять строки | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | |
| Текст или данные | Текст или данные | |
Использование заголовков таблицы - тег <САРТIОN>
Тег
| Текст или данные | Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.
| Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, | можно воспользоваться атрибутом СОLSPAN=2, |
| чтобы растянуть ее над любым количеством обычных ячеек. | |
Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.
| Текст или данные - ширина 100% |
| Текст или данные - ширина 50% |
| Текст или данные - ширина 200 пикселов |
| Текст или данные - ширина 100 пикселов |
Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter располагает содержимое ячейки по центру.
АLIGN=right выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle центрирует содержимое ячейки по вертикали.
VALIGN=bottom выравнивает содержимое ячейки по ее нижней границе.
| Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. | верх, | середина, | низ. |
| VALIGN=top Выравнивает содержимое ячейки по ее верхней границе. | верх, | верх, | верх. |
| VALIGN=middle Центрирует содержимое ячейки по вертикали. | середина, | середина, | середина. |
| VALIGN=bottom Выравнивает содержимое ячейки по ее нижней границе. | низ, | низ, | низ. |
Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные |
Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.
| Текст или данные | Текст или данные | Текст или данные |
| Текст или данные | Текст или данные | Текст или данные |
Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью
Уральский государственный педагогический университетДобро пожаловать!
|
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
информирует браузер о завершении таблицы.Любая таблица состоит из столбцов и строк.
Тег
Тег
Содержимое ячейки, созданной тегом
Тег
| 1-я ячейка 1-ой строки | 2-я ячейка 1-ой строки |
| 1-я ячейка 2-ой строки | 2-я ячейка 2-ой строки |
|---|---|
|
| |
Выравнивание таблицы. Выравнивание содержимого ячеек
Для выравнивания таблицы используется атрибут align тега
|
) по горизонтали также осуществляется при помощи атрибута align
, а по вертикали при помощи атрибута valign
:
Атрибут align принимает значения left , right , center и justify , которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно; Атрибут valign , принимающий значения top , bottom и middle , задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно. Атрибут align
служит также для выравнивания заголовка (тег По умолчанию содержимое ячеек расположено по левому краю по горизонтали, и выравнено по середине в вертикальной плоскости.
Высота и ширина таблицы и ячеекПо умолчанию размеры (высота и ширина ) и таблицы, и ячеек меняются в зависимости от размеров их содержимого. Но высоту и ширину как таблицы, так и отдельных ее ячеек можно задать явно - при помощи атрибутов hieght и width соответственно. Тег | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
|
|
|
|
| >
|
|
Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.
Границы таблицы и ячеек
Таблица и каждая ее ячейка имеют свои собственные границы, которые по умолчанию не видны.
Атрибут border тега
|
).
Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS ).
Частичное отображение границГраница таблицы и рамка вокруг ячеек могут быть отображены частично. Атрибут frame тега
Отступы внутри и снаружи ячеекПри форматировании таблиц в HTML, для наглядного представления некоторой информации и удобного ее восприятия, может оказаться полезным использование отступов внутри и снаружи ячеек. Внутренние отступы - от границ ячеек до их содержимого, задаются атрибутом cellpadding тега
Объединение ячеекПри оформлении и форматировании таблиц в HTML нередко требуется объединить рядом расположенные ячейки. И если такая необходимость возникла, то Вам следует воспользоваться атрибутами colspan и rowspan тега
.
| Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали. Оба атрибута имеют смысл, если таблица состоит из нескольких строк.
Фон таблицы. Фон ячеек таблицыВ HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки. Атрибут background тега
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
