zed-92.narod.ru - создание сайта

Сделайте из себя - вебмастера!

Вся информация об этом сайте расположена здесь

Охота пообщаться и провести дискуссии? Вам сюда!

Общайтесь в реальном времени с реальными людьми!

Остроты, шутки, приколы, картинки, полезная инфа и многое другое

Для тех, кто имеет свой сайт и знает HTML

Форум сайта. Заходите, регистрируйтесь, общайтесь!

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

<table>
Элемент для создания таблицы. По умолчанию таблица отображается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации.

Параметры:

align - задаёт способ горизонтального выравнивания таблицы. Возможные значения: left, center, right. Значение по умолчанию - left.

valign - должен задавать способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.

border - задаёт ширину внешней рамки таблицы (в пикселах). При border=0 или при отсутствии этого параметра рамка отображаться не будет.

bgcolor - задаёт цвет фона ячеек таблицы.

background - позволяет заполнить фон таблицы рисунком. В качестве значения нужно указать URL рисунка.

<caption>
Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов в этом случае недопустимо. В данном случае я советую "разнести" блок заголовка над/под всей таблицей. Как это сделать - описано далее.

Параметры:

align - задаёт способ вертикального выравнивания заголовка таблицы. Возможные значения:

top - помещает заголовок над таблицей (значение по умолчанию);
bottom - помещает заголовок под таблицей.

<tr>
Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов <td> и <th> - о них ниже.

Параметры:

align - задаёт способ горизонтального выравнивания содержимого всех ячеек данного ряда. Возможные значения: left, center, right.

valign - задаёт способ вертикального выравнивания содержимого всех ячеек данного ряда. Возможные значения: top, bottom, middle.

bgcolor - задаёт цвет фона для всех ячеек данного ряда.

<td> и <th>
Элемент <td> оздает ячейку с данными в текущей строке. Элемент <th> также создает всё ту же ячейку, но делает ее как ячейку-заголовок.
Такое разграничение позволяет браузерам оформлять содержимое ячейки-заголовка и ячеек с данными разными шрифтами. Также улучшается работа браузеров, использующих речевой интерфейс. В качестве содержимого ячейки можно даже использовать другие таблицы.

Параметры:

align - задаёт способ горизонтального выравнивания содержимого ячейки. Возможные значения: left, center, right. По умолчанию способ выравнивания задаётся значением параметра align элемента <tr>. Если же и он не задан, то для <td> выполняется выравнивание по левому краю, а для <th> - по центру.

valign - задаёт способ вертикального выравнивания содержимого ячейки. Возможные значения: top, bottom, middle. По умолчанию происходит выравнивание по центру, если значение этого параметра не было задано ранее в элементе TR.

width - задаёт ширину ячейки. Ширина устанавливается в пикселах или в процентном отношении к ширине таблицы.

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

colSpan - задаёт количество столбцов, на которые простирается данная ячейка.

rowSpan - задаёт количество рядов, на которые простирается данная ячейка.

nowrap - блокирует автоматический перенос слов в пределах текущей ячейки.

bgcolor - задаёт цвет фона ячейки.

background - заполняет ячейку фоновым рисунком. Нужно указать URL рисунка.

Пример 1:

Исходный текст:

<table border="1">
	<tr>
		<td colSpan=3>
		Заголовок
		</td>
	</tr>
	<tr>
		<td>
                A1
		</td>
		<td>
		A2
		</td>
		<td>
		A3
		</td>
	</tr>
	<tr>
		<td>
		B1
		</td>
		<td>
		B2
		</td>
		<td>
		B3
		</td>
	</tr>
</table>

Результат:

Заголовок
A1	A2	A3
B1	B2	B3

Пример 2:

Исходный текст:

<table border="1" width="95%">
<caption><center>Планы на вечер</center></caption>
    <tr>
         <th>
               Время
         </th>
         <th colSpan=2>
                Занятие
         </th>
    </tr>
    <tr>
         <td>
                <font color=#008040>18:00</font>
         </td>
         <td>
                Собираюсь на тренировку
         </td>
         <td rowSpan=3 bgcolor=#ffffd2>
                <font color=red><center>
                Необязательная часть</center></font>
         </td>
    </tr>
    <tr>
         <td>
                <font color=#008040>18:15</font>
         </td>
         <td>
                Тренировка
          </td>
    </tr>
    <tr>
          <td>
                  <font color=#008040>20:00</font>
          </td>
          <td>
                 Возвращение с тренировки, отдых
          </td>
      </tr>
      <tr>
           <td colSpan=3 bgcolor=#ffffd2>
                 <font color=#ff0000><center>
                 Торжественная часть</center></font>
           </td>
      </tr>
      <tr>
            <td>
                  <font color=#008040>21:00</font>
            </td>
            <td colSpan=2>
                   Поход в ресторан
             </td>
       </tr>
       <tr>
             <td>
                   <font color=#008040>22:00</font>
             </td>
             <td colSpan=2>
                    Прогулка с друзьями
              </td>
         </tr>
         <tr>
               <td>
                    <font color=#008040>23:00</font>
               </td>
               <td>
                    Возвращение домой
               </td>
               <td rowSpan=2 bgcolor=#ffffd2>
                    <font color=red><center>
                    Прочее</center></font>
               </td>
         </tr>
         <tr>
                <td>
                    <font color=#008040>23:30</font>
                </td>
                <td>
                    Сон
                </td>
           </tr>
</table>

Результат:

Планы на вечер
Время	Занятие
18:00	Собираюсь на тренировку	Необязательная часть
18:15	Тренировка
20:00	Возвращение с тренировки, отдых
Торжественная часть
21:00	Поход в ресторан
22:00	Прогулка с друзьями
23:00	Возвращение домой	Прочее
23:30	Сон	Прочее

<<<Предыдущий раздел|Следующий раздел>>>

С ЧЕГО НАЧАТЬ

ФОРМАТИРОВАНИЕ ТЕКСТА

CSS

Используются технологии uCoz