Projektanci stron internetowych mogą dostosowywać układy stron przy użyciu zagnieżdżonych tabel, projektując większe i mniejsze tabele o różnych rozmiarach komórek, dzięki czemu każdy pokazuje tekst, grafikę lub jedno i drugie. W szczególności zagnieżdżone tabele włączały układy kolumnowe na stronach internetowych bez użycia irytujących ramek.
Ten post określi:
Jak utworzyć/tworzyć tabelę w HTML?
Jak utworzyć zagnieżdżoną tabelę w HTML?
Jak utworzyć/tworzyć tabelę w HTML?
Aby zaprojektować tabelę w HTML, „
”Tag jest wykorzystywany. Wypróbuj więc podane instrukcje.
Krok 1: Utwórz kontener Div
Początkowo utwórz kontener DIV, wdrażając „”Element i dodaj atrybut id o określonej nazwie zgodnie z wyborem.
Krok 2: Dodaj nagłówek
Następnie użyj znacznika nagłówka z „" Do "„Aby dodać nagłówek do pojemnika Div. W tym celu wykorzystaliśmy „H1„Tag nagłówka i osadzony tekst wewnątrz znacznika otwierającego i zamykającego„ H1 ”.
Krok 3: Utwórz tabelę
Aby utworzyć tabelę w HTML, wstaw „
”Tag i dodaj klasę wewnątrz znacznika tabeli o określonej nazwie. Następnie dodaj poniżej listy elementów między tagami tabeli:
"
”Jest wykorzystywany do definiowania wierszy w tabeli.
"
”Element służy do dodania danych wewnątrz tabeli.
Aby to zrobić, osadzić dane tekstowe pomiędzy
:
Witryna samouczka Linuxhint
Pierwsza organizacja
Druga organizacja
Trzecia organizacja
Czwarta organizacja
W rezultacie w HTML utworzono prostą tabelę:
Krok 4: Styl kontener Div
Aby stylizować kontener DIV, najpierw dostęp do niego za pomocą „#główna zawartość”I zastosuj styl CSS zgodnie z preferencjami:
Aby to zrobić, zastosowaliśmy nieruchomości poniżej listy:
"wyściółka”Określa pustą przestrzeń wokół elementu wewnątrz zdefiniowanej granicy.
"margines”Służy do określenia przestrzeni poza granicą.
"granica”Jest wykorzystywany do zdefiniowania granicy wokół zdefiniowanego elementu.
Wyjście
Krok 5: Zastosuj styl na stole
Uzyskaj dostęp do tabeli za pomocą klasy stołu i zastosuj styl za pomocą właściwości CSS:
.Table główny Border: 4px Ridge Blue; Wyściółka: 20px 30px; kolor tła: RGB (135, 197, 247);
W takim przypadku zastosowaliśmy „granica”,„wyściółka", I "kolor tła" nieruchomości. „„kolor tła”Właściwość określa kolor na tylnym poddejnie zdefiniowanego elementu.
Krok 6: Zastosuj styl na wierszach stołowych i kolumnach
Uzyskać dostęp do "tabela”Wraz z rzędami„tr”I dane„TD”:
Tabela tr td granica: 3px solidny zielony;
Następnie zastosuj „granica”Właściwość CSS, aby dodać granicę wokół rzędów i komórek.
Wyjście
Przejdź do następnej sekcji, jeśli chcesz zagnieżdżić stół.
Jak tworzyć/tworzyć zagnieżdżoną tabelę w HTML?
Aby stworzyć zagnieżdżoną tabelę w HTML, najpierw stwórz tabelę z „
„Element i zdefiniuj rzędy wewnątrz stołu. Następnie dodaj „
”Element do dodania danych wewnątrz danych. W środku "
”Otwarcie i zamykanie, wstaw„
„Aby utworzyć zagnieżdżony stół w stole.
Aby uzyskać praktyczne implikacje, musisz wypróbować instrukcje określone poniżej.
Krok 1: Utwórz pojemnik „Div”
Najpierw utwórz pojemnik za pomocą „”Z atrybutem klasowym wewnątrz znacznika div.
Krok 2: Wstaw nagłówek
Następnie dodaj nagłówek, wykorzystując „„Tag i osadzaj tekst między znacznikiem.
Krok 3: Zrób stół
Utwórz tabelę z pomocą „
”Tag i dodaj„
" I "
".Aby dodać tekst w tabeli.
Krok 4: Utwórz zagnieżdżoną tabelę
W środku "
„Element, zdefiniuj inny”
”Element do utworzenia zagnieżdżonej tabeli w głównej tabeli. Następnie dodaj dane zgodnie z potrzebami:
Witryna samouczka Linuxhint
Pierwsza organizacja
Druga organizacja
Pracownik 1
Pracownik 2
Pracownik 3
Pracownik 4
Trzecia organizacja
Czwarta organizacja
Pracownik 1
Pracownik 2
Pracownik 3
Pracownik 4
Notatka: Użytkownicy mogą dodać jak najwięcej tabel w
element głównej tabeli.
W następnym wyniku można zobaczyć, że zagnieżdżona tabela została pomyślnie utworzona:
Krok 4: Styl zagnieżdżony
Uzyskaj dostęp do zagnieżdżonej tabeli za pomocą identyfikatora z selektorem. W naszym przypadku, aby uzyskać dostęp do tabeli za pomocą "#zagnieżdżony stoł”I zastosuj stylistykę za pomocą właściwości CSS:
Zastosowaliśmy „granica”,„kolor", I "kolor tła”Właściwości i ustawiaj wartość zgodnie z pragnieniem zagnieżdżonej tabeli.
Wyjście
Chodziło o stworzenie zagnieżdżonej tabeli w HTML.
Wniosek
Aby stworzyć zagnieżdżoną tabelę w HTML, najpierw utwórz tabelę, wykorzystując „
”Tag. Następnie zdefiniuj rzędy za pomocą „
”Tag i dodaj dane za pomocą„
". Potem, w „
”Tag, utwórz inną tabelę, wypróbowując tę samą metodę. Użytkownicy mogą również stosować właściwości CSS do stylizacji tabeli i stolika zagnieżdżona. W tym poście pokazano metodę tworzenia zagnieżdżonej tabeli w HTML.
