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

97

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

Przykład

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

html html-table Max Frai
źródło
Połączyć je, prawda? Masz na myśli colspan?
animuson
@DavidThomas Mogę zrobić tabelę z 5 wierszami i 3 kolumnami. Ale tak naprawdę nie wiem, gdzie zastosować rowspan itp.
Max Frai
14
@DAvid: Wydaje się całkiem jasne, że pytający nie wie od czego zacząć, czasami jest to trudne, gdy nawet nie wiesz, czy atrybut, którego szukasz, istnieje (w tym przypadku rowspan)
Chris Sobolewski
6
Dobrym sposobem na pochylenie się nad tym, jeśli masz szczęście, że masz edytor wizualny, taki jak Dreamweaver, jest utworzenie podstawowej siatki tabeli, a następnie scalenie razem potrzebnych komórek. Następnie sprawdź kod, który został utworzony. Zobaczysz, gdzie są scalane różne komórki i jak to się robi z kodem. Dreamweaver zazwyczaj tworzy czysty i zgodny kod, więc będzie dobrym przykładem dla ucznia.
Surreal Dreams,

Odpowiedzi:

112

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>
Rozwiń fragment

Bibliografia:

David mówi, że przywróć Monikę
źródło
2
Nie zapomnij dodać ładnych kolorów.
Blazemonger
31
W tym przypadku pozostawiam „ładne kolory” jako ćwiczenie dla czytelnika.
David mówi, że przywróć Monikę
Jeśli ktoś jest zainteresowany, jak to ogólnie działa, zobacz doskonałe wyjaśnienie @ animousons poniżej stackoverflow.com/a/9830847/362951
mit
117

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:

Podgląd nr 0001

<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.

Podgląd # 0002

<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.

Podgląd # 0003

<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.

Podgląd # 0004

<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!

animuson
źródło
14

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>
Rozwiń fragment

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>
Rozwiń fragment

Pas ruchu
źródło
5

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

Wadester
źródło
3

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".

Surreal Dreams
źródło
2

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>
Chris Sobolewski
źródło
2 
<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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
hjpotter92
źródło
0 
<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>
Wadester
źródło
0

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>
Fel
źródło
0

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>
Rozwiń fragment

tutaj otrzymuję wartość rowspan z obiektu modelu.

Amulya Koppula
źródło
-1

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>

Ha3Ha3Ha3
źródło