Как создать эту таблицу, используя только HTML (tr, td, теги rowspan), (БЕЗ CSS)

ProgramBox

Как создать эту таблицу, используя только HTML (tr, td, теги rowspan), (БЕЗ CSS)

Post author:admin
Запись опубликована:18 июля, 2022
Post category:Вопросы по программированию

#html

#HTML

Вопрос:

Я использую этот код, но, похоже, он не работает. Справка. Похоже, это просто не работает, как бы я ни старался.

 <html>
<head>
</head>
<body>
    <table height="100%" width="70%" border="3">
        <tr>
            <td rowspan="1"> A </td>
            <td rowspan="2"> B </td>
            <td rowspan="3"> C </td>
        </tr>
        <tr>
            <td rowspan="2"> D </td>
        </tr>
        <tr>
            <td> E </td>
        </tr>
        <tr>
            <td> F </td>
            <td> G </td>
            <td> H </td>
        </tr>
    </table>
</body>
</html>

Развернуть фрагмент

Приведенный выше HTML отображается следующим образом:

… но я хочу, чтобы это выглядело так:

1. Почему вы не хотите использовать какой-либо CSS? Включает ли это style="" атрибуты? (По какой-то причине вы ориентируетесь на веб-браузеры конца 1990-х годов?)

2. Нет, мой младший брат учится в 8 классе, и у него был этот вопрос в его тесте. До сих пор его учили только HTML, поэтому мне было интересно, возможно ли это вообще без CSS, поскольку я не эксперт в HTML. Извините, если вы не можете меня легко понять, поскольку я не являюсь носителем языка, как предполагает мое имя. Да, это включает атрибуты style =» »

3. Это возможно (и без CSS), но я отмечаю, что CSS не имеет значения, потому rowspan что и colspan не являются свойствами CSS, и CSS не может ими управлять, а CSS не может определить точный макет a <table> по умолчанию (хотя это возможно , если вы полностью переопределите его, display: grid; но это не по теме).

4. Ответ, опубликованный @Richard, был правильным, я не знаю, почему они его удалили.

5. Да, они удалили его по какой-то причине. Но у меня все еще есть код. <граница таблицы = 3> <tbody><tr height=»25px»> <td rowspan=»1″> A </td> <td rowspan=»2″> B </td> <td rowspan=»3″> C </td> </tr><tr height=»25px»> <td rowspan=»2″> D </td> </tr> <tr height=»25px»> <td> E </td> </tr> <tr> <td> F </td> <td> G</td> <td> H </td> </tr> </tbody> </table>

Ответ №1:

Это помогает, если вы визуализируете необработанные строки таблицы на диаграмме. Я указал их розовым цветом:

Тогда мы видим, что:

A — нет rowspan, нет colspan.
B — rowspan="2" , без colspan.
C — rowspan="3" , без colspan.
D — rowspan="2" , без colspan.
E — нет rowspan, нет colspan.
F — нет rowspan, нет colspan.
G — нет rowspan, нет colspan.
H — нет rowspan, нет colspan.

Давайте начнем с обычной таблицы без каких-либо интервалов строк (используется * для обозначения ячеек, которые будут объединены):

Я добавил правило CSS для установки height: 50px на все <td> элементы для иллюстрации. Это не влияет на фактический макет таблицы.

 tr > td {
    height: 50px; /* min-height on <td> doesn't work */
}

 <table height="100%" width="70%" border="3">
        <tr>
            <td> A </td>
            <td> B </td>
            <td> C </td>
        </tr>
        <tr>
            <td> D </td>
            <td> B* </td>
            <td> C* </td>
        </tr>
        <tr>
            <td> D* </td>
            <td> E </td>
            <td> C* </td>
        </tr>
        <tr>
            <td> F </td>
            <td> G </td>
            <td> H </td>
        </tr>
    </table>

Развернуть фрагмент

Затем давайте добавим rowspans в первую строку:

 tr > td {
    height: 50px; /* min-height on <td> doesn't work */
}

     <table height="100%" width="70%" border="3">
        <tr>
            <td> A </td>
            <td rowspan="2"> B </td>
            <td rowspan="3"> C </td>
        </tr>
        <tr>
            <td> D </td>
<!--        <td> B* </td> -->
<!--        <td> C* </td> -->
        </tr>
        <tr>
            <td> D* </td>
            <td> E </td>
<!--        <td> C* </td> -->
        </tr>
        <tr>
            <td> F </td>
            <td> G </td>
            <td> H </td>
        </tr>
    </table>

Развернуть фрагмент

Затем давайте добавим rowspans во вторую строку:

Я установил разные height значения для каждой из ячеек (в соответствии с их rowspan ), в противном случае средняя строка разрушается (поскольку ее нечем поддерживать).

 tr > td {
}

tr > td.a {
    height: 25px;
}
tr > td.b {
    height: 50px;
}
tr > td.c {
    height: 75px;
}
tr > td.d {
}
tr > td.e {
}

 <table height="100%" width="70%" border="3">
        <tr>
            <td class="a"> A </td>
            <td class="b" rowspan="2"> B </td>
            <td class="c" rowspan="3"> C </td>
        </tr>
        <tr>
            <td class="d" rowspan="2"> D </td>
<!--        <td> B* </td> -->
<!--        <td> C* </td> -->
        </tr>
        <tr>
<!--        <td> D* </td> -->
            <td class="e"> E </td>
<!--        <td> C* </td> -->
        </tr>
        <tr>
            <td> F </td>
            <td> G </td>
            <td> H </td>
        </tr>
    </table>

Развернуть фрагмент

Та-да: