Я верстальщик. Веб-верстальщик. Арсений Олегович Матыцин
Чтение книги онлайн.

Читать онлайн книгу Я верстальщик. Веб-верстальщик - Арсений Олегович Матыцин страница 2

СКАЧАТЬ без пространственного понимания сетки. Если вы создавали сетку 5 на 5, то вынуждены были следовать ее логике, чтобы разместить информацию внутри. Или создать еще одну таблицу внутри. Принципы табличной верстки хорошо демонстрируются на примере обычной таблицы в редакторе.

      Тут в строке tr вложить элемент столбца td, который занимает место 5 ячеек.

      Эта часть таблицы объединяет в себе 2 ячейки по горизонтали и 4 ячейки по вертикали

      А справа →,

      в ячейку вложена таблица 5 на 5, которая по умолчанию отбивается от границ ячейки отступами.

      Если возникала необходимость добавить одну ячейку во второй строке, то она выбивалась из ряда. Чтобы этого избежать приходилось либо в каком-нибудь столбце указывать объединение по вертикали на одну ячейку больше, либо переделывать сетку на 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 Кошелек, бонусными картами или другим удобным Вам способом.

/9j/4AAQSkZJRgABAQEAZABkAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAN1BnIDASIAAhEBAxEB/8QAGwABAAMBAQEBAAAAAAAAAAAAAAQFBgMBAgf/xABPEAEAAQICAwsHCAgEBAcBAQAAAQIDBBEFBpEHEhMUFSFRU5OU0hYXMUFSVFYiNlVhcXSxsjIzN3N1gZLBI6HC4TQ1QnIkRGJkgtHwg/H/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQL/xAAgEQEBAAEEAQUAAAAAAAAAAAAAARECITFBcRJRgcHw/9oADAMBAAIRAxEAPwC5Bk8fi9I28XiLkYne2uMzat08NVTOeWeWUUT0T61RqxkcFpbF4fSNuvF3btWG3tW/ymuvLm5uaaIau1dov2aLtuc6LlMVUz0xPPAPoHxcvW7U0xcrppmud7TEz6Z6AfQzlvWPH3qIuUYGzFM55Z1Xc/8AK3MJ2idLX8fir+Hv4ei1NqimqJpqqnPOZ9qmOgGk0B/z7C/ZX+WW2YnQH/P8L9lf5ZaLWTEX8NoO9dw9VdN3f2qYm3MRVz3KYmIz5s8plFWgy+90j7vp7trPiR8be0lhbFN6mjTFrK5RE1XrtqaIiaoic4irMGwBUU6V0hf0xisFhcBhqrOEqoi5du4qqiqd9GfNTFuc8o+uAW4iUaW0fXTbqpxduYuV1UU8/pqpz30fyylyt6e0VdsX79GOtcHhqd9dqmct5T0zn6uYFgKudZdCxTVM6RsxFE5Vc/o+v7Pr9DritO6KwV2bWJx1q3cppiqaZnOYic8p+zmnnBPFTTpqmNN4nC3K7VOEs4K1iYvZ+1VXE8/oyy СКАЧАТЬ