Aby scalić dwie lub więcej komórek w jedną, użyj atrybutów colspan i rowspan znacznika
Przykład 12.3. Nieprawidłowe połączenie komórek
| Komórka 1 | Komórka 2 | |
| Komórka 3 | Komórka 4 | |
Wynik ten przykład pokazano na ryc. 12.5.
Ryż. 12.5. Pojawienie się dodatkowej komórki w tabeli
Pierwsza linia przykładu ma trzy komórki, dwie z nich są połączone z atrybutem colspan, a druga linia ma dodane tylko dwie komórki. Powoduje to wyświetlenie dodatkowej komórki w przeglądarce. Widać to wyraźnie na ryc. 12.5.
Poprawne użycie atrybutów colspan i rowspan pokazano w przykładzie 12-4.
Przykład 12.4. Scalanie komórek w pionie i poziomie
| Przeglądarka | Internet Explorer | Opera | Firefox | ||||
|---|---|---|---|---|---|---|---|
| 6.0 | 7.0 | 7.0 | 8.0 | 9.0 | 1.0 | 2.0 | |
| Utrzymany | Nie | TAk | Nie | TAk | TAk | TAk | TAk |
Wynik tego przykładu pokazano na ryc. 12.6.
Ryż. 12.6. Tabela ze scalonymi komórkami
Ta tabela ma osiem kolumn i trzy wiersze. Część komórek z napisami „Internet Explorer”, „Opera” i „Firefox” jest połączona, gdzie są dwie, a gdzie są trzy. W komórce oznaczonej „Przeglądarka” zastosowano scalanie pionowe.
stoły Najlepszym przykładem jest prosta tabela pokazana na Listingu 5-10 w HTML.
Jest to zwykła tabela, której komórki są ponumerowane - dzięki czemu w przyszłości będzie nam łatwiej. Na ryc. 5.2 pokazuje swój wygląd w oknie przeglądarki internetowej.
Teraz rozważ tabelę na ryc. 5.3.
Tutaj niektóre komórki są połączone. Widać, że połączone komórki wydają się scalać w jedno. Jak to zrobić?
Specjalnie dla tych tagów i
Aby scalić wiele komórek poziomo w jedną, wykonaj następujące kroki.
1. Znajdź w kodzie Znacznik HTML (
2. Wprowadź w nim atrybut COLSPAN i przypisz mu liczbę komórek do połączenia, licząc również pierwszą.
3. Usuń tagi (
Połączmy komórki 2 i 3 tabeli (patrz listing 5.10). Poprawiony fragment kodu, który tworzy pierwszy wiersz tej tabeli, pokazano na listingu 5-11.
W ten sam sposób utworzymy połączone komórki 4 + 5 i 12 + 13 + 14 + 15.
Scalanie komórek w pionie jest trochę trudniejsze. Oto kroki, które należy wykonać w tym celu.
1. Znajdź w kodzie ciąg HTML(tag ), który zawiera pierwszą ze scalonych komórek (jeśli liczysz wiersze od góry do dołu).
2. Znajdź tag (
3. Wprowadź w nim atrybut ROWSPAN i przypisz mu ilość scalone komórki, w tym pierwszy z nich.
4. Przeglądaj kolejne wiersze i usuwaj z nich tagi (
My opuściliśmy scal komórki 1 i 6 naszego stołu. Listing 5-12 zawiera poprawiony fragment jej kodu HTML (poprawki dotyczą pierwszej i drugiej linii).
Zauważ, że usunęliśmy tag z drugiego wiersza, który tworzy szóstą komórkę, ponieważ jest on scalony z pierwszą komórką.
Teraz nie jest używany zbyt często. Jednak wcześniej, w czasach rozkwitu tabelarycznego projektowania stron internetowych, trudno było spotkać się ze stołem bez scalone komórki. Tak czy inaczej, nie zaszkodzi wiedzieć o tym.
Opowiem szczegółowo i szczegółowo o tym, jak scalać komórki w pionie i poziomie w tabelach.
W tym artykule nie będziemy wyjaśniać zasad tworzenie html tabele, aby uzyskać tę wiedzę, weź nasz kurs HTML.
Aby scalić komórki wewnątrz tabeli, w tagu ustawione są dwa atrybuty
Niektórzy ludzie mają problemy z używaniem tych atrybutów, łączeniem komórek.
Atrybuty colspan i rowspan przyjmują jako parametry wartości całkowite od 0 do 1000. Oto mały przykład scalania komórek w tabeli.
Na pierwszy rzut oka wdrażana jest niezbyt złożona struktura, ale patrząc na obfitość
Proponujemy Ci uniwersalny i bardzo wygodny sposób łączenia komórek.
Aby rozpocząć, przygotuj puste miejsce na przyszły stół, przedstawiając go ze wszystkimi oddzielonymi komórkami. To może być stół 3x3, 6x10 i tak dalej. Każdej komórce nadamy własny numer, zaczynając liczyć od lewej do prawej i od góry do dołu.
Przeanalizujmy tworzenie tabeli pokazanej powyżej przy użyciu tej metody.
Oto jak będzie wyglądał kod naszego przedmiotu i samego przedmiotu:
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Konieczne jest scalanie komórek o numerach 1,2,3 poziomo. Aby to zrobić, w kodzie, komórka numer 1, dodaj atrybut rozpiętości kolumn o wartości 3 . I usuń
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 |
Teraz musimy połączyć komórki 9 i 13 w pionie. Wykonujemy podobną procedurę - dla komórki nr 9 ustawiamy atrybut rowspan na wartość 2 , usuwamy komórkę nr 13, wpisujemy numery komórek z których się składa do scalonej komórki.
To zmieni nasz kod i wygląd zewnętrzny stoły:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11 | 12 |
| 14 | 15 | 16 | |
Pozostaje połączyć 11,12,15,16 komórek w jedno. W tym celu w komórce o numerze 11 wpisujemy atrybuty colspan ="2" rowspan ="2" . Komórki 12,15,16 są usuwane z kodu. Piszemy w połączonej komórce liczby 11,12,13,14.
Tak zmieni się nasz kod i wygląd tabeli:
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
| 1,2,3 | 4 | ||
| 5 | 6 | 7 | 8 |
| 9,13 | 10 | 11,12,15,16 | |
| 14 | |||
To wszystko, dostaliśmy oryginalną tabelę, teraz komórki można wypełnić informacjami, które będą dla Ciebie wygodne.
Mamy nadzieję, że rozumiesz zasadę tworzenia złożonych tabel z łączeniem komórek.
Pozostaje porozmawiać o jednej ciekawej funkcji język HTML. To tak zwane scalanie komórek tabele. Najlepszym przykładem jest prosta tabela, której kod HTML pokazano na listingu 5-10.
Listing 5.10
Jest to zwykła tabela, której komórki są ponumerowane - dzięki czemu w przyszłości będzie nam łatwiej. Na ryc. 5.2 pokazuje swój wygląd w oknie przeglądarki internetowej.
Teraz rozważ tabelę na ryc. 5.3.
Tutaj niektóre komórki są połączone. Widać, że połączone komórki wydają się scalać w jedno. Jak to zrobić?
Specjalnie dla tych tagów i
Ryż. 5.2. Oryginalna tabela, której komórki zostaną scalone
Ryż. 5.3. Tabela pokazana na ryc. 5.2, po scaleniu niektórych komórek (połączone komórki są wskazywane przez dodanie ich numerów)
Aby scalić wiele komórek poziomo w jedną, wykonaj następujące kroki.
1. Znajdź tag w kodzie HTML
W ten sam sposób utworzymy połączone komórki 4 + 5 i 12 + 13 + 14 + 15.
Scalanie komórek w pionie jest trochę trudniejsze. Oto kroki, które należy wykonać w tym celu.
1. Znajdź linię (tag) w kodzie HTML, która zawiera pierwszą z komórek do scalenia (jeśli liczysz linie od góry do dołu).
2. Znajdź tag w kodzie tej linii
Zauważ, że usunęliśmy tag z drugiego wiersza, który tworzy szóstą komórkę, ponieważ jest on scalony z pierwszą komórką.
W dzisiejszych czasach łączenie komórek nie jest używane zbyt często. Jednak wcześniej, w czasach rozkwitu tabelarycznego projektowania stron internetowych (w przypadku tabelarycznego projektowania stron internetowych, zobacz rozdział 10), trudno było znaleźć tabelę bez scalonych komórek. Tak czy inaczej, nie zaszkodzi wiedzieć o tym.
Bardzo poręczny przedmiot. Możesz z nimi zrobić wszystko. Oczywiście głównym celem jest umieszczenie informacji w formie tabeli. Ale twórcy stron internetowych poszli dalej. Kiedyś bardzo popularne było używanie tabel do tworzenia ramki witryny. Teraz profesjonaliści starają się tego nie robić.
Tabele znalazły szerokie zastosowanie ze względu na dużą liczbę atrybutów. Na przykład bardzo przydatna okazała się właściwość łączenia rzędów lub kolumn.
Wprowadzenie do teorii
W HTML komórki są scalane przy użyciu dwóch atrybutów: colspan i rowspan. Są one określone dla znacznika td.
Najpierw przeanalizujmy strukturę dowolnej tabeli, zanim zagłębimy się w temat. Każda tabela ma wiersz z komórkami. Pamiętaj, że początkowo wszystkie tabele muszą zawierać tę samą liczbę komórek.
Powyższy rysunek przedstawia dwa wiersze, każdy z trzema komórkami. To jest zwykły stół. Jeśli określisz mniejszą liczbę komórek w dowolnym wierszu, tabela „przesunie się”, wszystko będzie wyświetlane niepoprawnie.
Tabela HTML: scalanie komórek w pionie i poziomie
Możesz określić mniej komórek lub wierszy tylko wtedy, gdy coś łączysz. Ale zamiast usuniętego elementu należy podać dodatkowy atrybut w najbliższym sąsiedztwie początku. Jeśli połączysz kolumny, to colspan, jeśli wiersze, to rowspan. Wartość atrybutu określa liczbę elementów do połączenia.
Pamiętaj, że musisz to określić w elemencie najbliższym początku. Na przykład na powyższym rysunku, jeśli chcesz połączyć komórki 1 i 2, ustaw komórkę 1 tak, aby atrybut colspan był ustawiony na dwa. I usuń komórkę numer 2 lub 3, to już nie ma znaczenia.
Najważniejsze jest to, że mówisz komórce, ile miejsca zajmie. Wartość domyślna to 1.
Scalanie komórek w pionie w tabeli HTML odbywa się na tej samej zasadzie. Po prostu zajęta przestrzeń będzie rozpatrywana w pionie. Zobacz zdjęcie poniżej.
Tutaj komórka o numerze 43 zajmuje dwie linie. W tym celu określono atrybut rowspan. Łatwo zapamiętać:
- Wiersz - ciąg.
- Kol - kolumna/kolumna.
- Rozpiętość - związek.
Twórcy języka starali się jak najbardziej zbliżyć go do człowieka, aby nawet nie znając go, można go przynajmniej jakoś zrozumieć.
W HTML komórki można łączyć w dwóch kierunkach jednocześnie: w pionie iw poziomie. Aby to zrobić, określ oba atrybuty jednocześnie.
Na powyższym rysunku dokładnie to wskazuje, że możesz zrobić unię: wiersze, kolumny i jednocześnie kolumny i wiersze.
HTML: scalanie komórek. Przykłady
Przyjrzyjmy się bardziej złożonym przykładom krok po kroku w dużych tabelach. Poniższy rysunek po lewej pokazuje oryginalną wersję zwykłego stołu. A po prawej - wariant z połączeniem dwóch komórek w drugim rzędzie. Dzięki temu porównanie kodu HTML jest bardziej przejrzyste i łatwiejsze.
Możesz także scalić trzy komórki w środku. W pierwszym przypadku atrybut colspan został określony w komórce #1. Tutaj pierwszy pozostanie niezmieniony, a do drugiego dodano colspan równy trzy.
Jeśli chcesz scalić wszystkie komórki z rzędu w jedną, usuń cztery td i określ colspan="5" w pierwszej.
Jak widać, jest to całkiem proste. Nie ma nic trudnego. Najważniejsze jest, aby od pierwszego razu dokładnie zrozumieć wszystkie pułapki stołów, a wtedy nie powinny pojawić się żadne problemy.
Tabele jako ramy witryny
W HTML scalanie komórek nie zawsze jest używane w przypadku zwykłych tabel informacji (jak w programie Word lub Excel). Twórcy stron internetowych często i wcześniej bez wyjątku wykorzystywali je do tworzenia układu strony.
Rozważmy na przykład ten układ witryny. Ten projekt jest bardzo prosty i prymitywny. Ale tutaj można wyraźnie pokazać użycie sprzężenia.
Pierwotnie istniała tabela składająca się z trzech rzędów, po dwie komórki w każdym. Następnie, aby umieścić logo witryny, połączono dwie komórki w pierwszym rzędzie. W dolna linia zrobił to samo, aby umieścić „piwnicę”.
Dzięki temu możesz umieścić elementy wystroju na swoich miejscach, a nic nie wyjdzie poza jego granice. Jest to bardzo wygodne i proste. Dlatego był tak popularny. Znacznik div jest teraz zalecany do tworzenia bloków.
Wniosek
I pamiętaj, że w tabeli HTML możesz zrobić wszystko, co chcesz, aby scalić komórki. Wszystko zależy od tego, czego potrzebujesz i jak chcesz to zaaranżować. Co najważniejsze, nie dajcie się zmylić. Jeśli chcesz stworzyć duży stół z dużą liczbą łączeń, zaleca się, aby najpierw narysować to wszystko na kartce papieru lub w programie Paint. Dla początkujących tak będzie łatwiej.
Kiedy zdobędziesz doświadczenie, z łatwością wykonasz takie operacje w głowie.