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
Теги для создания таблиц. Таблицы строятся последовательно вложенными тегами: 1. Во-первых идёт главный образующий тег . 2. После тега table идёт тег заголовка (если требуется) 3. Далее таблица делится на три основные части: а) - строка заголовка/шапка таблицы. Нужен для хранения одной или нескольких строк, которые представлены вверху таблицы. Используется только 1 раз в 1 таблице. Чтобы заголовок был выделен жирным шрифтом, вместо тега td нужно использовать тег . б) - основная часть таблицы. Предназначен для хранения основного контента таблицы. Может содержать неограниченное количество строк. Может повторятся несколько раз в 1 таблице. в) - низ таблицы/футер/”подвал” (итоги, результаты). Нужен для хранения одной или нескольких строк, которые идут внизу таблицы. Используется только 1 раз в 1 таблице. Эти теги идут строго друг за другом. Чтобы образовать строку таблицы, используется тег (table row, табличная строка). Чтобы образовать ряд таблицы (ячейку с информацией), используется тег (table data, данные). Ячейка таблицы записывается уже с какой-либо информацией. Чтобы объединить несколько ячеек, используется тег td с атрибутами: 1. Colspan - объединяет ячейки по горизонтали. 2. Rowspan - объединяет ячейки по вертикали. В качестве значений указываются числа, которые отображают сколько ячеек должно быть объединено.
@YauhenKavalchuk
3 жыл бұрын
В целом, не плохой краткий конспект лекции!)
Большое спасибо!
Спасибо огромное!!! Раньше не понимал как объединять ячейки Теперь всё стало ясно и понятно )))) Хорошее видео, всё четко , ясно и понятно
Спасибо за курс и проделанную тобой работу! Благодаря твоим курсам узнал много нового! Ну а с моей стороны - лайк, подписка, комментарий!
@YauhenKavalchuk
Жыл бұрын
👍
Ох уж эти таблицы))
Спасибо Вам большое!
@YauhenKavalchuk
2 жыл бұрын
Пожалуйста
Благодарю автора за познавательный кронтент.
@YauhenKavalchuk
2 жыл бұрын
Благодарю за отзыв
Спасибо за курс! А почему в репозитории курса, для таблиц вы не используете тег ? В смысле это не так важно или не заметили?
@YauhenKavalchuk
4 жыл бұрын
Этот тэг не обязательный. Просто с точки зрения семантики, он более логично отделяет разные секции таблицы друг от друга
@chepelevdmitrii6378
4 жыл бұрын
@@YauhenKavalchuk Есть еще вопрос (спасибо Евгений за ответ, за курс, лайкаю все что просматриваю, действительно здорово!) Вопрос - как учить? или что должен запомнить? Просмотрел видео, вслед за вами набираю практически все в Visual Studio Code, пытаюсь пересматривать дополнительно вчера просмотренное и понимаю что в голове остается 1-2%. То есть учеба подразумевает буквально перепись атрибутов с тегами и их зубрежка? или примерно столько в голове и должно оставаться на начальных этапах или могли бы вы поделиться как вы учили? Извиняюсь, если это глупый вопрос!
@user-lq5re8ih3u
2 жыл бұрын
@@chepelevdmitrii6378 выучил в итоге? работаешь?
@YauhenKavalchuk
Жыл бұрын
👍
Я еще далека от этого, но в дальнейшем можно ведь как-то будет преобразовывать автоматически таблицы, например из excel в html код?
@YauhenKavalchuk
4 жыл бұрын
Да, на это даже есть специальные сервисы
Евгений, здравствуйте! Пытался повторять за Вами, но, к сожалению, сами границы таблицы без добавления соответствующего атрибута "border" у меня не появлялись. Пробовал на Chrome и на Edge. Спасибо!
@YauhenKavalchuk
4 жыл бұрын
Что бы границы отображались я добавил стиль
@user_with_params1286
4 жыл бұрын
@@YauhenKavalchuk Спасибо! Сразу не заметил этого :( Учусь только.
Таблицы используются для верстки email. Если теперь стили нужно писать в css, как тогда правильно писать валидный код для таблиц ?
@YauhenKavalchuk
4 жыл бұрын
Это совсем другой случай
я помню делал таблицу из div она при изменении окна меняла размеры ячеек
@YauhenKavalchuk
2 жыл бұрын
Тоже делал)
Странно, я делаю все также как у вас,но у меня нету рамок в таблицах.С чем это может быть связанно?
@YauhenKavalchuk
4 жыл бұрын
Я добавил стиль для границы. Поэтому у меня она видна. Можете посмотреть в репозитории курса
+
@YauhenKavalchuk
2 жыл бұрын
👍
По css такой же курс будет, уважаемый ?
@YauhenKavalchuk
4 жыл бұрын
Пока не знаю
@Nikitosss91
4 жыл бұрын
@@YauhenKavalchuk было бы просто волшебно
@YauhenKavalchuk
4 жыл бұрын
Я знаю) В планах есть, но не в этом году)
Здравствуйте. У меня возникла такая проблема. Пишу теги, а у меня просто слово которое я написал. Помогите пожалуйста
@YauhenKavalchuk
3 жыл бұрын
Tab в конце нужно нажимать и должна срабатывать автозамена
@azizxon_shaxodjayev
3 жыл бұрын
@@YauhenKavalchuk Спасибо, попробую
привет, автор! а ты сейчас кто по должности, если не секрет?
@user-xd6ev4gz2k
4 жыл бұрын
если имеется таковая(пс, если тимлид, то почему выбрал именно это, а не техлид или архитектора), интересен твой ответ!!!
@YauhenKavalchuk
4 жыл бұрын
Можете посмотреть в профиле LinkedIn
@user-xd6ev4gz2k
4 жыл бұрын
@@YauhenKavalchuk увидел, что синьор, а почему не тимлид, не нравится или другие причины, могли бы ответить?)
@jaygandy-simpson9701
4 жыл бұрын
А что уже начали рекуртить на ютубе?
Я таблицу на гридах делаю😀
@YauhenKavalchuk
Жыл бұрын
👍
блин как быть? пишу вроде правильно, даже скачал и вставил ваш код из githab но рамка вокруг таблицы не появляется(
@YauhenKavalchuk
Жыл бұрын
Если копировали с GitHub проблем быть не должно. Проверьте внимательно код, там в head есть тэг style со стилями
@gesaffelsteinisallyouneed
Жыл бұрын
@@YauhenKavalchuk да у меня не было тега стайл^ спасибо
Кто из 2022 ?)
@YauhenKavalchuk
2 жыл бұрын
🤔
Как сделать текст в теге: Заголовок (жирным) ? Как сделать текст посередине в объединенных ячейках: Хочу быть по середине ячейки ? P.s. Да, это "Гуглится", но ты просил комментарий!
Взломай игру Аватария
@YauhenKavalchuk
2 жыл бұрын
🤦♂️
Большое спасибо!