Konieczność rozciągnięcia tabeli na całą przestrzeń okna przeglądarki pojawia się np. w momencie umieszczenia projektu strony wewnątrz tabeli. Rozwiązanie tego problemu nie wymaga pisania skomplikowanego kodu, ale wiąże się z uwzględnieniem niektórych cech znaczników stron internetowych.
Niezbędny
Podstawowa znajomość HTML
Instrukcje
Krok 1
Najpierw musisz wyjaśnić znaczenie nadchodzącej operacji. W kodzie HTML strony tabeli to zestaw zagnieżdżonych znaczników sparowanych (jeden otwierający i jeden zamykający). Tagi komórek (
) są zagnieżdżone w tagach tekstowych (
), a te z kolei w tagi tabeli (
). W tagu otwierającym tabelę możesz ustawić jej szerokość i wysokość zarówno w jednostkach bezwzględnych (piksele), jak i względnych (procenty). W przypadku rozmiarów względnych szerokość i wysokość elementu nadrzędnego tabeli są przyjmowane jako 100%. Jeśli umieścisz tabelę bezpośrednio w treści strony (a nie w warstwie, formularzu, innej tabeli itp.), to wymiarami jej elementu nadrzędnego będą szerokość i wysokość strony. Oznacza to, że aby rozciągnąć stół na całą wolną przestrzeń, musisz określić dla niego 100% wymiary poziome i pionowe.
Krok 2
Teraz możesz zacząć stosować to w praktyce w HTML. Szerokość i wysokość tabeli określają atrybuty width i height. Czyli kod tabeli wskazujący 100% wymiarów we wszystkich kierunkach i np. z dwiema komórkami w jednym wierszu, może wyglądać tak:
| lewa komórka tabeli | prawa komórka tabeli |
Krok 3
Określenie 100% szerokości i wysokości wystarczy do rozciągnięcia tabeli, jeśli wybierzesz odpowiedni standard HTML, według którego przeglądarka powinna odczytywać kod strony. Znacznik jest umieszczany w pierwszym wierszu dokumentu. Potrzebujesz tagu o następującej treści:
Krok 4
I jeszcze jeden punkt należy wziąć pod uwagę w swoim kodzie: domyślnie strona jest wcięta od krawędzi okna o kilka pikseli, więc tabela, nawet po wypełnieniu całej strony, nie rozciągnie się na całe okno. Aby wyeliminować te niepotrzebne pola, możesz określić zero wcięć w odpowiednich atrybutach w otwierającym tagu treści strony ():
Krok 5
Po złożeniu cały kod strony z tabelą rozciągniętą do pełnej szerokości i wysokości ekranu będzie wyglądał tak:
Rozciągnięty stół
| lewa komórka tabeli | prawa komórka tabeli |
