Таблицы: столбцы, шапки и подвалы - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      Таблицы: столбцы, шапки и подвалы

      Введение

      Стало быть, Вы только начинаете делать таблицу. Возможно, даже слышали о таких тегах, как tr, td, th или table, использовали атрибуты colspan, а также rowspan. Вы можете сделать такой себе милый маленький столик из фанеры, но можете и не знать, как сделать обеденный стол из твердых пород дерева, застекленная столешница которого запросто выдержит вес немаленького слона.


      Столбцы наносят ответный удар

      Как правило, таблицы строятся исключительно строками, делая столбцы ненужными элементами. К счастью для тех, кто хочет работать именно со столбцами, есть замечательные теги - colgroup и col.

      Эти теги дают возможность сделать столбцы в таблице, как Вам угодно, что очень удобно, если нужно изменить выравнивание или, скажем, цвет определенного столбца. Иначе придется изменять отдельные ячейки.

      <table>

          <colgroup>

              <col>

              <col class="alternative">

              <col>

          colgroup>

          <tr>

              <td>

                  This

              td>

              <td>

                  That

              td>

              <td>

                  The other

              td>

          tr>

          <tr>

              <td>

                  Ladybird

              td>

              <td>

                  Locust

              td>

              <td>

                  Lunch

              td>

          tr>

      table>

      В примере класс "alternative"> будет применяться ко второму столбцу  или же второй ячейке каждой строки.

      Иногда удобно использовать атрибут span. Теги rowspan и colspan с colgroup определяют количество строк, в которых нужно объединить столбцы. Запись: <colgroup span="2"> colgroup- группирует первые два столбца. Пример:

      <table>

          <colgroup>

              <col>

              <col span="2" class="alternative">

          colgroup>

         

      В этом примере класс "alternative" использовался в двух последних столбцах. Использование тега col не обязательное, если colgroup содержит в себе span.

      Название эпизода

      Кратко и понятно про названия таблицы. Элемент caption - название таблицы, должен сразу же быть после открытия тега table.

      <table>

          <caption>

              Locust mating habitscaption>

         

      По умолчанию название отображается над таблицей, также можно использовать CSS (caption-side: bottom). Согласитесь, хорошо предсказывать результат.

      Если Вы хотите сделать таблицу элементом figure, то лучше использовать figcaption вместо тега caption.

      Шапки и подвалы

      Для работы с большими таблицами удобнее всего использовать thead, tfoot и tbody для разбивки на структурные элементы header, footer и body.

      Всегда thead нужно писать первым в HTML-коде, а вот tfoot браузеры опустят в нижнюю часть таблицы, даже если элемент стоит выше tbody (или нескольких tbody, всё зависит от Вашей фантазии).

      <table>

          <thead>

              <tr>

                  <td>

                      Header 1

                  td>

                  <td>

                      Header 2

                  td>

                  <td>

                      Header 3

                  td>

              tr>

          thead>

          <tfoot>

              <tr>

                  <td>

                      Footer 1

                  td>

                  <td>

                      Footer 2

                  td>

                  <td>

                      Footer 3

                  td>

              tr>

          tfoot>

          <tbody>

              <tr>

                  <td>

                      Cell 1

                  td>

                  <td>

                      Cell 2

                  td>

                  <td>

                      Cell 3

                  td>

              tr>

             

          tbody>

      table>

      Источник: http://www.htmldog.com/guides/html/advanced/tables/

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.