27 июня 2017

Создаем таблицу для сообщения

Картинка с сайта
1 2 3
1 2 3

   В редакторе Блоггера отсутствует функция создания таблиц. А таблицу часто очень удобно использовать для размещения публикуемого материала.  Поэтому неплохо иметь "под рукой" HTML код хотя бы одного вида таблицы, из которого можно быстро "соорудить" другую таблицу.

   Ниже приведены  несколько вариантов изменения HTML кода таблицы из 2 строк и трех колонок (изображена слева).

Вот этот "базовый" HTML код будем редактировать. (Эта таблица изображена  вверху слева).

<center><table border="1" cellpadding="1" cellspacing="1" style="width: 570px;">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table></center>
   .


    Красным и синим цветом выделено звено строки, т.е. в данной таблице 2 строки.
    Зеленым цветом выделено звено колонки, т.е. в данной таблице 3 колонки.
    Удаление или вставка того или другого звена изменит таблицу. Удалим "красное" звено (строка), получим таблицу из 1 строки и 3 колонок.  Если нужна таблица из 3 строк и 3 колонок, вставим после тега </tr> "красное" звено строки.
    Если хотим получить таблицу из 2 строк и 2 колонок, удаляем "зеленое" звено колонки из обоих строк.
   Чтобы оставить только 1 ячейку (это 1 строка и 1 колонка), удаляем "красное" звено строки и в "синем" звене строки удаляем два звена колонок вида <td>...</td>.
   Таким образом, имея один - "базовый" - HTML код таблицы (удобный и понятный для себя) можно быстро  получить другую таблицу.
   Записываем отредактированный HTML код таблицы в HTML редактор и редактируем до готовности: проставляем нужную ширину таблицы (выделено жирным шрифтом), изменяем толщину или удаляем рамку, т.е. вместо 1 проставляем 0 (выделено желтым цветом), изменяем отступы (выделено подчеркнутым шрифтом).

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

Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...