Полезные ссылки

УРОК 23 - ТАБЛИЦА В HTML


Обычно html таблицы - используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью <div> и CSS). Например, в webuchebniki.narod.ru – все размечено и размещено относительно друг друга при помощи таблиц (собственно, весь сайт расположен в большой сложной таблице).

 Вот пример табличной структуры сайта webuchebniki.narod.ru.:

 

Шапка сайта (логотип, рисунок, меню)

Полезные ссылки

Основное содержание

Полезные ссылки

Блок

 

Для построения таблицы необходимы следующие элементы:

TABLE - Элемент для создания html таблицы. Обязательно должен иметь открывающий (<table>) и закрывающий (</table>) теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации.

TR (Table Row) - Создает новый ряд таблицы.  Обязательно должен иметь открывающий (<tr>) и закрывающий (</tr>) теги.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязательно должен иметь открывающий (<td>) и закрывающий (</td) теги.

 

Атрибут BORDER задает толщину рамки таблицы в пикселях.

 

Пример:

 

<table border="1"><tr>

<td>ряд 1 ячейка 1</td> <td>ряд 1 ячейка 2</td></tr>

<tr>

<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>

</tr>

</table>

 

нажмите чтобы увидеть результат

 

Разобрались? Т.е. таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>ряд 1 ячейка 1</td> и <td> ряд 1 ячейка 2 </td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>. Все довольно просто.

 

Предыдущая Следующая
здесь то, что нужно         
Полезные ссылки

Яндекс.Метрика
Сайт создан в системе uCoz