Таблицы

  1. Основные понятия
  2. Атрибуты тегов таблицы
  3. Использование таблицы как способа расположения элементов на странице

Основные понятия

Таблицы - это основное средство управления размещением объектов на странице. Основные теги таблицы:

Cовет

Весь текст и графика помещаются внутри тегов td.

Пример простой таблицы

This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.
 
Возврат в начало страницы     Возврат на главную страницу сайта

Атрибуты тегов таблицы

Среди атрибутов тегов таблиц можно назвать следующие:

Cовет

Хотите увидеть, как таблица управляет макетом страницы? Задайте значение рамки равным 1, и тогда ячейки и строки таблицы будут представлены в виде сетки.

Cовет

Еще один способ изменения интервалов в таблице - эта вставка графической прокладки в тег TD. Эти "прокладки" являются прозрачными файлами GIF размером 1х1 пиксель, которые ручную растягиваются по ширине и высоте.

Cовет

Если вы хотите выровнять таблицу по центру страницы, то можно использовать тег div вместе с атрибутом выравнивания типа <div align=center>. Открывающийся тег и атрибут помещаются перед таблицей; после того, как вы закончите ввод таблицы, введите закрывающий тег </div>.
 
Возврат в начало страницы    Возврат на главную страницу сайта

Пример таблицы с атрибутами align, border, cellspacing, cellpadding, width

This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.



Атрибуты для строк существуют, но используются редко. Контроль осуществляется при работе с ячейками таблицы. Атрибуты выравнивания таковы:

Пример таблицы с атрибутами выравнивания в ячейках

This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.



Пример таблицы с атрибутами выравнивания valign=x в ячейках

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


This is my first table cell. And this is my second table cell.
This is my first table cell in the second row. And this is the second table cell in the second row.


 
Возврат в начало страницы    Возврат на главную страницу сайта

Пример таблицы с атрибутом colspan в ячейках

 
This is my first table cell, which spans two columns.
This is my first table cell in the second row. And this is the second table cell in the second row.

 
Возврат в начало страницы    Возврат на главную страницу сайта

Пример таблицы с атрибутом rowspan

 
This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is my first table cell, which spans two columns. This is the first table cell in the second column.
And this is the second table cell in the second table row.


Использование атрибутов colspan и rowspan предоставляет прекрасные возможности для размещения объектов на Web-странице, в частности разрешает верстку в несколько колонок.

Cовет

Попробуйте вставить в таблицу графику с помощью тега <img src>. Именно так постороены макеты большинства Web-страниц.

Например:
This is the first table cell in the second column.
And this is the second table cell in the second table row.

Иногда вам надо оставить какую-либо ячейку таблицу пустой. Не следует использовать в этом случае комбинацию: 

<td></td>

К сожалению, многие броузеры "чудят" с пустыми ячеками. Поэтому, для создания пустой ячейки воспользуйтесь специальным зарезервированным символом неhазрывного пустого пространства &nbsp (подробнее - см.здесь), а именно:

<td>&nbsp;</td>

Да, мы чуть не забыли о таких важных элементах создания таблицы, как заголовок таблицы - тег <caption> и тег и заголовков столбцов таблицы <th>. Например,

Краткий список зарезервированных символов
Наименование Значение Пример
Меньше чем &lt; <
Больше чем &gt; >
Амперсанд &amp; &
неразрывный пробел &nbsp;  
кавычки &quot; "

Это записано в HTML-документе так:

 <CENTER>
<TABLE cellSpacing=1 cellPadding=8>
<caption align="top"><b>Краткий список зарезервированных символов</b>
</caption> 
  <TBODY>
  <TR align=middle>
    <TH>Наименование</TH>
    <TH>Значение</TH>
    <TH>Пример</TH></TR>
  <TR align=middle>
    <TD>Меньше чем</TD>
    <TD>&lt;</TD>
    <TD><</TD></TR>
  <TR align=middle>
    <TD>Больше чем</TD>
    <TD>&gt;</TD>
    <TD>></TD></TR>
  <TR align=middleм
    <TD>Амперсанд</TD>
    <TD>&amp;</TD>
    <TD>&</TD></TR>
  <TR align=middle>
    <TD>неразрывный пробел</TD>
    <TD>&nbsp;</TD>
    <TD> </TD></TR>
     <TR align=middle>
    <TD>кавычки</TD>
    <TD>&quot;</TD>
    <TD>"</TD></TR></TBODY></TABLE></CENTER>

Вы заметили, здесь использована комбинация

<td>&nbsp;</td>

для создания пустой ячейки таблицы?

Атрибут тега <caption >align="top" означает, что заголовок надо поместить до ("вверху") таблицы. Другое значение атрибута align=bottom. Тогда заголовок будет располагаться под таблицей.
Удобно, не правда ли? Допустимыми значениями являются также left, right.

А теперь воспользуемся знаниями о каскадных таблицах стиля , и попробуем задать разные цвета в таблице для заголовков столбцов и для "тела" самой таблицы.

table {
  margin-left: -4%;
  font-family: sans-serif;
  background: white;
  border-width: 2;
  border-color: white;
}
th { font-family: sans-serif; background: rgb(204, 204, 153) }
td { font-family: sans-serif; background: rgb(255, 255, 153) }
Краткий список зарезервированных символов
Наименование Значение Пример
Меньше чем &lt; <
Больше чем &gt; >
Амперсанд &amp; &
неразрывный пробел &nbsp;  
кавычки &quot; "

В данном случае использован встроенный стиль CSS. Это трудоемко и нерационально. Так делать не надо!
Лучше воспользоваться внедренным стилем. Например, он используется для таблиц на странице Форматирование текста.
Либо воспользоваться связанными таблицами стилей.

Если вы не хотите воспользоваться таким мощным инструментом, как каскадные таблицы стилей, то в вашем распоряжении имеется такое простое средство как атрибут bgcolor в тегах <td> и <th>.
Это "работает" практически во всех броузерах и не зависит от того, поддерживает ли броузер пользователя работу с CSS. Как задаются шестнадцатиричные коды для цветов подробно описано в документе Форматирование текста

Краткий список зарезервированных символов
Наименование Значение Пример
Меньше чем &lt; <
Больше чем &gt; >
Амперсанд &amp; &
неразрывный пробел &nbsp;  
кавычки &quot; "

Это записано в HTML-документе так:

 <CENTER>
<TABLE cellSpacing=1 cellPadding=8>
<caption align="top"><b>Краткий список зарезервированных символов</b>
</caption> 
  <TBODY>
  <TR align=middle>
    <TH bgcolor="#CCCC99">Наименование</TH>
    <TH bgcolor="#CCCC99">Значение</TH>
    <TH bgcolor="#CCCC99">Пример</TH></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">Меньше чем</TD>
    <TD bgcolor="#FFFF66">&lt;</TD>
    <TD bgcolor="#FFFF66"><</TD></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">Больше чем</TD>
    <TD bgcolor="#FFFF66">&gt;</TD>
    <TD bgcolor="#FFFF66">></TD></TR>
  <TR align=middleм
    <TD bgcolor="#FFFF66">Амперсанд</TD>
    <TD bgcolor="#FFFF66">&amp;</TD>
    <TD bgcolor="#FFFF66">&</TD></TR>
  <TR align=middle>
    <TD bgcolor="#FFFF66">неразрывный пробел</TD>
    <TD bgcolor="#FFFF66">&nbsp;</TD>
    <TD bgcolor="#FFFF66"> </TD></TR>
     <TR align=middle>
    <TD bgcolor="#FFFF66">кавычки</TD>
    <TD bgcolor="#FFFF66">&quot;</TD>
    <TD bgcolor="#FFFF66">"</TD></TR></TBODY></TABLE></CENTER>
 
Возврат в начало страницы    Возврат на главную страницу сайта

Использование таблицы как способа расположения элементов на странице

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

Пример использования таблицы как способа расположения элементов на странице

Определение дизайна рамок таблицы
(использование атрибута frame тега table)
Пример использование атрибута frame тега table

А вы посетили выставку Клода Моне в Эрмитаже?

 
Возврат в начало страницы    Возврат на главную страницу сайта  
 

Хостинг от uCoz