• 1984
  • 0
  • Уровень сложности исполнения: Справочник

Для создания таблиц используются следующие теги:

  • <TABLE> - Для обрамления самой таблицы;
  • <THEAD> - Определяет заголовки элементов таблицы;
  • <TBODY> - Определяет тело таблицы;
  • <TFOOT> - Определяет нижнюю, завершающую часть таблицы;
  • <CAPTION> - Для обрамления подписи; Атрибут ALIGN={TOP | BOTTOM} - размещение заголовка относительно таблицы (вверху или внизу таблицы)
  • <COLGROUP> - Задание свойств одного или более столбцов;
  • <COL> - Задание свойств одного или более столбцов;
  • <TR> - Для обрамления рядов таблицы;
  • <TD> - Для обрамления клеток
  • <TH> -- </TH> тех, что нужно показывать пожирнее, например заголовков;
  • <TD> -- </TD> обычных.
  • Атрибуты TABLE:


    имя атрибута

    возможные значения

    смысл

    примечания

    ALIGN

    LEFT, RIGHT

    Определяет горизонтальное положение таблицы. Задание этого атрибута фактически определяет плавающую таблицу, которую может обтекать текст. При использовании этого атрибута по окончании таблицы должна следовать команда BR.

    LEFT - Таблица прижимается влево (используется по умолчанию).

    RIGHT – Таблица прижимается вправо. Текст в клетках прижимается к влево.

    VALIGN

    TOP, MIDDLE, BOTTOM

    Определяет вертикальное расположение текста в таблице

     

    WIDTH

    целое

    Определяет ширину таблицы в пикселах или в процентах от ширины экрана. Для задания n в процентах используется знак (%) процента.

    броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце

    HEIGHT

    целое

    Определяет высоту таблицы в пикселах или в процентах от высоты экрана. Позволяет при необходимости растягивать таблицу на весь экран.

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

    BACKGROUND

    URL

    Задает в качестве фона графический файл.

     

    BGCOLOR

     

    Задает цвет фона.

     

    BORDER

    целое

    Ширина рамки в пикселах

    По умолчанию рамка не рисуется

    BORDER COLOR

     

    Задание цвета рамки

     

    BORDER COLORLIGHT

     

    Задание цвета для рамки с тенью (псевдо трехмерная графика)

    Используется вместе с атрибутами BORDERCOLORDARK и BORDER

    BORDER COLORDARK

     

    Задание цвета для рамки с тенью (псевдо трехмерная графика

     

    CELLPADDING

    целое

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

     

    CELLSPACING


    целое

    Задает расстояние в пикселах между внешней рамкой таблицы и ее клетками внутри таблицы.

     

    COLS

    целое

    Число столбцов в таблице. Данный атрибут ускоряет вывод таблицы, что особенно заметно для больших таблиц

     

    FRAME

    VOID, ABOVE, BELOW, HSIDES, LHS, RHS, VSIDES, BOX, BORDER

    Определяет метод отрисовки рамки

    VOID - Убрать наружную часть рамки.

    ABOVE - Показывает верхнюю границу таблицы.

    BELOW - Показывает нижнюю границу таблицы.

    HSIDES - Показывает верхнюю и нижнюю границу таблицы.

    LHS - Показывает левую границу таблицы.

    RHS - Показывает правую границу таблицы.

    VSIDES - Показывает левую и правую границу таблицы.

    BOX - Показывает полную рамку таблицы.

    BORDER - Показывает полную рамку таблицы.

    RULES

    NONE, GROUPS, ROWS, COLS, ALL

    Определяет как будут показаны разделительные линии ( внутренние границы ) таблицы

    NONE - Устраняет все границы внутри таблицы.

    GROUPS - Показывает горизонтальные границы между всеми группами таблицы. GROUPS определены элементами THEAD, TBODY, TFOOT, и COLGROUP

    ROWS – Показывает горизонтальные границы между всеми рядами таблицы.

    COLS – Показывает вертикальные границы между всеми колонками таблицы.

    ALL - Показывает все границы.



    Атрибуты TD, TH

    имя атрибута

    возможные значения

    смысл

    примечания

    NOWRAP

     

    подавляет перенос слов

    эквивалентно использованию непрерывных пробелов (&nbsp;) вместо обычных пробелов в пределах содержимого ячейки

    ROWSPAN

    целое

    число строк, перекрываемых ячейкой

    по умолчанию 1

    COLSPAN

    целое

    число столбцов, перекрываемых ячейкой

    по умолчанию 1

    COLSPEC

     

    ширина колонок в символах или в процентах

    например COLSPEC="20%"

    ALIGN

    LEFT, CENTER, RIGHT, JUSTIFY, CHAR

    горизонтальное выравнивание данных в ячейке

    по умолчанию LEFT или атрибут ALIGN во включающем элементе TR,

    Если задано ALIGN=”CHAR”, то задается свойство CHAR=”.”, с указанием относительно какого символа выравнивать.

    Свойство CHAROFF=Length заставляет сдвигать ячейки, не содержащие заданного символа

    VALIGN

    TOP, MIDDLE, BOTTOM, BASELINE

    вертикальное выравнивание данных в ячейке

    перекрывается атрибутом VALIGN во включающем элементе TR

    WIDTH

    целое

    ширина ячейки в пикселях

    броузер использует это значение, если оно не конфликтует с требованиями ширины в соседних ячейках в том же самом столбце

    HEIGHT

    целое

    высота ячейки в пикселях

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

    BACKGROUND, BGCOLOR, BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK

    Аналогично атрибутам TABLE


    Атрибуты TR только ALIGN, VALIGN – аналогично для TD, TH


    Пример:


    Потребление пива сотрудниками вневедомственной охраны пивзавода


    Ф.И.Олитровсорт
    Иванов Иван Иванович133Хейнекен

    Код:
    <TABLE BORDER CELLSPACING=1 WIDTH="100%">
    <TR><TH WIDTH="58%" ALIGN="CENTER">Ф.И.О</TH>
    <TH WIDTH="18%" ALIGN="CENTER">литров</TH>
    <TH WIDTH="24%" ALIGN="CENTER">сорт</TH>
    </TR>
    <TR><TD WIDTH="58%">Иванов Иван Иванович</TD>
    <TD WIDTH="18%" ALIGN="CENTER">133</TD>
    <TD WIDTH="24%">Хейнекен</TD>
    </TR>
    </TABLE>

    Атрибуты <TABLE>:


    BORDER=2 - Ширина рамки в пикселях


    ALIGN=CENTER


    CELLPADDING=5 – расстояние между содержимым ячеек и границей таблицы


    CELLSPACING=5 – расстояние между ячейками таблицы


    WIDTH="50%" - ширина таблицы в пикселях или относительно размера окна просмотрщика в процентах


    COLS=4 –Количество столбов в таблице


    Клетка может занимать несколько строк или столбцов. Для этого используются атрибуты ROWSPAN или COLSPAN в теге
    <TH> или <TD>. Для задания ширины таблицы или колонки используется атрибут WIDTH, который может быть задан в процентах или пикселях. Вот пример:


    образец таблицы


     

    средний

    повышенная пушистость

    рост

    вес


    самцы

    29см

    6.2кГ

    40%

    самки

    25см

    4.9кГ

    43%


    Код:
    <TABLE BORDER CELLSPACING=1 CELLPADDING=5 WIDTH="50%">
    <TR><TD WIDTH="28%" VALIGN="MIDDLE" ROWSPAN=2> </TD>
    <TD WIDTH="34%" VALIGN="MIDDLE" COLSPAN=2>
    <B><P ALIGN="CENTER">средний</B></TD>
    <TD WIDTH="38%" VALIGN="MIDDLE" ROWSPAN=2>
    <B><P ALIGN="CENTER">повышенная пушистость</B></TD>
    </TR>
    <TR><TD WIDTH="17%" VALIGN="MIDDLE">
    <B><P ALIGN="CENTER">рост</B></TD>
    <TD WIDTH="17%" VALIGN="MIDDLE">
    <B><P ALIGN="CENTER">вес</B></TD>
    </TR>
    <TR><TD WIDTH="28%" VALIGN="MIDDLE">
    <B><P ALIGN="CENTER">самцы</B></TD>
    <TD WIDTH="17%" VALIGN="MIDDLE">
    <P>29см</TD>
    <TD WIDTH="17%" VALIGN="MIDDLE">
    <P>6.2кГ</TD>
    <TD WIDTH="38%" VALIGN="MIDDLE">
    <P>40%</TD>
    </TR>
    <TR><TD WIDTH="28%" VALIGN="MIDDLE">
    <B><P ALIGN="CENTER">самки</B></TD>
    <TD WIDTH="17%" VALIGN="MIDDLE">
    <P>25см</TD>
    <TD WIDTH="17%" VALIGN="MIDDLE">
    <P>4.9кГ</TD>
    <TD WIDTH="38%" VALIGN="MIDDLE">
    <P>43%</TD>
    </TR>
    </TABLE>

    <COL>


    <COL ALIGN= {CENTER | LEFT | RIGHT} SPAN= n >


    Задание свойств одного или более столбцов таблицы. Используется совместно с командой COLGROUP.Параметры, определяемые командой COL, "сильнее" параметров команды COLGROUP.


    <COLGROUP>


    Свойства, заданные командой COLGROUP, переопределяются комндой COL.
    Эта команда влияет на отрисовку линий, определяемых атрибутом RULES= команды TABLE.


    <COLGROUP ALIGN={CENTER | LEFT | RIGHT}.SPAN= n - Задание числа последовательных столбцов.>



    Пример :


    Код:
    <TABLE>
    <COLGROUP ALIGN=RIGHT><COLGROUP SPAN=2 ALIGN=LEFT>
    <TBODY>
    <TR>
    <TD>This column is in the first group and is right-aligned</TD>
    <TD>This column is in the second group and is left-aligned</TD>
    <TD>This column is in the second group and is left-aligned</TD>
    </TR>
    </TABLE>

    Пример :


    Код:
    <TABLE>
    <COLGROUP><COL ALIGN=RIGHT><COL ALIGN=LEFT>
    <COLGROUP><COL ALIGN=CENTER>
    <TBODY>
    <TR>
    <TD>This is the first column in the group and is right-aligned.</TD>
    <TD>This is the second column in the group and is left-aligned.</TD>
    <TD>This column is in a new group and is centered.</TD>
    </TR>
    </TABLE>

    Можешь почитать и вот эту статейку "HTML теги abbr"

    mistakes

    Это тоже интересно

    Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
    Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

    Ваше мнение

    Ваше отношение к TWIG
    Результаты

    Облако тегов

    Anything in here will be replaced on browsers that support the canvas element