русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

HTML - ТАБЛИЦЫ


Дата добавления: 2015-07-09; просмотров: 854; Нарушение авторских прав


Информация в таблице содержится как в горизонтально расположенных строках, так и в вертикальных – столбцах. Пересечения строк и столбцов образубт ячейки.Но 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>  

 
 



<== предыдущая лекция | следующая лекция ==>
НУМЕРОВАННЫЙ СПИСОК | Введение


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.107 сек.