HTML5 #7 Таблица (Table)

#YauhenK #webDev #HTML #HTML5
Всех приветствую в курсе «HTML5».
В данном видео-курсе мы с вами рассмотрим все возможности языка гипертекстовой разметки HTML.
А это, между прочим, основа каждого веб-сайта, или веб-приложения.
Разберём основы, а так же изучим большинство новых тэгов, которые появились с новым стандартом HTML5.
Дополнительно рассмотрим такие понятия, как:
- Валидация HTML документа.
- Семантика.
- Accessibility, или доступность.
По окончанию курса вы научитесь понимать и разбираться в структуре любого HTML документа.
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/html5
✒ Используемые ресурсы и инструменты:
✔ Atom (редактор кода): atom.io
✒ Полезные ссылки:
✔ W3 Валидатор: validator.w3.org
✔ Доступность: developers.google.com/web/fun...
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZread: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Пікірлер: 53

  • @miZnIce01
    @miZnIce013 жыл бұрын

    Теги для создания таблиц. Таблицы строятся последовательно вложенными тегами: 1. Во-первых идёт главный образующий тег . 2. После тега table идёт тег заголовка (если требуется) 3. Далее таблица делится на три основные части: а) - строка заголовка/шапка таблицы. Нужен для хранения одной или нескольких строк, которые представлены вверху таблицы. Используется только 1 раз в 1 таблице. Чтобы заголовок был выделен жирным шрифтом, вместо тега td нужно использовать тег . б) - основная часть таблицы. Предназначен для хранения основного контента таблицы. Может содержать неограниченное количество строк. Может повторятся несколько раз в 1 таблице. в) - низ таблицы/футер/”подвал” (итоги, результаты). Нужен для хранения одной или нескольких строк, которые идут внизу таблицы. Используется только 1 раз в 1 таблице. Эти теги идут строго друг за другом. Чтобы образовать строку таблицы, используется тег (table row, табличная строка). Чтобы образовать ряд таблицы (ячейку с информацией), используется тег (table data, данные). Ячейка таблицы записывается уже с какой-либо информацией. Чтобы объединить несколько ячеек, используется тег td с атрибутами: 1. Colspan - объединяет ячейки по горизонтали. 2. Rowspan - объединяет ячейки по вертикали. В качестве значений указываются числа, которые отображают сколько ячеек должно быть объединено.

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    В целом, не плохой краткий конспект лекции!)

  • @DmitryShelestrans
    @DmitryShelestrans4 жыл бұрын

    Большое спасибо!

  • @prostoproger1393
    @prostoproger13934 жыл бұрын

    Спасибо огромное!!! Раньше не понимал как объединять ячейки Теперь всё стало ясно и понятно )))) Хорошее видео, всё четко , ясно и понятно

  • @olehyefimenko6693
    @olehyefimenko6693 Жыл бұрын

    Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    👍

  • @user-rj6ro3mp1p
    @user-rj6ro3mp1p4 жыл бұрын

    Ох уж эти таблицы))

  • @AnnaCh-tv1jj
    @AnnaCh-tv1jj2 жыл бұрын

    Спасибо Вам большое!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    Пожалуйста

  • @nonamenoproblem.6372
    @nonamenoproblem.63722 жыл бұрын

    Благодарю автора за познавательный кронтент.

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    Благодарю за отзыв

  • @chepelevdmitrii6378
    @chepelevdmitrii63784 жыл бұрын

    Спасибо за курс! А почему в репозитории курса, для таблиц вы не используете тег ? В смысле это не так важно или не заметили?

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Этот тэг не обязательный. Просто с точки зрения семантики, он более логично отделяет разные секции таблицы друг от друга

  • @chepelevdmitrii6378

    @chepelevdmitrii6378

    4 жыл бұрын

    @@YauhenKavalchuk Есть еще вопрос (спасибо Евгений за ответ, за курс, лайкаю все что просматриваю, действительно здорово!) Вопрос - как учить? или что должен запомнить? Просмотрел видео, вслед за вами набираю практически все в Visual Studio Code, пытаюсь пересматривать дополнительно вчера просмотренное и понимаю что в голове остается 1-2%. То есть учеба подразумевает буквально перепись атрибутов с тегами и их зубрежка? или примерно столько в голове и должно оставаться на начальных этапах или могли бы вы поделиться как вы учили? Извиняюсь, если это глупый вопрос!

  • @user-lq5re8ih3u

    @user-lq5re8ih3u

    2 жыл бұрын

    @@chepelevdmitrii6378 выучил в итоге? работаешь?

  • @dmytrogorski2839
    @dmytrogorski2839 Жыл бұрын

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    👍

  • @aureliansoul
    @aureliansoul4 жыл бұрын

    Я еще далека от этого, но в дальнейшем можно ведь как-то будет преобразовывать автоматически таблицы, например из excel в html код?

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Да, на это даже есть специальные сервисы

  • @user_with_params1286
    @user_with_params12864 жыл бұрын

    Евгений, здравствуйте! Пытался повторять за Вами, но, к сожалению, сами границы таблицы без добавления соответствующего атрибута "border" у меня не появлялись. Пробовал на Chrome и на Edge. Спасибо!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Что бы границы отображались я добавил стиль

  • @user_with_params1286

    @user_with_params1286

    4 жыл бұрын

    @@YauhenKavalchuk Спасибо! Сразу не заметил этого :( Учусь только.

  • @PavloVoronyuk
    @PavloVoronyuk4 жыл бұрын

    Таблицы используются для верстки email. Если теперь стили нужно писать в css, как тогда правильно писать валидный код для таблиц ?

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Это совсем другой случай

  • @dsalodki
    @dsalodki4 жыл бұрын

    я помню делал таблицу из div она при изменении окна меняла размеры ячеек

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    Тоже делал)

  • @fire_maps0280
    @fire_maps02804 жыл бұрын

    Странно, я делаю все также как у вас,но у меня нету рамок в таблицах.С чем это может быть связанно?

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Я добавил стиль для границы. Поэтому у меня она видна. Можете посмотреть в репозитории курса

  • @iGotton
    @iGotton4 жыл бұрын

    +

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    👍

  • @Nikitosss91
    @Nikitosss914 жыл бұрын

    По css такой же курс будет, уважаемый ?

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Пока не знаю

  • @Nikitosss91

    @Nikitosss91

    4 жыл бұрын

    @@YauhenKavalchuk было бы просто волшебно

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Я знаю) В планах есть, но не в этом году)

  • @azizxon_shaxodjayev
    @azizxon_shaxodjayev3 жыл бұрын

    Здравствуйте. У меня возникла такая проблема. Пишу теги, а у меня просто слово которое я написал. Помогите пожалуйста

  • @YauhenKavalchuk

    @YauhenKavalchuk

    3 жыл бұрын

    Tab в конце нужно нажимать и должна срабатывать автозамена

  • @azizxon_shaxodjayev

    @azizxon_shaxodjayev

    3 жыл бұрын

    @@YauhenKavalchuk Спасибо, попробую

  • @user-xd6ev4gz2k
    @user-xd6ev4gz2k4 жыл бұрын

    привет, автор! а ты сейчас кто по должности, если не секрет?

  • @user-xd6ev4gz2k

    @user-xd6ev4gz2k

    4 жыл бұрын

    если имеется таковая(пс, если тимлид, то почему выбрал именно это, а не техлид или архитектора), интересен твой ответ!!!

  • @YauhenKavalchuk

    @YauhenKavalchuk

    4 жыл бұрын

    Можете посмотреть в профиле LinkedIn

  • @user-xd6ev4gz2k

    @user-xd6ev4gz2k

    4 жыл бұрын

    @@YauhenKavalchuk увидел, что синьор, а почему не тимлид, не нравится или другие причины, могли бы ответить?)

  • @jaygandy-simpson9701

    @jaygandy-simpson9701

    4 жыл бұрын

    А что уже начали рекуртить на ютубе?

  • @ivanpizdirvan6625
    @ivanpizdirvan6625 Жыл бұрын

    Я таблицу на гридах делаю😀

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    👍

  • @gesaffelsteinisallyouneed
    @gesaffelsteinisallyouneed Жыл бұрын

    блин как быть? пишу вроде правильно, даже скачал и вставил ваш код из githab но рамка вокруг таблицы не появляется(

  • @YauhenKavalchuk

    @YauhenKavalchuk

    Жыл бұрын

    Если копировали с GitHub проблем быть не должно. Проверьте внимательно код, там в head есть тэг style со стилями

  • @gesaffelsteinisallyouneed

    @gesaffelsteinisallyouneed

    Жыл бұрын

    @@YauhenKavalchuk да у меня не было тега стайл^ спасибо

  • @rmstr7
    @rmstr72 жыл бұрын

    Кто из 2022 ?)

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    🤔

  • @avinadevil6097
    @avinadevil60972 жыл бұрын

    Как сделать текст в теге: Заголовок (жирным) ? Как сделать текст посередине в объединенных ячейках: Хочу быть по середине ячейки ? P.s. Да, это "Гуглится", но ты просил комментарий!

  • @NONAME-ko5zn
    @NONAME-ko5zn4 жыл бұрын

    Взломай игру Аватария

  • @YauhenKavalchuk

    @YauhenKavalchuk

    2 жыл бұрын

    🤦‍♂️

  • @dmitrijponkin
    @dmitrijponkin4 жыл бұрын

    Большое спасибо!

Келесі