Сегодня: 16 сентября 2024 г., понедельник Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 11. Таблицы (продолжение)

У таблиц, как уже говорилось в предыдущем уроке, много атрибутов. Изучим еще два.

Атрибуты "colspan" и "rowspan".

Colspan - сокращение от "column span/охват столбцов". Colspan используется в теге <td> для определения того, сколько столбцов охватывает данная ячейка:

Пример 1:

<table align="center" border="1" cellpadding="0">
             <tr>
               <td colspan="3">Ячейка 1</td>
           </tr>
             <tr><
             <td>Ячейка 2</td>
             <td>Ячейка 3</td>
              <td>Ячейка 4</td>
             </tr>
          </table>

Будет выглядеть в браузере:

Ячейка 1
Ячейка 2	Ячейка 3	Ячейка 4

Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.

Пример № 2:

<table align="center" border="1" cellpadding="0">
             <tr>
               <td colspan="2">Ячейка 1</td>
              <td>Ячейка 2</td>
             </tr>
            <tr>
              <td>Ячейка 3</td>
              <td>Ячейка 4</td>
               <td>Ячейка 5</td>
            </tr>
           </table>

Вот так будет выглядеть в браузере:

Ячейка1		Ячейка 2
Ячейка 3	Ячейка 4	Ячейка 5

Как вы уже могли догадаться, rowspan определяет, сколько рядов охватывает данная ячейка:

Пример № 3:

<table align="center" border="1" cellpadding="0">
             <tr>
              <td rowspan="3">Ячейка 1</td>
               <td>Ячейка 2</td>
            </tr>
             <tr>
               <td>Ячейка 3</td>
            </tr>
             <tr>
               <td>Ячейка 4</td>
             </tr>
          </table>

В браузере:

Ячейка 1	Ячейка 2
	Ячейка 3
	Ячейка 4

В этом примере rowspan имеет значение "3" в ячейке "Ячейка 1". Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два).

Не очень сложно? Тогда попрактикуйтесь и создайте пару таблиц с использованием атрибутов "colspan" и "rowspan".

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Евгений Андросов
Дата: 04.01.2013

Нурай! За отступ текста от краев таблицы отвечает атрибут cellpadding. В моем примере он равен 0, соответственно, отступа нет. Поставьте 5 - будет отступ 5 пикселей.

Комментарий добавил(а): Нурай
Дата: 03.01.2013

А как сделать отступ текста от краёв таблицы внутри?

Комментарий добавил(а): Никита
Дата: 14.07.2012

А все, уже разобрался. Просто задал выравнивание по центру для этой конкретной строки.

Комментарий добавил(а): Никита
Дата: 14.07.2012

Подскажите в чем проблема: когда я пользуюсь атрибутом colspan текст в ячейке выводится не по середине, как в Вашем примере номер 1, а с самого начала ячейки, т.е. слева. Как это исправить ?

Задать вопрос

Имейте, пожалуйста, ввиду, что любые ссылки, html-теги или скрипты, будут выводиться в виде обычного текста - бессмысленно их использовать. Вопросы, содержащие мат и оскорбления, будут немедленно удалены.