CSS Colspan

„W tym artykule przyjrzymy się właściwości Colspan, która jest dostępna w katalogu CSS i może być używana na stole. Właściwość Colspan służy do rozkładania kolumn tabeli w pojedynczej komórce, łącząc je w jedną jednostkę. Ta właściwość może być używana na obu elementach tabeli, które są nagłówkami tabeli i tagami danych tabeli. CSS pozwala nam korzystać z tej właściwości również z innymi właściwościami w tym samym znaczniku, który będziemy również wdrażać w tym artykule."

Przykład 01: Korzystanie z właściwości CSS Colspan na tagie danych tabeli w pliku HTML

W tym przykładzie będziemy używać właściwości Colspan, którą CSS zapewnia, aby obejmować dwie kolumny tabeli, które będą w tym przypadku danych tabeli. Będziemy używać tej właściwości bezpośrednio wewnątrz znacznika TD, aby rozpakować rząd w pojedynczej komórce tabeli.

W tym skrypcie otworzymy znacznik nagłówka i zaczniemy od znacznika stylu do zapewnienia stylizacji do tabeli i jej elementów, takich jak nagłówek tabeli i dane tabeli. Po dostarczeniu właściwości stylizacji tag do ciała strony zostanie otwarty. W znaczniku ciała utworzymy naszą tabelę z czterema rzędami za pomocą znacznika TR. W pierwszym rzędzie dodamy nagłówek tabeli za pomocą znacznika th. Następnie, w drugim i trzecim rzędach, umieścimy dane w kolumnach tabeli za pomocą znacznika TD.

Następnie dodamy kolejny wiersz, w którym obie kolumny tabeli zostaną scalone za pomocą właściwości Colspan. Właściwość Colspan jest zdefiniowana w tabeli znacznika danych za pomocą słowa kluczowego Colspan z liczbą kolumn, które chcemy w naszej tabeli jako argument. W tym rzędzie dodamy sumę elementów tabeli w poprzednich dwóch rzędach. Następnie zamkniemy pozostałe znaczniki i otworzymy plik w naszej przeglądarce za pomocą „.Format html ”.

Jak widać na powyższym wyjściu, dodaliśmy cztery rzędy do tabeli, przy czym ostatni wiersz składa się z pojedynczej komórki złożonej z dwóch kolumn ze względu na właściwość Colspan dodaną do znacznika TD.

Przykład 02: Korzystanie z właściwości CSS Colspan na nagłówku tabeli w pliku HTML

W tym przykładzie użyjemy właściwości ColSpan CSS do rozprzestrzeniania się składników tabeli, które w tym przypadku będą nagłówkiem tabeli. Ten atrybut będzie używany dokładnie wewnątrz znacznika th, aby rozciągnąć się w wierszu w jednej kolumnie tabeli.

Otworzymy znacznik nagłówka i zaczniemy od znacznika stylu, aby stylizować tabelę i jego funkcje, takie jak nagłówek tabeli i dane tabeli w tym skrypcie. Tag dla ciała strony zostanie otwarty po dostarczeniu atrybutów stylu. Za pomocą elementu TH dodamy nagłówek tabeli do pierwszego rzędu. Właściwość Colspan zostanie następnie użyta do połączenia kolumn obu tabel w tym rzędzie. Właściwość Colspan zostanie określona w znaczniku nagłówka tabeli za pomocą słowa kluczowego Colspan z liczbą kolumn w naszej tabeli jako wejściu. Nagłówek tego stołu będzie służył jako zbiorowy nagłówek dla całego stołu.

Dodaliśmy trzy rzędy do tabeli, jak wskazano w wyniku powyżej, z których pierwsza jest pojedyncza komórka złożona z dwóch kolumn z powodu atrybutu Colspan zastosowanego w znaczniku TH, co czyni go wspólnym nagłówkiem dla wszystkich elementów tabeli.

Przykład 03: Korzystanie z właściwości CSS Colspan na nagłówku i danych danych tabeli tej samej tabeli w pliku HTML

Wykorzystamy właściwość Colspan CSS, aby obejmować dwa elementy tabeli, które w tym przypadku będą nagłówkiem tabeli i tag danych tabeli w tym przykładzie. Ta właściwość będzie używana szczególnie wewnątrz th, a TD TD, aby obejmować wiersz w jednej kolumnie tabeli, co daje dwa rozpijane wiersze.

W tym skrypcie otworzymy znacznik nagłówka i zaczniemy od znacznika stylu, aby stylizować tabelę i jej komponenty, takie jak dane nagłówka i tabeli. Po dostarczeniu atrybutów stylu tag do ciała strony zostanie otwarty. W znaczniku ciała utworzymy tabelę z czterema rzędami za pomocą znacznika TR. Nagłówek tabeli zostanie dodany do pierwszego rzędu za pomocą elementu TH. Właściwość Colspan zostanie następnie użyta do połączenia kolumn obu tabel w tym rzędzie. Właściwość Colspan zostanie podana w elemencie nagłówka tabeli za pomocą słowa kluczowego Colspan jako wejścia i liczby kolumn w naszej tabeli jako wyjściu. Nagłówek tej tabeli będzie działał jako ogólny nagłówek tabeli.

Następnie dodamy kolejny wiersz po trzecim wierszu, w którym użyjemy atrybutu Colspan, aby połączyć kolumny tabeli. W tym rzędzie dodamy sumę komponentów tabeli z poprzednich dwóch wierszy.

Jak pokazano na powyższym wyjściu, dodaliśmy cztery rzędy do tabeli, z których pierwsza jest pojedyncza komórka złożona z dwóch kolumn z powodu atrybutu Colspan zastosowanego w znaczniku TH, co czyni go wspólnym nagłówkiem dla wszystkich elementów tabeli i Ostatni z nich jest również sumą reprezentującą sumę liczb z poprzednich wierszy.

Przykład 04: Korzystanie z właściwości CSS Colspan i RowsPan w tej samej tabeli w pliku HTML

W tym przykładzie wykorzystamy właściwości Colspan i Rowspan CSS, aby obejmować dwie kolumny tabeli dwóch wierszy. Ta właściwość będzie używana szczególnie wewnątrz znacznika TH, aby utworzyć komórkę dwóch kolumn i dwóch wierszy w tabeli.

W tym skrypcie otworzymy znacznik nagłówka i zaczniemy stylizować tabelę i jego właściwości, takie jak dane nagłówka i tabeli, z tagiem stylu. Po dostarczeniu atrybutów stylu tag do ciała strony zostanie otwarty. W znaczniku ciała utworzymy tabelę z trzema rzędami za pomocą znacznika TR. Nagłówek stołowy zostanie dodany do pierwszego i drugiego rzędu za pomocą znacznika TH.

Następnie w tym rzędzie właściwości Colspan i Rowspan zostaną użyte do łączenia kolumn obu tabel. Właściwość Colspan zostanie określona w elemencie nagłówka tabeli za pomocą słowa kluczowego Colspan jako wejścia, a właściwość RowsPan zostanie określona w ten sam sposób. Następnie, w drugim i trzecim rzędach, umieścimy dane w kolumnach tabeli za pomocą znacznika TD.

Jak pokazano w wyniku powyżej, dodaliśmy trzy wiersze i trzy kolumny do tabeli, z których pierwsza jest pojedyncza komórka złożona z dwóch kolumn i dwóch rzędów z powodu atrybutów Colspan i Rowspan zastosowanych w znaczniku th.

Wniosek

W tym artykule omówiliśmy właściwość Colspan, którą CSS zapewnia w pliku HTML. Ta właściwość jest zwykle dodawana do elementów tabeli, takich jak nagłówek tabeli i dane tabeli w celu utworzenia rozciągniętych komórek wielu kolumn. Właściwość Colspan można dodawać wiele razy w jednej tabeli, aby wyświetlić użytkownikowi bardziej prezentacyjne dane, które zaimplementowaliśmy w tym artykule na temat Notespadu ++ IDE. Wdrożyliśmy również tę właściwość z właściwością RowsPan jako przykład, aby lepiej zrozumieć zastosowania tej właściwości.