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

А тем временем таблицы — это ОСНОВА бутстрапа. Понимание таблиц приведет вас к выводу, к которому пришли разработчики 2000-ых. Bootstrap — величйшее изобретение в html за последние 10 лет.

Итак, начинаем понимать таблицы.

Основа очень проста:

<table border="1">
<tr>
  <td>
    bla
  </td>
  <td>
    bla
  </td>
</tr>
</table>

Скопируйте в свой файл и посмотрите, что вышло. У нас 1 ряд и 2 ячейки. Table — это таблица, tr — table row (табличный РЯД), td — table data (табличные данные). Добавим еще один ряд на 2 ячейки:

<table border="1">
<tr>
  <td>
    bla
  </td>
  <td>
    bla
  </td>
</tr>
<tr>
  <td>
    bla
  </td>
  <td>
    bla
  </td>
</tr>
</table>

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

Внимание: ряды вкладываются в таблицу, ячейки вкладываются в ряды. Тут мы как раз и наблюдаем принцип матрешки.

Ширину таблицы и ячеек, а также отступы (наружные и внутренние) лучше всего задавать через css. Листы стилей к тому же имеют приоритет над теми же размерами, заданными через код напрямую. Тем не менее, нужно знать, какие аттрибуты может иметь таблица:

border="1"

— толщина рамки. Если = 0, то рамки нет.

cellpadding="10"

— паддинг внутрь от границ ячеек, то есть размер отступа между рамкой и текстом в ячейке.

cellspacing="10"

— размер отступа между рамками ячеек! Вы уже заметили, что рамка у таблицы двойная, на самом деле это рамки ячеек, с отступом между ними по умолчанию в 2px. Если выставить cellspacing=»0″, этот просвет схлопнется, но рамка станет жирной — мы как-будто составили рядом 2 рамки каждой ячейки. Чтобы сделать рамку реально одинарной, нужно задать через css стиль:

table {
border-collapse: collapse;
}

После добавления аттрибутов ваша таблица может выглядеть вот так:

<table border="1" cellpadding="10" cellspacing="2" style ="border-collapse: collapse;">
<tr>
 <td>
   bla
 </td>
 <td>
   bla2
 </td>
</tr>
<tr>
 <td>
   bla3
 </td>
 <td>
   bla4
 </td>
</tr>
</table>

Переходим к сложной части. Что делать, если левый ряд содержит 1 ячейку, а правый — 2?

Для этого левой ячейке нужно присвоить аттрибут

rowspan="2"

Скопируйте и вставьте к себе код:

<table border="1" cellpadding="10" cellspacing="0" style ="border-collapse: collapse;">
<tr>
 <td rowspan="2">
   this is td rowspan="2"
 </td>
 <td>
   bla2
 </td>
</tr>
<tr>
 <td>
   bla3
 </td>
 </tr>
</tr>
</table>

rowspan означает — объединить в себе 2 РЯДА (row). То есть левая ячейка становится равной 2 рядам справа от нее. Обрати внимание, что вторая ячейка идет сразу после первой, без отбива на следующий ряд! Что, в общем-то логично. Но становится не таким очевидным, когда мы меняем местами левую и правую стороны. Это камень преткновения для многих.

Задание №1 — поменяй местами левую и правую стороны, чтобы вышло вот так:

Теперь представим, что у нас наверху 1 ряд, а под ним 2 колонки:

Для такого фокуса верхней ячейке нужно задать аттрибут

colspan="2"

означает — стать равным двум КОЛОНКАМ (column).

Скопипасти код:

<table border="1" cellpadding="10" cellspacing="0" style ="border-collapse: collapse;">
<tr>
 <td colspan="2">
   bla
 </td>
</tr>
<tr>
 <td>
   bla2
 </td>
 <td>
   bla3
 </td>
</tr>
</table>

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

Думаю, ясно, что значения colspan и rowspan (после знака тире) могут быть любыми — вы можете объединить любое необходимое количество колонок под 1 рядом или любое количество рядов слева/справа от колонки.

Задание №2 — соберите таблицы:

Таблица №1

Таблица №2

Только на этот раз делаем всё по-взрослому. Открой картинки в фотошопе, измерь размеры таблицы и ячеек, сними значения цветов и собери в HTML и CSS, чтобы выглядело точно также, как на картинках.

Чтобы снять размеры блоков в фотошопе, возьми инструмент Marquee, выдели область (чтобы появились «шагающие муравьи»), в окошке Info появятся значения ширины и высоты выделенной области:

Чтобы снять значения цветов, прочитай урок HTML-старт для детей. Относительные пути к файлам и что такое RGB.

Цвета ячеек задаем через стиль background-color. Цвета фонов можно вставить прямиком в HTML-код наподобие приёма из текущего урока:

<table style ="border-collapse: collapse;">

Но было бы лучше, если бы вы смогли присвоить ячейкам классы, а файле .css задали им все необходимые свойства — ширину, высоту и цвет фона.