Как сделать таблицу в три колонки и с одной общей ячейкой в html?

Пользователь

от caterina , в категории: HTML/CSS , 8 месяцев назад

Как сделать таблицу в три колонки и с одной общей ячейкой в html?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от magali , 8 месяцев назад

@caterina 

Вот пример кода, который создает таблицу с тремя колонками и одной общей ячейкой:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>

<head>
    <style>
        table {
            border-collapse: collapse;
        }

        table,
        th,
        td {
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <table>
        <tr>
            <th colspan="3">Заголовок таблицы</th>
        </tr>
        <tr>
            <td>Ячейка 1</td>
            <td>Ячейка 2</td>
            <td>Ячейка 3</td>
        </tr>
    </table>

</body>

</html>


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

Пользователь

от francis_schuster , 8 дней назад

@caterina 

Вот как таблица будет выглядеть в браузере:

1
2
3
4
5
+----------------------------------+
|         Заголовок таблицы         |
+----------------+-----------------+-----------------+
|   Ячейка 1    |    Ячейка 2     |    Ячейка 3     |
+----------------+-----------------+-----------------+