Таблицы и устаревшие теги

Web-технологии

Таблицы и
устаревшие теги

Лекция №4

Пошаговый пример переработки таблицы Joey Cherdarchuk

Структурные теги

<table> – это парный тег, внутри которого можно будет дальше размещать строки и ячейки.

        <table>
        	<!-- Здесь будет содержимое таблицы -->
        </table>

Структурные теги

Чтобы в таблице появились строки нужно использовать парный тег <tr> (table row).

        <table>
          <tr></tr>
          <tr></tr>
          <tr></tr>
        </table>

Структурные теги

Чтобы создать ячейку под данные нужен парный тег <td> (table data).

        <table>
          <tr>
            <td>iPhone 12 Pro</td>
            <td>$999</td>
          </tr>
        </table>

Структурные теги

Теперь в таблице 3 строки. В каждой строке по две ячейки. Из этих ячеек складывается два столбца.

iPhone 12 Pro $999
iPhone 12 $799
iPhone 12 mini $699

Подписи к столбцам

        <table>
          <tr>
            <td> Модель </td>
            <td> Цена </td>
          </tr>
          ...
        </table>

Подписи к столбцам

Заголовки ячеек ничем не будут отличаться от обычных ячеек ни внешне, ни по смыслу.

Модель Цена
iPhone 12 Pro $999
iPhone 12 $799
iPhone 12 mini $699

Подписи к столбцам

Специально для заголовков ячеек или строк есть тег <th> (table header). 

          <tr>
            <th> Модель </th>
            <th> Цена </th>
          </tr>

Подписи к столбцам

К ячейкам, обёрнутым тегом <th>, применяются дефолтные стили: текст становится жирным и выравнивается по центру ячейки.

Модель Цена
iPhone 12 Pro $999
iPhone 12 $799
iPhone 12 mini $699

Теги логической группировки

<thead>

<thead>

            <table>
              <thead>
                <tr>
                  <th>Модель</th>
                  <th>Цена</th>
                </tr>
              </thead>
            </table>

<thead> по своей семантике похож на тег <header>, только его «влияние» распространяется в пределах таблицы.

<tbody>

<tbody>

            <table>
              <tbody>
                <tr>
                  <td>Xiaomi Mi 10</td>
                  <td>$768</td>
                </tr>
              </tbody>
            </table>

Можно использовать несколько <tbody> внутри таблицы, разделяя тем самым данные на отдельные блоки.

<tfoot>

<tfoot>

            <table>
              <tfoot>
                <tr>
                  <td>Средняя цена:</td>
                  <td>$758.8</td>
                </tr>
              </tfoot>
            </table>

Браузер всегда отрисовывает <tfoot> внизу таблицы, даже если этот блок идёт в разметке не последним в таблице.

<caption>

<caption>

            <table>
              <caption>
                Цены на флагманские
                модели iPhone и Xiaomi
              </caption>
              ...
            </table>

Тег <caption> должен идти сразу после открывающего тега <table>.

Атрибуты для объединения ячеек

rowspan

нужен для объединения ячеек из двух или более столбцов

Как применяется:

                <td rowspan="3">
                  iPhone
                </td>
colspan

нужен для объединения ячеек из двух или более рядов

Как применяется:

                <td colspan="2">
                  Средняя цена:
                </td>
Цены на флагманские модели iPhone и Xiaomi
Производитель Модель Цена
iPhone 12 Pro $999
12 $799
12 mini $699
Xiaomi Mi 10 $768
Black Shark 3 128Gb $529
Средняя цена: $758.8
rowspan: 2 colspan: 2

Советы по использованию таблиц

<acronym> — акронимы

        <acronym title="Graphics Interchange Format">
          GIF
        </acronym> — устаревший формат графики

Современная альтернатива: тег <abbr>

<blink> — мигающий текст

        <blink>
          Зачем кому-либо так делать? Выглядит антигуманно.
        </blink>

Современная альтернатива: анимации на CSS

<font> — стилизация текста

        Летели два 
        <font size="+1"> крокодила </font>.
        Один — <font color="green"> зелёный </font>,
        а другой — в Африку.

Современная альтернатива: стилизация при помощи CSS

<nobr> — неразрывный текст

        <nobr>
          В вашей корзине товаров на 1 200 ₽
        </nobr>
Современная альтернатива:

<strike> — зачёркнутый текст

        <strike>
          Старая цена: 12 600
        </strike>
Современная альтернатива:

<strike> — зачёркнутый текст

        Распродажа:  
          <del>1200 ₽</del>
          <ins>990 ₽</ins>

Распродажа: 1200 ₽ 990 ₽

<strike> — зачёркнутый текст

            Список покупок:
            <ol>
              <li><s>Молоко</s></li>
              <li><s>Хлеб</s></li>
              <li><s>Яйца</s></li>
              <li>Сыр</li>
            </ol>

<applet> — Java-апплет

        <applet code="game.class" archive="game.zip" height="250">
          <param name="difficulty" value="easy">
          <p>
            Извините, у вас не установлена Java
            или ваш браузер не поддерживает
            встраиваемые Java-апплеты.</p>
        </applet>

<applet> — Java-апплет

Современная альтернатива: тег <object>

        <object type="application/pdf"
          data="/media/examples/In-CC0.pdf"
          width="250"
          height="200">
        </object>

<bgsound> — фоновая музыка

        <bgsound src="sound2.mid" loop="infinite">

Современная альтернатива: теги embed и audio

Современные браузеры запрещают использовать неконтролируемую фоновую музыку, отключая её на странице самостоятельно.

<center> — центрирование

        <center>Мама, смотри — я в центре!</center>

Современная альтернатива: различные CSS-свойства

        <p style="text-align: center">
           Мама, смотри — я в центре!</p>

Мама, смотри — я в центре!

<marquee> — бегущая строка

Современная альтернатива: CSS-анимации

Итог

Авторы спецификаций постоянно ведут работу над улучшением пользовательского и разработческого опыта (UX и DX), потенциально вредные теги (<blink>, <marquee>, <bgsound>) удаляются из спецификации, заменяются на более семантичные (<del> вместо <strike>) или переносят управление на уровень CSS (<nobr>, <center>).

Все презентации
на GitHub Pages