Язык HyperText Markup Language. Заработок Веб - мастеру. Вторник, 19.03.2024, 06:39







Как продвинуть сайт

Основные элементы таблиц.

Таблица представляет собой особую часть документа HTML. Данные в ней организованы в виде прямоугольной сетки, состоящей из вертикальных столбцов и горизонтальных рядов. Каждая клетка таблади называется ячейкой.
Ячейки могут содержать в себе текст, графику или другую таблицу. Текст и графика внутри ячейки могут быть ссылками.
Таблицы состоят из трех основных частей: названия таблицы, заголовков столбцов и ячеек. Таблица заполняется горизонтальными рядами ячейка за ячейкой слева направо. Заполнение начинается с левого верхнего угла и заканчивается правым нижним. Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.
Моя семья
ИмяРодствоГод рождения
Бенотец1920
Софиямать1924
Давидасестра1951
Марисасестра1954

А вот как она пишется в HTML:

<TABLE BORDER>
<CAPTION ALIGN=TOP> Моя семья</CAPTION>
<TR>
<TH>Имя</TH><TH>Родство</TH><TH>Год рождения</TH>
</TR>
<TR>
<TD>Бен</TD><TD>отец</TD><TD>1920</TD>
</TR>
<TR>
<TD>София</TD><TD>мать</TD><TD>1924</TD>
</TR>
<TR>
<TD>Давида</TD><TD>сестра</TD><TD>1951</TD>
</TR>
<TR>
<TD>Мариса</TD><TD>сестра</TD><TD>1954</TD>
</TR>
</TABLE>

Пояснение написания:

  1. Таблица начинается с тега <TABLE
  2. Если необходимо, что бы каждая ячейка была выделена бордюром, в открывающем теге <TABLE ставим атрибут BORDER
  3. Между тегами <CAPTION> задается название таблицы. Название - элемент произвольный. Ему можно задать местоположение, атрибутом ALIGN с аргументом TOP (вверху) или BOTTOM (внизу)
  4. Каждый ряд ячеек начинается с тега <TR>
  5. Между тегами <TH> и </TH> пишутся названия столбцов
  6. Между тегами <TD> и </TD> вводятся данные для каждой из ячеек
  7. Каждый ряд заканчивается тегом </TR>
  8. Таблица заканчивается тегом </TABLE>

Составные ячейки

Несколько ячеек могут объединиться в одну, как по горизонтали, так и по вертикали. Этот прием полезен при обработке таблиц, так как облегчает востприятие информации. Применяйте объединение по столбцу в тех случаях, если необходимо, что бы соседние ячейки имели общий заголовок. Применяйте объединение в ряду, когда содержание нескольких ячеек подряд одинаково.
Для создания составных ячеек используются атрибуты COLSPAN и ROWSPAN, которые можно применять как в теге <TH>(для создания составных ячеек в строке заголовка), так и в теге <TD>(в основном поле таблицы)

Моя семья
Имя и родствоГод рождения
Бенродители1920
София1924
Давидасестры1951
Мариса1954

А вот как пишется такая таблица в HTML:

<TABLE BORDER>
<CAPTION ALIGN=TOP> Моя семья</CAPTION>
<TR>
<TH COLSPAN=2 >Имя и родство</TH><TH>Год рождения</TH>
</TR>
<TR>
<TD>Бен</TD><TD ROWSPAN=2 >родители</TD><TD>1920</TD>
</TR>
<TR>
<TD>София</TD><TD>1924</TD>
</TR>
<TR>
<TD>Давида</TD><TD ROWSPAN=2 >сестры</TD><TD>1951</TD>
</TR>
<TR>
<TD>Мариса</TD><TD>1954</TD>
</TR>
</TABLE>

Пояснение:

  1. После открывающего тега <TH поставьте атрибут COLSPAN=. Тогда одна ячейка строки будет относиться к нескольким столбцам. Количество этих столбцов задается в качестве агрумента после знака =
  2. После открывающего тега <TD поставьте атрибут ROWSPAN=. Тогда одна ячейка таблицы будет относиться к нескольким рядам. Количество этих рядов задается в качестве агрумента после знака =

Регулировка ширины таблицы и ячеек

Вы можете управлять как общей шириной всей таблицы, так и шириной каждой отдельной ячейки. Если ширина таблицы не задана, броузер изображает ее во всю ширину окна, как и обычный текст. Если таблица узкая, то при этом не возникает проблем. Но если таблица слишком широка для окна броузера, она изображается в неприемлемом виде. Это неблагоприятно скажется на общем дизайне и читаемости.
Общую ширину таблицы можно задавать двумя способами: в пикселах и в процентах от ширины окна. При задании в пикселах таблица всегда будет иметь одну и ту же ширину. Если ширина задана в процентах, таблица всегда будет занимать одну и ту же часть окна броузера.
Ширину отдельных ячеек тоже можно задавать двумя способами: в пикселах и в процентах от общей ширины таблицы. При задании в пикселах все ячейки всегда будут иметь одну и ту же ширину. Если размер задан в процентах, то постоянными будут пропорции ячеек в строке.
Простой способ управления размером таблицы состоит в том, чтобы сначала задать общую ширину таблицы в пикселах, а затем ширину каждого столбца в процентах от общей ширины таблицы. Размеры, заданные в пикселах, размеры, заданные в процентах и составные ячейки могут влиять друг на друга, и потому, если полученный результат не соответствует ожидаемому, пересмотрите все эти параметры и попробуйте другие варианты.
Помните! Все ячейки в одном столбце имеют одинаковую ширину, но у ячеек одного ряда ширина может быть разной.
Моя семья
Имя и родствоГод рождения
Бенродители1920
София1924
Давидасестры1951
Мариса1954

Код таблицы:

<TABLE BORDER width="500">
<CAPTION ALIGN=TOP> Моя семья</CAPTION>
<TR>
<TH colspan="2">Имя и родство</TH><TH width="30%">Год рождения</TH>
</TR>
<TR>
<TD>Бен</TD><TD rowspan="2">родители</TD><TD>1920</TD>
</TR>
<TR>
<TD>София</TD><TD>1924</TD>
</TR>
<TR>
<TD>Давида</TD><TD rowspan="2">сестры</TD><TD>1951</TD>
</TR>
<TR>
<TD>Мариса</TD><TD>1954</TD>
</TR>
</TABLE>

Пояснение:

  1. В теге <TABLE задайте атрибут width. После знака = поставьте общую ширину таблицы в пикселях или процентах
  2. В тегах <TH и <TD, определяющих ячейки таблицы, задайте ширину ячейки width= в пикселях или процентах

Выравнивание в таблицах.

С помощью языка HTML можно управлять выравниванием текста и графики в ячейках таблиц. Если выравнивание не задавать, то название таблицы и заголовки столбцов центрируются, а содержисое прочих ячеек по горизонтали выравнивается по левому краю, а по вертикали - по средней линии ячейки. Такой вид хорош для большинства таблиц, но вы можете попытаться улучшить дизайн и читаемость таблиц с помощью других приемов выравнивания.
Горизонтальное и вертикальное выравнивание содержимое рядов задают с помощью атрибута ALIGN в теге TR. Если нужно сделать горизонтальное и вертикальное выравнивание в отдельных ячейках, это делают с помощью атрибута ALIGN в тегах TH и TD.

Моя семья
Имя и родствоГод рождения
Бенродители1920
София1924
Давидасестры1951
Мариса1954

Код таблицы:
<TABLE BORDER width="500">
<CAPTION ALIGN=TOP> Моя семья</CAPTION>
<TR align="left">
<TH colspan="2">Имя и родство</TH><TH width="30%">Год рождения</TH>
</TR>
<TR>
<TD>Бен</TD><TD rowspan="2">родители</TD><TD>1920</TD>
</TR>
<TR>
<TD>София</TD><TD>1924</TD>
</TR>
<TR>
<TD>Давида</TD><TD rowspan="2" valign="top">сестры</TD><TD>1951</TD>
</TR>
<TR>
<TD>Мариса</TD><TD>1954</TD>
</TR>
</TABLE>

Пояснение:

  1. В теге <TR> поставьте атрибут align=. Агрумент, определяющий тип выравнивания, поставьте после знака =. Выберите LEFT(по левому краю); RIGHT(по правому краю);CENTER(по центру).
  2. В тегах <TH> или <TD> может применять атрибут valign=, задающий выранивание по вертикали. Аргумент, определяющий тип выравнивания, поставьте после знака равно. Выберите TOP(по верхнему краю); BOTTOM(по нижнему краю); MIDDLE(посередине).Буква v в названии атрибута valign соответствует слову "Vertical" - по вертикали

Запрет перехода текста на новую строку.

Средствами HTML можно запретить автоматический переход текста на новую строку при заполнении ячейки. Для этого используется атрибут NOWRAP внутри тега TD.
При этом та ячейка, в которой вписан данный атрибут примет ширину, в зависимости от количества вписанной информации.

Оформление таблиц

Внешний вид таблиц можно разнообразить с помощью трех атрибутов: BORDER, CELLSPACING и CELLPADDING. Атрибут BORDER определяет вид внешней рамки вокруг таблицы и ячеек. Атрибут CELLSPACING определяет толщину линий сетки между ячейками таблицы. Атрибут CELLPADDING определяет величину пустых полей между содержимым ячейки и ее границами.

Если внешняя рамка не нужна, просто не ставьте атрибут BORDER в теге <TABLE>.

Моя семья
ИмяРодствоГод рождения
Бенотец1920
Софиямать1924
Давидасестра1951
Марисасестра1954

Код таблицы:

<TABLE BORDER cellpadding="5" cellspacing="7">
<CAPTION ALIGN=TOP> Моя семья</CAPTION>
<TR>
<TH>Имя</TH><TH>Родство</TH><TH>Год рождения</TH>
</TR>
<TR>
<TD>Бен</TD><TD>отец</TD><TD>1920</TD>
</TR>
<TR>
<TD>София</TD><TD>мать</TD><TD>1924</TD>
</TR>
<TR>
<TD>Давида</TD><TD>сестра</TD><TD>1951</TD>
</TR>
<TR>
<TD>Мариса</TD><TD>сестра</TD><TD>1954</TD>
</TR>
</TABLE>




  • Развлечения: смотреть ТВ слушать Радио онлайн
  • Для детей: раскраски, игры, мультфильмы
  • Создание сайтов в Донецке и области
  • Русские шашки для детей. Интеллектуальное развитие ребёнка в Донецке.
  • Магазины продажи цветов,цветы продажа Киев,продажа цветов цены Борисполь
  • Интернет магазин климатической техники «КлимТехМаркет». Кондиционеры, вентиляция, отопление, водоснабжение, очистители и увлажнители.
  • Строительство бассейнов в Донецке и области
  • Спортивно - кинологический клуб Костюка
  • Продажи цветов,цветы продажа в Макеевке,продажа цветов цены Макеевка
  • Игры всех жанров для компьютера
  • Всё о рыбалке
  • Сайт Донецкого художника Куликова В.В.
  • Продажа недорогой детской и женской одежды в Киеве и области
  • Рефераты




  • WMlink.ru - рекламный брокер

     


    Яндекс.Метрика
    45 Rus © 2024 Создано при помощи