Jak używać colspan i rowspan w tabelach HTML?

Nie wiem, jak scalić wiersze i kolumny w tabelach HTML.

Czy możesz mi pomóc w wykonaniu takiej tabeli w HTML?

Proponuję:

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}

<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

Bibliografia:

• tdelement .
• thelement .
• tbodyelement .
• theadelement .
• tableelement .

Jeśli nie wiesz, jak działają układy tabel, w zasadzie zaczynają się od x = 0, y = 0 i przechodzą w poprzek. Wyjaśnijmy to grafiką, ponieważ są tak zabawne!

Kiedy zaczynasz stół, tworzysz siatkę. Twój pierwszy wiersz i komórka będą w lewym górnym rogu. Pomyśl o tym jak o wskaźniku tablicy, przesuwającym się w prawo z każdą zwiększoną wartością x i przesuwającym się w dół z każdą zwiększoną wartością y.

W pierwszym wierszu definiujesz tylko dwie komórki. Jedna obejmuje 2 rzędy w dół, a druga 4 kolumny w poprzek. Kiedy dojdziesz do końca pierwszego wiersza, wygląda to mniej więcej tak:

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

Teraz, gdy wiersz się skończył, „wskaźnik tablicy” przeskakuje do następnego wiersza. Ponieważ x pozycja 0 jest już zajęta przez poprzednią komórkę, x przeskakuje do pozycji 1, aby rozpocząć wypełnianie komórek. * Patrz uwaga dotycząca różnicy między rozpiętościami wierszy.

Ten wiersz zawiera cztery komórki, które są blokami 1x1, wypełniającymi tę samą szerokość wiersza powyżej.

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

Następny wiersz to wszystkie komórki 1x1. Ale na przykład, co by było, gdybyś dodał dodatkową komórkę? Cóż, po prostu wyskoczyłby z krawędzi w prawo.

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

* Ale co, jeśli zamiast tego (zamiast dodawać dodatkową komórkę) sprawimy, że wszystkie te komórki będą miały rozpiętość wierszy równą 2? Musisz tutaj wziąć pod uwagę, że nawet jeśli nie będziesz dodawać więcej komórek w następnym wierszu, wiersz nadal musi istnieć (nawet jeśli jest to pusty wiersz). Jeśli spróbujesz dodać nowe komórki w wierszu bezpośrednio po tym, zauważysz, że zacznie dodawać je na końcu dolnego wiersza.

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Ciesz się wspaniałym światem tworzenia stołów!

Jeśli ktoś szuka rozpiętości wierszy zarówno po lewej, jak i po prawej stronie, oto jak możesz to zrobić:

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Alternatywnie , jeśli chcesz dodać LEWO i PRAWO do istniejącego zestawu wierszy, możesz osiągnąć ten sam wynik, wrzucając je ze zwiniętym colspanmiędzy:

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

Użyj, rowspanjeśli chcesz rozszerzyć komórki w dół i colspanw poprzek.

Możesz użyć rowspan="n"na elemencie td, aby obejmował nwiersze, i colspan="m"na elemencie td, aby obejmował mkolumny.

Wygląda na to, że twój pierwszy td potrzebuje a, rowspan="2"a następny td potrzebuje colspan="4".

Właściwość, której szukasz w pierwszym td, to rowspan: http://www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>

Colspan i Rowspan Tabela jest podzielona na wiersze, a każdy wiersz jest podzielony na komórki. W niektórych sytuacjach potrzebujemy, aby komórki tabeli obejmowały (lub były scalane) więcej niż jedną kolumnę lub wiersz. W takich sytuacjach możemy użyć atrybutów Colspan lub Rowspan.

Colspan Atrybut colspan określa liczbę kolumn, które komórka powinna obejmować (lub łączyć) w poziomie. Oznacza to, że chcesz scalić dwie lub więcej komórek z rzędu w jedną komórkę.

<td colspan=2 > 

Jak Colspan?

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

Rowspan Atrybut rowspan określa liczbę wierszy, które komórka powinna obejmować w pionie. Oznacza to, że chcesz scalić pionowo dwie lub więcej komórek w tej samej kolumnie, co pojedyncza komórka.

<td rowspan=2 >

Jak Rowspan?

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>

Użyłem ngIf dla jednej z moich podobnych logik. wygląda to następująco:

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

tutaj otrzymuję wartość rowspan z obiektu modelu.

Jest podobny do twojego stołu

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>