НОУ ИНТУИТ | Введение в современные веб-технологии. Лекция 7: Таблицы

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 01.09.2010 | Уровень: для всех | Доступ: свободно | ВУЗ: Сибирский федеральный университет

Вам нравится? Нравится 74 студентам

| Поделиться |

Поддержать программу

Группы столбцов. Объединение столбцов и строк

Элементы colgroup и col

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

<table>
    <colgroup>
      <col class="middle">
      <col class="top">
    </colgroup>
   ...

Если же одинаковые свойства нужно применить к нескольким подряд расположенным столбцам, то их можно присвоить элементу colgroup, тем самым немного сократив запись:

<colgroup span="4" width="20%">
    </colgroup>
    <colgroup span="2" width="10%">
    </colgroup>

Что равносильно следующей записи:

<colgroup width="20%">
      <col />
      <col />
      <col />
      <col />
    </colgroup>
    <colgroup width="10%">
      <col />
      <col />
    </colgroup>

Как видите, число столбцов в группе задаётся либо их явным перечислением (обычно это делается в том случае, если некоторые из них нуждаются в дополнительных атрибутах), либо указанием их количества в значении атрибута span.

.graycol {
      background: #eee;
    }
    .widecol {
      width: 200px;
    }
  ...
  <table>
    <colgroup>
      <col class="graycol" span="2" />
      <col />
      <col class="graycol" span="2" />
      <col class="widecol" />
    </colgroup>
    <thead>
      <tr>
        <td>Класс graycol</td><td>Класс graycol</td><td>без стиля</td><td>Класс
          graycol</td><td>Класс graycol</td><td>Класс widecol</td>
      </tr>
    </thead>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>Вообще, таблица задаётся
        набором строк</td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>но работа со столбцами
        часто бывает необходима</td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>например, для задания ширины
        или фонового цвета столбца</td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td><td>- для этого HTML предоставляет
        элементы colgroup и col</td>
    </tr>
  </table>

Листинг 9.3. Применение элементов colgroup и col

Рис. 9.5. Применение элементов colgroup и col

Упражнение. Примените к первым трём столбцам серый фон, а к последним - ширину 150 пикселей.

Атрибуты colspan и rowspan

Обычно в каждой строке таблицы количество ячеек одинаково. Если их окажется меньше, то браузер создаст пустые ячейки вместо недостающих; если больше - лишние будут выступать за границы таблицы. В тех случаях, когда нужно объединить горизонтальную группу ячеек, пользуются атрибутом colspan:

<td colspan="3">

Браузер создаст ячейку, занимающую то же пространство по горизонтали, как указанное количество ячеек в строках, расположенных выше или ниже. Аналогичным образом объединяется и вертикальная группа ячеек:

<td rowspan="3">

В обоих случаях, если значения атрибутов слишком большие (требуется объединить больше ячеек, чем их реально существует), то браузер объединит столько ячеек, сколько возможно, не создавая новых.

<table>
    <thead>
      <tr>
        <td colspan="2">colspan="2"</td><td colspan="3">colspan="3"
        </td><td> </td>
      </tr>
    </thead>
    <tr>
      <td rowspan="2">rowspan="2"</td><td></td><td></td><td></td><td>
      </td><td></td>
    </tr>
    <tr>
      <td></td><td rowspan="2" colspan="2">rowspan="2" colspan="2"
      </td><td></td><td rowspan="3" style="text-align: center">rowspan="3"
      </td>
    </tr>
    <tr>
      <td></td><td></td><td></td>
    </tr>
    <tr>
      <td></td><td></td><td></td><td></td><td></td>
    </tr>
  </table>

Листинг 9.4. Применение атрибутов colspan, rowspan и valign

Рис. 9.6. Применение атрибутов colspan, rowspan и valign

Упражнение. Сделайте в таблице объединения как на рис. 7

Рис. 9.7. Объединения в таблице

Дальше >>

Авторизоваться

Введение в современные веб-технологии

Таблицы

Группы столбцов. Объединение столбцов и строк

Элементы colgroup и col

Атрибуты colspan и rowspan

Вопросы и ответы