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

Рет қаралды 14,825

4 жыл бұрын

#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
✒ Автор курса:
✔ KZfaq: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

Пікірлер: 53

@miZnIce01 3 жыл бұрын

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

@YauhenKavalchuk 3 жыл бұрын

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

@user-rj6ro3mp1p 4 жыл бұрын

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

@olehyefimenko6693 Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

👍

@prostoproger1393 4 жыл бұрын

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

@DmitryShelestrans 4 жыл бұрын

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

@AnnaCh-tv1jj 2 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

Пожалуйста

@nonamenoproblem.6372 2 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

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

@chepelevdmitrii6378 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

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

@chepelevdmitrii6378 4 жыл бұрын

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

@user-lq5re8ih3u 2 жыл бұрын

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

@dmytrogorski2839 Жыл бұрын

@YauhenKavalchuk Жыл бұрын

👍

@aureliansoul 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

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

@user_with_params1286 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

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

@user_with_params1286 4 жыл бұрын

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

@fire_maps0280 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

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

@Nikitosss91 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

Пока не знаю

@Nikitosss91 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

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

@PavloVoronyuk 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

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

@dsalodki 4 жыл бұрын

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

@YauhenKavalchuk 2 жыл бұрын

Тоже делал)

@ivanpizdirvan6625 Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

👍

@azizxon_shaxodjayev 3 жыл бұрын

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

@YauhenKavalchuk 3 жыл бұрын

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

@azizxon_shaxodjayev 3 жыл бұрын

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

@user-xd6ev4gz2k 4 жыл бұрын

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

@user-xd6ev4gz2k 4 жыл бұрын

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

@YauhenKavalchuk 4 жыл бұрын

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

@user-xd6ev4gz2k 4 жыл бұрын

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

@jaygandy-simpson9701 4 жыл бұрын

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

@gesaffelsteinisallyouneed Жыл бұрын

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

@YauhenKavalchuk Жыл бұрын

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

@gesaffelsteinisallyouneed Жыл бұрын

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

@iGotton 4 жыл бұрын

@YauhenKavalchuk 2 жыл бұрын

👍

@avinadevil6097 2 жыл бұрын

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