• Блог 11.04.2010

    На самом деле это очень просто, если вы уже создавали HTML-таблицы. Узнав пару параметров, вы научитесь объединять ячейки таблицы. Пример таблицы с ячейками, объединенными по горизонтали и вертикали, см., к примеру, в предыдущей статье о транслитерации украинского алфавита латиницей.

    Рассмотрим, как объединяются ячейки, на примере HTML-таблицы 5х5. Для создания таблиц я использую конструктор таблиц. Код созданной конструктором таблицы 5х5 выглядит так:

    <div>
    <table border="1" cellspacing="1" cellpadding="1" width="100%">
    <tbody>
    <tr>
    <td align="left">C1R1</td>
    <td align="left">C2R1</td>
    <td align="left">C3R1</td>
    <td align="left">C4R1</td>
    <td align="left">C5R1</td>
    </tr>
    <tr>
    <td align="left">C1R2</td>
    <td align="left">C2R2</td>
    <td align="left">C3R2</td>
    <td align="left">C4R2</td>
    <td align="left">C5R2</td>
    </tr>
    <tr>
    <td align="left">C1R3</td>
    <td align="left">C2R3</td>
    <td align="left">C3R3</td>
    <td align="left">C4R3</td>
    <td align="left">C5R3</td>
    </tr>
    <tr>
    <td align="left">C1R4</td>
    <td align="left">C2R4</td>
    <td align="left">C3R4</td>
    <td align="left">C4R4</td>
    <td align="left">C5R4</td>
    </tr>
    <tr>
    <td align="left">C1R5</td>
    <td align="left">C2R5</td>
    <td align="left">C3R5</td>
    <td align="left">C4R5</td>
    <td align="left">C5R5</td>
    </tr>
    </tbody></table>
    </div>

    Сама таблица изначально выглядит так:

    C1R1 C2R1 C3R1 C4R1 C5R1
    C1R2 C2R2 C3R2 C4R2 C5R2
    C1R3 C2R3 C3R3 C4R3 C5R3
    C1R4 C2R4 C3R4 C4R4 C5R4
    C1R5 C2R5 C3R5 C4R5 C5R5


    I. Объединение ячеек по вертикали
    Для вертикального объединения ячеек используется параметр rowspan, задающий количество ячеек, объединенных по вертикали.
    Объединим в указанной выше таблице ячейки C1R1 и C1R2. Для этого необходимо:

    1. Для ячейки C1R1 добавить параметр rowspan=»2″:
    <td align="left" rowspan="2">C1R1</td>
    1. Удалить код ячейки C1R2:
    <td align="left">C1R2</td>

    Теперь таблица выглядит так:

    C1R1 C2R1 C3R1 C4R1 C5R1
    C2R2 C3R2 C4R2 C5R2
    C1R3 C2R3 C3R3 C4R3 C5R3
    C1R4 C2R4 C3R4 C4R4 C5R4
    C1R5 C2R5 C3R5 C4R5 C5R5


    II. Объединение ячеек по горизонтали
    Для горизонтального объединения ячеек используется параметр colspan, задающий количество ячеек, объединенных по горизонтали.
    Объединим в указанной выше таблице ячейки C2R1, C3R1 и C4R1. Для этого необходимо:

    1. Для ячейки C2R1 добавить параметр colspan=»3″:
    <td align="left" colspan="3">C2R1</td>
    1. Удалить код ячеек C3R1 и C4R1:
    <td align="left">C3R1</td>
    <td align="left">C4R1</td>

    Таблица примет следующий вид:

    C1R1 C2R1 C5R1
    C2R2 C3R2 C4R2 C5R2
    C1R3 C2R3 C3R3 C4R3 C5R3
    C1R4 C2R4 C3R4 C4R4 C5R4
    C1R5 C2R5 C3R5 C4R5 C5R5


    Вам останется лишь заполнить таблицу содержимым: образцами своих переводов в портфолио и т.д.

    Posted by admin @ 23:17

  • 2 комментария

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Это не спам.
    сделано dimoning.ru

Archives: