HTML — Базовый курс 9


86 просмотров.

Краткое описание видео: .продолжаем работу с таблицами в данном.уроке мы закончим разбор этого важный.элемент html и посмотрим некоторые.элементы которые иногда тоже.используются при работе с таблицами и.так у нас есть таблица состоящий из 6.ячеек и двух строк давайте попробуем.сейчас создать еще одну строку и.поговорим там об одном интересном.элементе.так создаем новую строку ты ему так.здесь его закрываем теперь если мы.сохраним данную страничку посмотрим.здесь видим что у нас появилась еще одна.строчка не видим это когда в которой.пока нет я че.и сейчас я предлагаю сделать следующее.сделать одну ячейку который будет.занимать как бы полностью весь ряд да да.такое тоже потому что часто бывает нужно.сейчас мы попробуем это сделать то есть.1 черепа которая будет занимать.полностью весь ряд вот если как бы не.знает некоторых моментов можно подумать.что достаточно просто поставить одну.ячейку да то есть один тег td открыть.закрыть и написать допустим 7 ячейка.вот если мы так поступим и сохраним.данную страничку проверим над мы видим.что у нас появилась 7 ячейка но заняла.на именно такой же объем до как и две.ячейки над ней но никак не все.пространство вот это такая особенность.таблиц имейте ввиду то есть если вы.создаете новую человеку в новой строки.она будет занимает пол на столько.сколько ячеек она дней соответственно.чтобы растянуть ее на 2 или 3 ячейки.нужно воспользоваться специальным.атрибутом вот как он пишет мы сейчас с.вами узнаем person очень просто мы вот.здесь наши ученики.прописываем такое атрибут кол спам.то есть это говорит как бы объединить.несколько ячеек и в его значение мы.указываем сколько им на ячеек нужно.объединить две или три данном случае на.давайте объединим 3 ячейки.сохраним и посмотрим и мы видим что.действительно ячеек у нас заняло все.пространство все три если бы мы.поставили там двойку.она бы у нас заняло 2 ширину двух ячеек.видно да вот таким образом работает.reboot коул span тоже иногда.используется нужно сделать разделение в.таблице да и поэтому имейте его вину.следующий момент если мы хотим обедни.допустим вот эти идеи вот эту с этой в.одну как это сделать а дело центр очень.просто то есть мы должны оставить во.второй строке две чайки на первой строке.у нас будет три во второй только 2.причем в первой строке 1 ячейка у нас мы.должны что-то прописать чтобы браузер.знал что это как бы будет война ячеек.делается это так же очень просто встаем.в первую ячейку нашу.и прописываем ей атрибут arrow span ром.спам и указываем сколько ячеек вниз мы.хотим объединить в данном случае мы.хотим объединить наши чайку и одну ниже.лежащие на чем 2.соответственно пока мы удалять вот здесь.лишний ячейку не будем посмотрим что.произойдет сохраняем и мы видим что у.нас первая ячейка объединилась.нижележащий а во второй строке появился.лишняя ячейка то есть в 1 у нас было 3 1.объединилась с нижней соответственно.появилась лишние chayka во второй строке.и и нам нужно удалить вот оно было 6.chayka 0 мир.сохраняем и мы получим тот результат.который нам нужен то есть первой строке.идет три ячейки во 2 танка 2 а вот что.касался атрибутов кауфман который.объединяет ячейки по столбцам да и.атрибута rolls пан который обвиняет.ячейки вниз далее что я хотел что вам.здесь объяснить в этом уроке.это то чтобы вы не боялись вставлять.ячейки другие таблицы.потому что на практике вы сами заметите.что мы очень часто будем вставлять в.одну таблицу другую то есть допустим вот.у нас есть объединенной ячейка да и мы в.нее можем спокойно ставить заметно вот.этого абзаца.еще одну таблицу на бусину остались.побольше места и вставляем сюда ещё одну.таблицу.ничего в этом сверх естественного нет.это очень часто используется также.создаем строку в этой таблице создаем.затем ячейку.так строку сначала закрываем затем.создаем ячейку.ячейку также закрываем мы создали еще.одну таблицу внутри уже существующие.причем можно допустим делать и рамку.какого другого цвета чтобы она.выделялась и мы посмотрим как это будет.выглядеть.border color.мы допустим поставим как раз надо причем.мы поставим вот эти атрибуты cs песенка.и clp-300 пока здесь мы поместим вот.ячейку какой-нибудь абзац нас информация.о том что это уже встроенная таблицы это.встроенная таблицы так или закроем абзац.естественно а сохраняем данную страницу.проверим что у нас получилось и мы видим.что у нас вот ячейки появилась еще одна.таблица и в ней появился абзац это.встроенная таблица.то есть мы так же могли там создать.несколько строк так для этого нам нужно.расширить саму основной таблицы чтобы.там было побольше места давайте расширим.до 800 допустим такая здесь и и расширим.до 400 от этого основной ячейку нам так.сейчас проверим что у нас получилось вот.у нас место расширил что мы всегда можем.был оставить там лица побольше так вот.сейчас мы как раз посмотрим как задается.ширина таблицы в процентах то есть если.мы хотим чтобы вот это внутренняя.таблица встроен это заняло весь объем.этой ячейки.мы можем просто написать ширину равную.100 проц 100 процентам то коду.настроенная таблица и мы здесь и.пропишем атрибут виз равный 100.процентам если в этом случае оно займет.весь объем идей так одна строка у нас.есть давайте дадим еще одну строку.та вторая строка таблицы на путина это.вторая строка.встроенный таблицы.сохраняем проверяем мы видим что у нас.внутренняя таблица занимает все сто.процентов то есть здесь идут остальное.это отступы который мы задавали через.напрямую clp 1 г по день по 5 или 10.пикселей нас там а сама таблицы занимает.100 процентов также мы могли здесь и.разбить на ячейки короче все что можно.делать в обычной таблице можно делать.его встроенный таблицы на практике мы.этот момент пройдем более подробно вот а.пока имейте ввиду что мы можем.использовать таблицы так как нам нужна и.последний момент который вы должны тоже.знать это фоновый цвет таблицы потому.как когда мы создаем таблицу не на самом.деле фона нет фон прозрачный если у нас.фон у самой странице будет допустим.синим то у нас фону таблицы тоже будет.синим кстати о том как задавать фон.самой странице мы не говорим ни давайте.сейчас это быстро.обсудим это делается очень просто внутри.тега body есть открываем воде и у него.есть такой атрибут бага color боли вы.знаете что это тело документа то есть та.часть которую видит пользователь.соответственно мы можем для этой части.задать фоновый цвет пишется на потребу.таким образом и допустим мы напишем сюда.grind зеленый сохраняем и проверяем мы.увидим что у нас фоновый цвет стал.зеленым причем у таблица он тоже стал.зеленым соответственно здесь очень.хорошо видно что у самой таблице фон и.нет то есть как его задать давайте.посмотрим делать это точно так же с.помощью атрибута бага color только у.самой таблице вот нас идет таблица.здесь допустим мы задаем ей также.атрибут бога к вот допустим белым давайт.сохраняем не проявляем мы видим что у.нас.о таблице фоновый цвет стал белым если.мы хотим поменять фоновый цвет допустим.у внутренней таблицы это можно точно так.же сделать с помощью атрибута мага кадр.копируем его у нас внутренняя таблицы я.пошла мы издаем богатого ну допустим.давайте зададим через 16 речные значение.ставим решетку и прописываем f6 в 66 это.такой светло-серый цвет таблицу таких.шестнадцатеричных цветов вы найдете в.дополнительных материалов к этому курсу.так что смотрите нажимаем сохранить и.обновляем мы видим что фоновый цвет у.внутренней таблицу на также изменился.вот это имеете ввиду.на этом данный урок мы заканчиваем в.остальном все что касается.дополнительных моментов связанных с.таблицами мы найдем на практике там это.будет а намного эффективней запоминать

HTML — Базовый курс 9

Как? Вы еще не смотрели? Ну это зря...