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

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

    Почати безкоштовно

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

    Почати безкоштовно

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

      advertisement advertisement

      Введение

      Стало быть, Вы только начинаете делать таблицу. Возможно, даже слышали о таких тегах, как 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/

      КОМЕНТАРІ ТА ОБГОВОРЕННЯ
      advertisement advertisement

      Пакети підписки з доступом до всіх курсів та сервісів

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      49.99 $
      37.50 $
      Підписка
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      63.00 $
      Підписка
      Преміум
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      169.99 $
      102.00 $
      Підписка
      new
      Преміум Plus
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      199.99 $
      120.00 $
      Підписка
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.