Таблицы сейчас очень недооценены. Все начинающие кидаются сразу в пучину резиновой верстки дивами и в итоге, переходя к бутстрапу, начинают биться ап стену, ничего не понимая.
А тем временем таблицы — это ОСНОВА бутстрапа. Понимание таблиц приведет вас к выводу, к которому пришли разработчики 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 задали им все необходимые свойства — ширину, высоту и цвет фона.
You must be logged in to post a comment.