Арсений Олегович Матыцин

Я верстальщик. Веб-верстальщик


Скачать книгу

возникала необходимость добавить одну ячейку во второй строке, то она выбивалась из ряда. Чтобы этого избежать приходилось либо в каком-нибудь столбце указывать объединение по вертикали на одну ячейку больше, либо переделывать сетку на 6 в ширину, или же создавать вложенную таблицу.

      Такие манипуляции по склейке ячеек производятся с помощью атрибутов:

      colspan – объединение ячеек по ширине

      rowspan – объединение ячеек по высоте

      Пример:

      <table width="300" border="1">

      <tr>

      <td rowspan="2">1</td>

      <td>2</td>

      <td>3</td>

      </tr>

      <tr>

      <td>4</td>

      <td>5</td>

      </tr>

      </table>

      Результат обработки в браузере

      Формально это таблица з на 2, но так как я указал первой ячейке расшириться на 2, то было бы ошибкой во второй строке написать такое же количество ячеек td, как и в первой. Результат был бы тогда такой:

      Результат ошибочного кода в браузере

      Эти атрибуты легко запомнить, если разбить их на составляющие и знать перевод. Например span, который есть в обоих словах – это пролет, объединение, диапазон. В то же время row – это строка, а col (column) – это колонка.

      Да и в целом это неплохая практика понимать, что ты пишешь. Необходимо знать английский хотя бы на уровне терминов и тегов, или навыков использования переводчика.

      В целом, если вспомнить принцип дизайнера и верстальщика, то это можно воспринимать не как ошибку, а как фичу.

      С приходом адаптивного дизайна и верстки над существованием таблиц навис большой вопрос. Так как все попытки отразить сколько-нибудь большую таблицу на экране мобильного телефона оказалось не так просто.

      Конец ознакомительного фрагмента.

      Текст предоставлен ООО «ЛитРес».

      Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.

      Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.

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