Иллюстрированный самоучитель по Web-графике

Таблицы

Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вертикальное выравнивание содержимого рядов задается с помощью атрибута ALIGN в тэге <TR>. Выравнивание в отдельных ячейках выполняет атрибут ALIGN в тэгах <ТН> и <TD>. Атрибут ALIGN может принимать аргументы LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру).

Примеры использования атрибута ALIGN:

<TR ALIGN=LEFT>
    <TH WIDTH=25% ALIGN=CENTER>Имя и должность</TH>

Для определения дизайна рамок таблицы в браузере Internet Explorer можно использовать атрибут FRAME тэга <TABLE>. Ниже перечислены возможные аргументы атрибута FRAME, указывающие способы изображения рамки:

  • BOX – все четыре стороны рамки;
  • ABOVE – только верхняя часть рамки;
  • BELOW – только нижняя часть рамки;
  • HSIDES – горизонтальные части рамки сверху и снизу;
  • VSIDES – только левая и правая вертикальные части рамки;
  • LHS – только левая часть рамки;
  • RHS – только правая часть рамки;
  • VOID – не изображать внешнюю рамку.

Разделительные линии между столбцами и рядами таблицы описывается атрибутом RULES в тэге <TABLE>. Атрибут RULES может принимать следующие значения, задающие способ изображения разделительных линий:

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

Приведем пример управления дизайном таблиц.

<HTML>
  
<HEAD>
    <TITLE>Таблицы</TITLE>
</HEAD>
  
<BODY>
    <H2>Основные элементы таблиц</H2>
    <P>Различный дизайн таблиц
        <P>
            <TABLE BORDER=15 FRAME=BOX RULES=ROWS WIDTH=300>
                <CAPTION ALIGN=TOP>Список сотрудников</САРТION>
                    <TR>
                        <TH COLSPAN=2>Имя и должность</TH>
                        <TH>Оклад</TH>
                    </TR>
                    <TR>
                        <TD>Иван</TD>
                        <TD>Директор</TD>
                        <TD>1000</TD>
                    </TR>
                    <TR>
                        <TR>Петр</TD>
                            <TD>Бухгалтер</TD>
                            <TD>800</TD>
                        </TR>
                        <TR>
                            <TD>Федор</TD>
                            <TD ROWSPAN=2>Рабочий</TD>
                            <TD>50</TD>
                        </TR>
                        <TR>
                            <TD>Василий</TD>
                            <TD>70</TD>
                        </TR>
            </TABLE>
            <TABLE BORDER=10 FRAME=BOX RULES=COLS WIDTH=300>
                <CAPTION ALIGN=TOP>Список сотрудников</CAPTION>
                <TR>
                    <TH COLSPAN=2>Имя и должность</TH>
                    <TH>Оклад</TH>
                </TR>
                <TR>
                    <TD>Иван</TD>
                    <TD>Директор</TD>
                    <TD>1000</TD>
                </TR>
                <TR>
                    <TD>Петр</TD>
                    <TD>Бухгалтер</TD>
                    <TD>800</TD>
                </TR>
                <TR>
                    <TD>Федор</TD>
                    <TD ROWSPAN=2>Рабочий</TD>
                    <TD>50</TD>
                </TR>
                <TR>
                    <TD>Василий</TD>70</TD>
                </TR>
            </TABLE>
</BODY>
  
</HTML>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.