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


121 просмотр.

Краткое описание видео: .продолжаем изучение html в данном уроке.мы начнем изучать таблицы который.является очень важной частью html и при.создании любого сайта.таблица обычно всегда используется и.хотя изначально они были придуманы ваш.темы для выводы каких-то отчетов таких.различных статистических данных.они очень быстро стали основной частью.html и с помощью них уже в последнее.время делают сайты на основе там лида то.есть одна большая таблица заставляет.каркас сайта внутри нее есть еще таблица.то есть с помощью таблиц легко придать.сайту нужный вид потому что мы можем.спокойно регулировать их ширину высоту и.так далее этого вы еще все увидите на.брак я сейчас мы займемся основами.создания таблиц и узнаем какие теги для.этого нужны я предлагаю таблицами.заниматься уже в отдельном файле тем.более что у нас уже было 2 страница.тестовая да давайте ее.переименуем из тест пэйдж ты болтаешь да.и будем в ней изучать таблицы теперь у.нас есть три был пейдж здесь открываем.именно эту страницу и внутренние мы.сейчас будем создавать таблицы и так.здесь у нас было тестовая страница.давайте ее переименуем на страница.изучение таблицы.здесь можно ключевые слова также.изменить и все лишнее можно отсюда.убрать абзаца выбираем оставляем один.заголовок и допустим изменим его на.таблице.сохраняем данную страницу в браузере.здесь переписываем текст с причина ты.болтаешь и видим что у нас открылась.страница для изучения таблиц и так с.чего мы начнем начнем мы с самого.главного тайга который отвечает за.создание таблицы это тексты и был.пишется таким образом требовал от.английского таблица и также он.закрывается так парный поэтому требует.закрытием таблицу мы создали да но а как.вы понимаете таблица эта совокупность.строк и столбцов.поэтому просто так treble нам еще ни о.чем не говорит нам нужно еще создать.внутри этой таблице.строки и столбцы потому что без этих.строк и столбцов мы ничего в таблицу.записать не можем и так как создать в.таблице строку.строках таблицы создается очень просто с.помощью дгр вот так он пишется здесь.допустим у закроем с помощью этого тега.мы создали в таблице строку но это еще.не все строку мы создали теперь осталось.создать столбец потому что без столбца.нам тогда ничего записать не дадут.давайте создадим толби столбец столбец.знается с помощью тега т.д..ты балда то запомните то есть очень.легко запоминается если знать полное.как бы название на это это team arrow.пещере 1-я строка.а т.д. это tribal дата то есть один.столбец данных вот теперь можно сказать.что у нас таблица готова теперь мы можем.носить у нее первые данные давайте.между этими тегами создадим допустим вам.зад и напишем первый абзац.таблицы а теперь давайте сохраним данную.страницу и посмотрим что у нас.получилось мы видим что у нас появилась.строчка первый абзац в таблице хотя.никакой таблице не видно чтобы таблицу.можно было увидеть нам нужно прописать.есть специально приму давайте немножко.пониже опустим давайте познакомимся с.первым атрибут on tablets.это примут border который отвечает за.рамку по умолчанию он стоит значение 0.то есть рамки не видно если мы хотим.увидеть рамку таблица мы должны.поставить значение отличное от нуля.например один сохраняем данную страницу.я уже сохраню.обновляем и видим что у нас появилась.рамка есть данный момент у нас в в.таблице одна строка и 1 столбец.все таблица у нас выровнено по левому.краю по умолчанию и имеет размер ширину.такую же как и ширина абзаца теперь.давайте попробуем увеличить ширину.данной таблице и познакомимся с еще.одним атрибутом это прям вот вид.знакомого на примут который отвечает за.ширину объекта.данном случае таблицы.ширину как вы знаете можно задавать и в.пикселях и в процентах если мы хотим.задать ширину в пикселях просто пишем.цифры допустим мы хотим чтобы ширина.таблица была у нас 600 пикселей пишем.600 сохраняем на на страницу.есть мы видим что у нас таблица стала.600 пикселей в ширину.если мы хотим выравнять таблицу по.центру допустим да мы должны прописать.уже знакомый нам атрибут align.который отвечает за выравнивание пишем.онлайн допустим sandr.сохраняем проверяем видно да таблица у.нас по центру теперь давайте попробуем.добавить к нашей строке у нас вот есть.строка да вот она и вне пока только один.столбик давайте попробуем сделать три.столбика 1 2 и 3 вот тогда есть для.этого надо будет просто прописать и еще.один тег td сюда и еще один такт они.сюда ничего сложного здесь нет давайте.вернемся нашу страничку и пропишем сюда.можно даже их атак опустить каждый тег.td.чтобы был на отдельной строке и.прописываем следующий столбик здесь.можно допустим написать 2 ячейка.еще один столбик мы пишем 3.сохраняем данную страницу и проверяем.очевиден да у нас появилось три ячейки в.таблице у нас есть одна строка и в ней.три чайки 3 столбика.куда то имейте ввиду это самые основы и.здесь мы должны все понимать а следующий.момент если мы посмотрим на нашу таблицу.мы увидим что у нас.ячейки как бы все разной ширины да вот.эти столбики если мы хотим задать.допустимым определенные размеры каждому.допустим по 200 пикселей то мы можем это.сделать таким образом можем написать.здесь.из каждому столбику атрибут ширины и.пропишем допустим 200 на каждого для.каждого столбика сохраняем проверяем все.теперь у нас каждая ячейка этой строке.имеет одинаковый размер.дата тоже имеете виду а теперь давайте.попробуем добавить еще одну строку в.нашу таблицу.да я думаю вы уже догадались это.делается мы добавляем еще одну строку с.помощью times roll it и здесь его.закрываем и точно так же добавляем сюда.3 ячейки можно прямо сюда скопировать.здесь допустим мы меняем 4 вечеринка.здесь у нас будет 5 и 6 сохраняем.проверяем видим что у нас в таблицу.добавилась еще одна строка вот таким.образом создаются таблицы создаются в.них строки и.ячейки идем дальше сейчас мы будем.знакомиться с остальными атрибутами.которые тоже нужно знать и так если мы.хотим изменить цвет рамки до в данном.случае у нас рамка имеет один пиксель.ширину и никакого пока цветом и и не.написали если мы хотим изменить цвет.рамки мы должны использовать атрибут.border color цвет рамки пишем можно.разговор равняется.и в двойных кавычках указываем цвет.допустим мы хотим чтобы рамка у нас была.черная пишем благ сохраняем проверяем мы.видим что у нас рамка стала черный.следующий момент если мы хотим чтобы у.нас появились.отступы потому что видите да у нас все.тексты прижаты как бы краям ячейки и.сами ячейки между собой очень плотно как.бы находится давайте попробуем сначала.добавить отступы внутри самой ячейке.чтобы вот текстом был какой-то.промежуток делается с помощью атрибута.цел пилинг из таким образом цел это от.английского ячейка а пеленг это.внутренний отступ сайдинг меняется и в.печных указываем расстояние которое.должно быть от ячейки но текста внутри.допустим 10 сохраняем и проверяем мы.видим что у нас с каждой из сторон.появился о топ-10.пикси не видно да вот за это отвечает.атрибуту padding имейте его вину.следующий момент если мы хотим чтобы у.нас между самими ячейками также была.большее расстояние чем сейчас мы должны.задать атрибут.прессинг ссылка ячейка spacing это.расстояние место до sales песен и.допустим укажем 5 пенсий.сохраним и проверим мы видим что у нас.между ячейками появилась расстояние и.апексе мило банан а также вот эти два.атрибута тоже имеете ввиду.далее если мы хотим выровнить допустим.всю первую строку.то есть у нас как видите да выравнивание.в первой строке идет по левому краю то.есть все тексты в ячейках пристыкован.наклеим борту до если мы хотим сделать.так чтобы у нас первая строка была по.центру потому что первый строка обычно.это заголовок как бы там лица на можно.сделать так чтобы вся первая строка была.выровнена по центру до этого тега строке.прописываем атрибут align также и.указываем что вся первая строка должна.быть выровнена у нас на центр центр.сохраняем им проверяем видим что у нас.все тексты первой строке выравнялись по.центру вот они на отлично так на этом.данный урок мы закончим пока.потренируетесь создавайте такие простые.таблицы дальше следующем уроке мы уже.поговорим про объединение ячеек и другие.полезные вещи которые вы также должны.знать

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

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