Html справочник таблица 2 на 2

Посмотрите на этот пример с таблицей он Вам ничего не напоминает?? Выровняем текст: Здесь появляется новый атрибут valign - Вертикальное выравнивание До этого момента нам был знаком атрибут align - горизонтальное выравнивание. Эту задачу решают атрибуты colspan и rowspan Контактыcontact us (Abuse) Все для школьников студентов учащихся преподавателей и родителей © 007-018 Такая запись это самая маленькая в ней всего одна строка содержащая один столбец - ячейку Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов а заодно вспомним атрибут border "рамка" который добавит нам наглядности. Как видите это хороший и главное удобный инструмент для верстки страницы Любая ячейка таблицы может служить самостоятельной ёмкостью для наполнения другими тегами и текстовым содержанием а также иметь те или иные индивидуальные свойства - атрибуты. Теперь попробуем объединить весь первый столбец в одну ячейку используя атрибут rowspan ну точнее растянем ячейку первой строчки первого столбца на три строки и на сей раз сразу уберём лишнее. Значения атрибутов width и height в таблице могут указываться не только в пикселях но и в процентах Вот пример: При создании больших сложных таблиц рекомендую сначала рисовать их на бумаге Так будет удобнее представить её общую картину подсчитать количество строк и столбцов увидеть с какой ячейки и на какое количество следует растягивать "объединять" те или иные ячейки. Обратите внимание на то что длина и ширина заданы не для всех ячеек А зачем? Если и так будет выровнена по самым широким и длинным ячейкам на то она и Еще не всё рассказал Разобрались? Если да идем дальше Объединение ячеек Часто при работе с ми возникает необходимость объединить те или иные ячейки. Теперь о новых атрибутах Cellspacing - задаёт расстояние в пикселях между ячейками таблицы Задав значение cellspacing="0" можно избавиться от "зазора" между ячейками Пример увеличим "зазор": Ну и уже по традиции подвожу итог главы Итак что у Вас там за страничка получилась ? У меня она уже. Всё просто главное быть внимательным!

Как видите ячейка растянулась на два столбца но при этом сдвинула третью ячейку которая собственно нам теперь не нужна а по сему мы её просто напросто удаляем Специально допустил эту оплошность чтобы Вы поняли принцип данного действия Исправленный пример:

Тег <table> задаёт начало и конец таблицы любая как известно состоит из строк и столбцов для этого есть ещё два тега: <tr> - строка таблицы <td> - столбец таблицы Вместе эти теги пишутся так: Давайте освежим в голове уже пройденный материал применив эти знания к таблице Покажу на примерах мы это уже проходили Добавим красок: Атрибут cellpadding (не путайте с cellspacing) - в пикселях задаёт поля ячеек (отступ от границ ячеек до текста) Пример: Предположим что в нашем примере нам необходимо "объединить" в третьей строке вторую и третью ячейку для этого атрибуту colspan присваиваем значение (растянуть на два столбца) и вставляем его в нужное место. Читайте так же: И снова таблицы