HTML - таблицы

⇐ ПредыдущаяСтр 6 из 6

Информация в таблице содержится как в горизонтально расположенных строках, так и в вертикальных – столбцах. Пересечения строк и столбцов образубт ячейки.Но Html – таблицы не способны производить математические расчеты.

Для включения таблицы в Html-документ используется тег < TABLE>. Параметры самой таблицы задаются с помощью трех тегов:

< TH> -для заголовков таблицы;

< TR> -для задания строк;

< TD> -для задания данных (то есть информации, которая будет содержаться в ячейках таблицы).

< table> < tr> < td bgcolor=" #CCCCСС" > a< /td> < td bgcolor=" #999999" > b< /td> < td bgcolor=" #CCCCСС" > c< /td> < /tr> < tr> < td bgcolor=" #999999" > a1< /td> < td bgcolor=" #CCCCСС" > b2< /td> < td bgcolor=" #999999" > c3< /td> < /tr> < /table>

Пример:

Фон задается параметром bgcolor=" цвет_фона". Фон можно задать для таблицы в целом, для строки, для столбца (в пределе одной строки). В нашем случае задали фон для каждого столбца. Высота и ширина ячейкам таблицы задается параметрами height и width. Их можно задать для всей таблицы, для одной строки, для ячейки (столбца). Высота и ширина могут задаваться как в пикселях, так и процентах. Зададим ширину и высоту в пикселях для столбцов (ячеек).

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

То же самое со строками, если задать для какой-то строки наибольшую длину, то все остальные строки выровняются по этой наибольшей строке. Можно задать высоту и ширину для всей таблицы, тогда все ячейки и строки поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях).

Выровнять текст можно при помощи тега < center> < /center>. В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже таблицы (в этом случае они называются - вложенные таблицы). Для форматирования текста применяются рассмотренные выше теги.

Пример:

< table> < tr> < td height=" 40" width=" 55" bgcolor=" #CCCCCC" > < center> a < /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> b < /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> c < /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" > < center> a1 < /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2 < /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> c3 < /center> < /td> < /tr> < /table>

Вертикальное выравнивание задается следующим атрибутом - valign=" middle" (top, bottom) - содержимое конкретной ячейки будет находиться в середине ячейки (наверху или внизу).

< table> < tr> < td height=" 40" width=" 55" bgcolor=" #CCCCCC" valign=" top" > < center> a< /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> b< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" valign=" bottom" > < center> c< /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" valign=" bottom" > < center> a1< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2< /center> < /td> < td width=" 55" bgcolor=" #999999" valign=" top" > < center> c3< /center> < /td> < /tr> < /table>

Пример:

Для создания таблиц сложной структуры применяются параметры colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество строк (эти параметры могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (строки)).

Пример:

< table> < tr> < td height=" 40" bgcolor=" #CCCCCC" colspan=" 2" > < center> a< /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> b< /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" > < center> a1< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2< /center> < /td> < td width=" 55" bgcolor=" #999999" > < center> c3< /center> < /td> < /tr> < /table>

В этом примере использовался параметр colspan=2, прописав его для ячейки «а» Ячейки «с» нет, т.к. ячейка «а» равна по длине двум ячейкам (что указано параметром colspan). Для избавления от пространства между ячейками таблицы используется атрибут cellspacing.

< table cellspacing=0> < tr> < td height=" 40" bgcolor=" #CCCCCC" colspan=" 2" > < center> a< /center> < /td> < td width=" 55" bgcolor=" #999999" rowspan=" 2" > < center> b< /center> < /td> < /tr> < tr> < td height=" 40" width=" 55" bgcolor=" #999999" > < center> a1< /center> < /td> < td width=" 55" bgcolor=" #CCCCCC" > < center> b2< /center> < /td> < /tr> < /table>

Пример:

Можно увеличить пространство между ячейками, присвоив параметру другое значение cellspacing=5. Существует атрибут cellpadding, который добавляет свободное пространство между содержимым ячейки и ее границами.

Использовние параметра bgcolor задает цвет фона для таблицы (строки, ячейки), а параметр background задает фоновую картинку для таблицы (строки, ячейки). Применение этого параметра необходимо так, как Internet Explorer отображает параметр bgcolor для вложенных таблиц, а Netscape Navigator этот параметр для вложенных таблиц не отображает, поэтому используется background.

Чтобы ячейка не пустовала, в нее вводится & nbsp (символ неразрывного пробела), потому что конструкцию < td> < /td> броузеры игнорируют. Поэтому для корректного отображения таблицы везде необходимо вставлять в пустые ячейки & nbsp.

Параметр align можно задать для содержимого ячейки, но удобного align=" justify" тут нет.

Рамка вводится параметром border. Например, зададим рамку равную 3 пикселям:

< table border=" 3" >

Для задания рамке цвета используется параметр:

< table border=" 3" bordercolor=" #000000" >

Ниже в таблице приведена краткая сводка допустимых атрибутов:

Атрибут	Элемент	Назначение
ALIGN=	Таблица, заголовок, строка, ячейка.	Выравнивание таблицы по горизонтали; выравнивание данных по горизонтали; размещение заголовка над или под таблицей.
VALIGN=	Строка, ячейка.	Выравнивание по вертикали.
WIDTH=	Таблица, ячейка.	Ширина.
HEIGHT=	Ячейка.	Высота.
COLSPAN=	Ячейка.	Протяженность в несколько столбцов.
POWSPAN=	Ячейка.	Протяженность в несколько строк.
BGCOLOR=	Таблица, ячейка.	Цвет фона.
CELLSPACING=	Таблица.	Зазор между ячейками.
CELLPADDING=	Таблица.	Зазор между содержимым ячейки и ее границей.
BORDER=	Таблица.	Отображение границ ячеек и внешней рамки таблицы.
BORDERCOLOR=	Таблица	Цвет рамки.

Пример таблицы с использованием допустимых атрибутов:

< html> < head> < title> Таблицы < /title> < /head> < body text=" blue" bgcolor=" lightblue" > < center> < b> Отметка посещаемости< /b> < table cellspacing=0 border=" 3" bordercolor=" darkblue" > < tr> < td width=" 50" height=" 60" rowspan=" 2" align=" center" > № п/п< /td> < td width=" 250" rowspan=" 2" valign=" middle" align=" center" > Фамилия И.О.< /td> < td width=" 360" height=" 30" colspan=" 6" valign=" middle" align=" center" > Присутствие< /td> < /tr> < tr bgcolor=" #CCCCCC" > < td width=" 60" height=" 30" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < /tr> < tr> < td width=" 50" height=" 30" valign=" middle" align = " center" > 1. < /td> < td width=" 250" > & nbsp < /td> < td width=" 60" > & nbsp< /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < td width=" 60" > & nbsp < /td> < /tr> < /table> < /center> < /body> < /html>

⇐ Предыдущая 1 2 3 4 56

Поделиться с друзьями:

mylektsii.su - Мои Лекции - 2015-2025 год. (0.009 сек.)Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав Пожаловаться на материал