Привет. Сегодня мы поговорим о таблицах и о том,
как их можно использовать для отображения данных на веб-сайте.
Я люблю говорить, что
раньше мы считали таблицы воплощением зла.
Все из-за того, что таблицы использовались не по назначению.
Их использовали, чтобы аккуратно расположить
элементы на экране.
Это происходило во времена HTML2, кажется, даже HTML 3.1.
Люди хотели придать опрятный вид страницам,
но у них не было для этого инструментов. Поэтому они создавали огромную таблицу
и располагали все на разных строках и в разных столбцах.
Это напрямую противоречит идее разделения содержимого и оформления.
Кроме того, это путает людей, которые используют вспомогательные
устройства. Они не понимают: это просто куча данных
или обычное содержимое страницы, которое стоило отформатировать как обычно?
Итак, мы начнем обсуждать таблицы.
Я хочу подчеркнуть, что таблицы стоит использовать
только тогда, когда у вас есть данные, которые нужно отобразить.
Прежде чем мы даже притронемся к коду,
нужно примерно набросать макет таблицы.
Я снова и снова повторяю это своим студентам, они со мной соглашаются,
но сразу же начинают писать код.
Снова и снова соглашаются, но снова сразу пишут код.
И где-то только после пятого или четвертого раза понимают,
что куда проще с самого начала писать чистый код, чем исправлять плохой.
Тогда они начинают думать о том, сколько строк и сколько столбцов
нужно, чтобы представить все данные.
Затем идут еще дальше: определяют, какие строки
или столбцы нужно разбить на несколько ячеек.
Так ведь называются маленькие поля таблицы?
В таком случае будет проще набросать таблицу,
чтобы определить, где для этого понадобятся специальные атрибуты.
Потому что один из самых важных моментов, которые стоит учитывать при создании таблиц, —
это то, что браузер ожидает, что в каждой строке будет одинаковое количество ячеек.
Без этого страница будет выглядеть очень неопрятно.
После того как вы решили, как должна выглядеть таблица,
самое время подумать о тегах.
Сначала ставим тег table. Это по сути контейнер,
который будет содержать все прочие атрибуты и теги.
Затем tr для строк и td для столбцов. Но, как мне кажется,
лучше думать о них как о ячейках таблицы, а не столбцах,
потому что так вы отделяете каждое поле.
В таблице будет одна или несколько строк,
а в каждой строке — один или несколько элементов td,
т.е. столбцов или ячеек.
Здесь представлен код для построения очень простой таблицы.
Он выглядит очень запутанным, в нем много всего, но не пугайтесь.
Большая часть — это просто информация для браузера.
Когда мы посмотрим непосредственно на созданную страницу, вы увидите,
что таблица очень лаконичная и простая.
Итак, здесь есть тег table,
а строки кода внутри него представляет собой строки таблицы.
Есть начало и конец .
Внутри каждой строки есть три элемента: раз, два,
три, которые расположены внутри тега td.
И я сразу вам скажу, что, когда я только написала этот код,
он казался нормальным, но я забыла вставить закрывающий тег.
Поэтому, когда пишете такой код, будьте очень внимательны.
Если написать его правильно, мы получим простую таблицу,
состоящую, как я и сказала, из девяти элементов.
Раз, два, три, четыре, пять, шесть, семь, восемь, девять.
Это максимально простая таблица.
В некоторых случаях в код требуется добавить заголовки таблицы.
Заголовки — это такой текст вверху каждого столбца или вверху/в начале
каждой строки, который выделен жирным шрифтом,
не сами данные, а определение этих данных.
Я этого не одобряю, но некоторые просто вставляют текст
в обычные элементы td и добавляют выделение.
Таким образом, те, кто смотрит на эту таблицу, думают:
«Вот выделение жирным шрифтом, значит, это что-то важное».
Но этого стоит избегать.
Вместо тега td и жирного шрифта
нужно использовать семантический тег th — table heading.
Вот уже ранее показанные строчки кода,
но я добавила одну новую строку, где вместо td стоит th.
Row One, Row Two, Row Three и так далее.
Здесь вы можете видеть, что у нас появился опрятный заголовок
над каждым столбцом, который и внешне выглядит
как заголовок, и семантически на это указывает.
Я уже упоминала, что при планировании таблицы
нужно решить, требуются ли дополнительные ячейки.
Может сложиться так, что таблица, которую вы хотите сделать,
не идеально размеченная сетка 9 на 9.
Можно объединять строки
или столбцы с помощью атрибутов rowspan и colspan.
Внутри элемента нужно указать, что rowspan равен двум, если нужно объединить
две строки, или что colspan равен пяти, если хотите объединить пять столбцов.
Позвольте показать вам пример кода.
Да, я понимаю, особенно если вы смотрите урок на маленьком экране, может показаться,
что тут очень много всякой информации.
Но на самом деле тут не так все сложно.
Здесь простая таблица, есть заголовки Child's Name (имя ребенка)
и Parent's Name (имя родителя).
Затем я вставила имена детей,
а к каждому ребенку добавила родителя.
Здесь rowspan="2" в строке Catherine,
это значит, что ячейка Катерины занимает две строки.
То же самое с клеткой Эдварда.
У Mэгги такого нет.
Давайте посмотрим, что в результате получилось.
Если мы воспользуемся методом обратной цепочки, мы поймем, как работает код.
Опять-таки, имя ребенка и имя родителя.
Две строчки, где я добавила rowspan.
Вы видите, что данные заняли две строки, потому что
у Катерины и Эдварда по двое родителей, их нужно было указать вместе.
Опять же, задумка несложная, но если бы мы не подумали об этом,
начали бы писать код, разбрасываясь rowspan
и colspan, возникла бы путаница, которую было бы сложно исправить.
Вы, должно быть, заметили,
что вверху таблицы я добавила атрибут border.
Это сделано для того, чтобы линии отображались
вокруг каждой ячейки. Мне кажется, так проще видеть объединенные строки.
Так что можно использовать атрибут border,
чтобы границы были вокруг каждой ячейки.
Так делают очень часто.
Но, опять же, постарайтесь избегать тегов оформления в HTML.
Их можно добавить позднее, если вы начнете работать с CSS.
Этот атрибут очень часто используют, поэтому я добавила
его, чтобы вы наглядно увидели, что он делает.
Теперь давайте поговорим о подписях.
Как мы привязываем текст к определенной таблице?
Раньше люди добавляли заголовок (h2 или h3)
прямо над или прямо под таблицей.
При просмотре можно было понять,
к чему привязана таблица.
Но, опять же, рекомендую использовать семантические теги.
Вместо устаревшего способа можно
добавить тег caption внутрь таблицы.
Тогда всем будет понятно, что эта подпись относится именно к этой таблице.
Давайте подытожим.
Во-первых, таблицы нужно использовать только для табличных данных.
Не используйте их для оформления.
Во-вторых, нарисуйте свою таблицу, прежде чем начнете писать код.
Так вы сэкономите много нервов, поверьте мне.
Наконец, самое важное, надеюсь, вы запомните,
что нужно проверять, закрыты ли все теги.
Когда вы что-то разрабатываете для себя, пишете код, тестируете, смотрите,
браузеры обычно понимают, что вы хотели сделать,
даже если вы допустили ошибку.
Хорошо.
С таблицами легко забыть закрыть какие-то теги.
Браузер, конечно, исправит вашу ошибку,
но позднее, если вы решите создать таблицу, нужно будет выгрузить ее.
Тогда придется убедиться, что все данные правильные и правильно расположены.
Незакрытые теги — одна из худших ошибок.
Обязательно проверяйте код
всякий раз, когда создаете таблицу или когда просто что-то пишете.
Тогда ваш код точно будет идеальным.