- Krok 1. Główny stół
- Krok 2. Tabela treści
- Krok 3. Wyrównanie w pionie
- Krok 4. Wypełnij tabelę: nagłówek, piwnica i treść
- Krok 5. Tworzenie granic
Krok 1. Główny stół
Krok 2. Tabela treści
Krok 3. Wyrównanie w pionie
Krok 4. Wypełnij tabelę: nagłówek, piwnica i treść
Krok 5. Tworzenie granic
- jest to nazwa warunkowa metody układu strony witryny.
W tabelarycznej metodzie układu tworzona jest ramka stron witryny za pomocą Tag <table> Oznacza to, że podstawą strukturalną strony jest tabela w komórkach, w których znajduje się ta lub inna treść.
Jest to najczęstszy sposób układania stron internetowych. Zaletą układu tabelarycznego jest to, że jest prosty i szybki w wykonaniu. Ponadto strony oparte na tabeli są poprawnie wyświetlane w różnych przeglądarkach.
Myślę, że znasz już główne tagi tabeli: są to tagi <tr> i <td> tworzenie odpowiednio komórki wiersza i tabeli. I pewnie wiesz Podstawy tabeli HTML . Jeśli nie, radzę najpierw przeczytać o tym trochę.
Przejdźmy teraz bezpośrednio do tworzenia ramki strony za pomocą metody układu tabelarycznego.
Zasadniczo układ z tworzeniem tabel jest wykonywany w taki sposób, że granice i tabele oraz ich komórki są niewidoczne ( granica atrybutu = „0” ). Stworzę tabele z obramowaniem ( atrybut border = „1” ). Łatwiej będzie ci nawigować.
Krok 1. Główny stół 
Standardowa oryginalna tabela, która stanowi podstawę strony, zazwyczaj składa się z trzech linii: górna linia jest dla nagłówka strony - może to być dowolny obraz utworzony w edytorze. Adobe Photoshop lub wypożyczone z dowolnego źródła; dolna linia to piwnica lub tak zwana „stopka” witryny ( z angielskiego. stopka - stopka ); a główna linia jest pośrodku. Wtedy dowiesz się, do czego jest przeznaczony.
Proponuję nazwać oryginalną tabelę jako główną. Robimy to, aby wyeliminować zamieszanie, ponieważ inne tabele zostaną utworzone później.
Warto zauważyć następujący ważny punkt: znacznik <tr> nie może istnieć sam. Wymagany jest tag <td>. Oznacza to, że wiersz tabeli jest tworzony tylko wtedy, gdy zawiera co najmniej jedną komórkę.
Fragment kodu:
Wynik:
Jeśli chodzi o szerokość głównej tabeli, to, jak widać, ustawiliśmy ją na stałą: równą 1000 px. Możesz ustawić dowolną szerokość, ale nie więcej niż rozdzielczość ekranu. Na przykład, jeśli masz ustawioną rozdzielczość, pożądane jest, aby szerokość głównej tabeli nie przekraczała 1280 px, w przeciwnym razie część jej nie będzie widoczna, aw oknie przeglądarki pojawi się poziomy pasek przewijania.
A jeśli na przykład pewna liczba użytkowników ma rozdzielczość ekranu niższą niż twoja? W tym przypadku, jeśli szerokość głównej tabeli jest większa niż 1024 px, część użytkowników będzie niewygodna, aby wyświetlić strony Twojej witryny, ponieważ będą musieli użyć poziomego paska przewijania.
Jest z tego wyjście. Możesz ustawić szerokość na 100%. Następnie szerokość tabeli dostosuje się do rozmiaru okna przeglądarki.
Możesz także natychmiast ustawić wartość atrybutu height znacznika <table>, który ustawia wysokość tabeli. Niech wysokość głównego stołu wynosi 700 px.
Powinieneś wiedzieć, że wartości wysokości i szerokości tabeli nie są stałe, to znaczy tabela nie będzie mniejsza, ale może zrobić więcej - wszystko zależy od rozmiaru jej zawartości.
Krok 2. Tabela treści
Utwórz inną tabelę w komórce głównego rzędu. Nazwijmy to tabelą treści - będzie zawierać główną treść strony.
Z reguły tabela treści składa się z trzech kolumn, czyli ma jeden wiersz i trzy komórki tworzące kolumny.
Z reguły w lewej kolumnie znajduje się menu nawigacyjne, a po prawej stronie na przykład jednostki reklamowe, banery itp. Możesz tymczasowo pozostawić prawą kolumnę pustą lub nie tworzyć jej ( ale lepiej ją utworzyć - w miarę wypełniania strony będzie ona używana ). I w końcu główna komórka tabeli treści jest główną komórką, ponieważ umieszczona jest w niej treść: teksty artykułów, różne elementy graficzne itp.
Fragment kodu:
<table border = "1" width = "100%" height = "100%"> Ustaw szerokość i wysokość tabeli na 100%
<tr>
<td> & nbsp; </ td> Lewa komórka tabeli dla treści
<td> & nbsp; </ td> Środkowa tabela treści
<td> & nbsp; </ td> Prawa komórka tabeli dla treści
</ tr>
</ table>
Wynik:
Szerokość i wysokość tabeli dla zawartości jest ustawiona na 100%. W ten sposób natychmiast rozciągnie się do pełnej szerokości głównego stołu i na całą wysokość głównego rzędu.
Krok 3. Wyrównanie w pionie
Jak widać z poprzednich kroków, zawartość komórek w tabeli jest wyrównana w płaszczyźnie poziomej wzdłuż lewej krawędzi iw pozycji pionowej wzdłuż środka.
Jeśli wyrównanie poziome w komórce jest zazwyczaj pozostawione domyślnie, wówczas umieszczenie zawartości w środku komórki w płaszczyźnie pionowej rzadko jest odpowiednie dla kogoś.
Dlatego, używając atrybutu valign znacznika <td>, ustawiamy pionowe wyrównanie zawartości tych komórek, dla których jest to konieczne. Zasadniczo dla zawartości komórek ustaw pionowe wyrównanie górnej krawędzi.
Fragment kodu:
<table border = "1" width = "100%" height = "100%"> Tabele treści
<tr>
<td valign = "top"> & nbsp; </ td> Lewa komórka tabeli dla treści. Zawartość komórki jest wyrównana na górnej krawędzi.
<td valign = "top"> & nbsp; </ td> Komórka centralnej tabeli treści. Zawartość komórki jest wyrównana na górnej krawędzi.
<td> & nbsp; </ td> Prawa komórka tabeli dla treści
</ tr>
</ table>
Wynik:
Krok 4. Wypełnij tabelę: nagłówek, piwnica i treść
Tak więc w poprzednim kroku zakończyliśmy budowanie naszej ramki ( jednak możesz ją przerobić i wprowadzić zmiany w dowolnym momencie ).
Przejdźmy teraz do wypełnienia głównego stołu. Zacznijmy od czapek.
Zrobiłem obraz, który jest nagłówkiem mojej strony i zmniejszyłem go do odpowiedniego rozmiaru: przypominam, że szerokość głównej tabeli, a co za tym idzie, komórka pod nagłówkiem wynosi 1000 px.
Znając wysokość obrazu, ustaw dla komórki przypisanej do czapki, odpowiednią wartość wysokości: 121 px.
Idź do piwnicy: dolna komórka głównego stołu, która jest „stopką” strony, wypełnij ją niebieską ( atrybut bgcolor znacznika <td> ustawia kolor tła komórki ) i ustaw go na wysokości 35 px.
Następnie edytuj tabelę zawartości: ustaw szerokość lewej komórki na 250 px, a prawą komórkę - 150 px. Centralna komórka zajmuje całe wolne miejsce: jej szerokość wynosi 600 px.
Fragment kodu:
<table border = "1" width = "100%" height = "100%"> Tabele treści
<tr>
<td valign = "top" width = "250"> & nbsp; </ td> Lewa komórka tabeli dla treści. Zawartość komórki jest wyrównana na górnej krawędzi.
<td valign = "top"> & nbsp; </ td> Komórka centralnej tabeli treści. Zawartość komórki jest wyrównana na górnej krawędzi.
<td width = "150"> & nbsp; </ td> Prawa komórka tabeli dla treści
</ tr>
</ table>
Wynik:
W lewej komórce tabeli dla treści umieściłem nawigację po menu na stronie, a pośrodku - tekst.
Krok 5. Tworzenie granic
To ostatni krok, w którym wyznaczamy granice.
Działałem w następujący sposób: dla granicy nagłówka witryny i centralnej komórki tabeli głównej wybrałem ten sam kolor, z którym stopka jest wypełniona, a komórki tabeli dla zawartości mają granatowe granice. Wszystkie obramowania są wykonane ciągłą linią i mają grubość 1 px.
Fragment kodu:
<table width = "100%" height = "100%" style = ""> Tabele treści. Jasnoniebieska granica
<tr>
<td valign = "top" width = "250" style = ""> & nbsp; </ td> Lewa komórka tabeli dla treści. Zawartość komórki jest wyrównana na górnej krawędzi. Ciemnoniebieska granica
<td valign = "top" style = ""> & nbsp; </ td> Komórka centralnej tabeli treści. Zawartość komórki jest wyrównana na górnej krawędzi. Ciemnoniebieska granica
<td width = "150" style = ""> & nbsp; </ td> Prawa komórka tabeli dla treści. Ciemnoniebieska granica
</ tr>
</ table>
Wynik:
Być może na tym kończymy tworzenie ramki strony metodą układu tabelarycznego.
Nieco później będę kontynuował rozwijanie tego tematu: nieco skomplikujemy naszą strukturę, dołączając kolejną linię do górnego menu nawigacyjnego; na przykład możesz umieścić inną tabelę w lewej kolumnie, dzieląc ją na części itp.
Jednak możesz to zrobić sam. Zabezpiecz jednocześnie materiał!
A jeśli na przykład pewna liczba użytkowników ma rozdzielczość ekranu niższą niż twoja?
