Наследие таблиц

В HTML5 мы не должны использовать таблицы для чего-то отличного от табличных данных. Тем не менее мы можем добавлять в блоки табличные свойства, что является нормальной практикой. Всё это заставляет разобраться нас в том, как работают таблицы.

Рассмотрим простейшую таблицу с одной строчкой и трема ячейками.

<table>
<tr>
    <td>Первая ячейка</td>
    <td>Вторая ячейка</td>
    <td>Третья ячейка</td>
</tr>
</table>

За таблицу в целом отвечает тег <table> . Далее мы строим таблицу по строкам. За строку или ряд отвечает тег tr (table row). Внутри рядка мы можем добавлять ячейки, тег td.

атрибуты rowspan, colspan

Но иногда нам нужно сделать таблицу с более сложной структурой. Допустим мы хотим сделать следующую таблицу

Таблица с объединенными рядками

Для этого нам понадобится такой атрибут как rowspan. rowspan=2 означает, что ячейка вместо одно рядка будет занимать два, т.е. свой и тот что снизу от нее. Ячейка, на которое происходит распространение из html-кода таблицы убирается.

<table>
<tr>
    <td rowspan=2>
    <!-- Это синяя ячейка. Она распросняется на нижнюю ячейку-->
    </td>

    <td>
    <!-- Это светло-серая ячейка -->
    </td>
</tr>

<tr>
    <td>
    <!-- Это темно-серая ячейка. В этом рядку она одна, так как синяя ячейка заняла все пространство -->
    </td>
</tr>
</table>

border-collapse

По умолчанию границы ячеек и таблицы разделены, ячейки так же разделены, но мы можем это исправить с помощью свойства border-collapse.

border-collapse:collapse - объединение границ ячеек и таблицы

border-collapse:separate - границы ячеек и таблицы разделяются

border-spacing

Мы можем наладить отступ между границами таблицы и ячеек.

border-collapse: separate;
border-spacing: 15px;

Использование свойства display

Верстка таблицами - это очень, очень плохой тон, но никто не запрещает использовать нам display:table и table-cell для DIV'ов

display:table;
display:table-column;
display:table-cell;

Выравнивание нескольких строк по вертикали

Что нам это дает? В DIV'е c display:table-cell - начинает таки да работать выравнивание по вертикали vertical-align:middle. Таким образом, мы можем выровнять многострочный текст.

Резиновые колонки с фиксированными полями

  1. http://colintoh.com/blog/display-table-anti-hero

  2. http://alistapart.com/article/holygrail

  3. http://www.mattboldt.com/kicking-ass-with-display-table/

  4. Проблемы с длинными словами в таблицах https://css-tricks.com/fixing-tables-long-strings/

Верстка писем

  1. Основы верстки писем https://habrahabr.ru/post/180013/

  2. Проблемы с версткой писем https://spark.ru/startup/yorb/blog/30074/html-pisma-kak-ne-popastsya-na-obeschaniya-i-bistro-proverit-verstalschika

  3. 60 полезных ресурсов по емейл рассылкам https://habrahabr.ru/company/pechkin/blog/273677

  4. Примеры писем с оригинальным оформлением http://reallygoodemails.com/

Практика:

  1. Сделать выравнивание многострочного текста по вертикали
  2. Сделать таблицу - вверху хедер и три колонки под ним

  3. Таблица с объединенными столбцами
  4. Есть несколько строчек текста внутри div'a. Нужно выровнять их внутри блоков по центру по вертикали и горизонтали.
  5. Сделать колонки с фиксированными отступами между ними. Весь шаблон должен быть резиновым.
  6. Сделать резиновое меню. Меню растягивается на всю ширину. Отступы между всеми пунктами меню одинаковые.
  7. Делаем трехблочный шаблон - резиновый контент и два сайдбара по бокам.

results matching ""

    No results matching ""