Zacznij tworzyć proste tabele w HTML

Tabele HTML są zdecydowanie jednymi z najlepszych instrukcji HTML, jakie kiedykolwiek stworzono. Możliwość formatowania strony internetowej za pomocą zestawień tabelarycznych jest niesamowita! Naucz się ich, używaj i kochaj!

Podstawowe tabele:

Weźmy naszą listę zakupów, której użyliśmy w samouczku o liście, i tym razem ułóżmy ją w tabeli. Umieścimy pozycje w pierwszej kolumnie, a ceny w drugiej kolumnie.

To jest kod, który sprawił, że to się stało. Właściwy kod znajduje się po lewej stronie, a opis w języku angielskim po prawej. Wcięcie opisu ma na celu pokazanie „struktury” instrukcji table.

Zdezorientowany? Ok, spójrzmy na powyższą tabelę. Ta tabela jest w rzeczywistości dość prosta. Budujesz stoły bardzo podobnie jak czytasz książkę; od lewej do prawej i od góry do dołu. Tabela zaczyna się znacznikiem <table> i kończy znacznikiem </table> . Każdy wiersz zaczyna się znacznikiem <tr> i kończy znacznikiem </tr> . Każda część danych tabeli zaczyna się od znacznika <td> i kończy się znacznikiem </td> .

Ale to nie jest stół, mówisz! Nie ma granicy! Właściwie to jest stół. Jest to tabela bez obramowania lub BORDER=”0″ . Ta koncepcja jest bardzo ważna, gdy chcesz użyć instrukcji TABLE do formatowania swoich stron internetowych. Nie zawsze chcesz mieć grubą ramkę. Ok, więc tym razem zróbmy stół z OBRAMOWANIEM .

Jedyną różnicą między tą tabelą a poprzednią jest instrukcja <table> , która wygląda jak poniżej.

<obramowanie tabeli=”7″>

Całkiem proste, co? Rozmiar obramowania jest reprezentowany w pikselach. Ok, teraz trochę więcej CELLSPACING . To jest odstęp między naszymi komórkami tabeli. Można to również potraktować jako grubość ścianki między komórkami tabeli.

To wygląda znacznie lepiej. Czy widzisz różnicę? Ponownie jedyna zmiana dotyczy instrukcji <table> , która wygląda jak poniżej.

<obramowanie tabeli=”7″ odstęp komórek=”7″>

CELLSPACING , podobnie jak BORDER , jest również mierzony w pikselach. Ale mówisz, że tekst wygląda zbyt blisko ścian stołu! Ok, ok, to też możemy naprawić. Nazywa się CELLPADDING . Jest to przestrzeń między zawartością komórki a krawędziami ścian komórki.

Ach, czy tak właśnie chciałeś? Nie? Cóż, musiałem trochę przesadzić z liczbami, ale to tylko po to, żeby spróbować. Mam nadzieję, że widzisz różnice. Poprzednia tabela została utworzona za pomocą instrukcji <table> pokazanej poniżej.

<table border=”7″ cellpacing=”7″ cellpadding=”7″>

Oprawianie obrazów:

Teraz chcemy przejść do bardziej zabawnych rzeczy. Kadrowanie zdjęć to świetny sposób na wzbogacenie zdjęć. To sprawia, że ​​wydają się wyskakiwać ze strony. Oto moje 5 sekundowe arcydzieło.

Całkiem fajna grafika, nawet sprawia, że ​​moje paskudne zdjęcie wygląda dobrze. Oto kod, który go stworzył.

<table border=”7″ alt=””>
<tr>
<td><img src="image.gif"></td>
</tr>
</table>

Tag <tr> i tagi </tr> można pominąć, jeśli chcesz. Nadal będzie działać dobrze. Puryści HTML prawdopodobnie będą twierdzić, że te tagi muszą tam być. Jeśli czujesz się w ten sposób, jak zwykle, to skorzystaj z nich.

Możesz też oprawić zdjęcia tekstem, jak pokazano poniżej.

Netto, hu! Kod pokazano poniżej.

<table border=”7″ cellpadding=”10″>
<tr>
<td><img src=”image.gif” alt=”></td>
<td>Co za<br>arcydzieło!</td>
</tr>
</table>

Mam jeszcze jedną uwagę na temat kadrowania obrazów. Jeśli masz problemy z wyśrodkowaniem obrazu, spróbuj wykonać następujące czynności.

<td align=”center”><img src=”image.gif”></td>

Linki w ramkach:

Możesz także umieścić linki wewnątrz tabeli. W rzeczywistości możesz umieścić całą swoją stronę w zbiorze poleceń tabeli, jeśli chcesz, i używając BORDER=”0″ , nikt tak naprawdę nie może powiedzieć. Dlaczego chcesz to zrobić, pytasz? Do formatowania obrazów i tekstu razem na Twojej stronie; Pomyśl o tym. OK, wróć do ramek linków.

Oto kod, który to zrobił.

<table border=”7″ cellpadding=”10″>
<tr>
<td><a href=”http://www.google.com/”>Google.com</a></td>
<td><a href=”http://www.yahoo.com/”>Yahoo!</a></td>
</tr>
<tr>
<td><a href=”http://www.jjwdesign.com/”>JJW Design</a></td>
<td><a href=”http://www.iproundup.com/”>Przegląd IP</a></td>
</tr>
</table>

Cóż, mam nadzieję, że spodobała Ci się ta mała sekcja w instrukcji <table> . Z instrukcją <table> można zrobić o wiele więcej niż to, co jest możliwe w tym samouczku. Mimo to mam nadzieję, że to pomogło.

Link do tego samouczka!

Czy ten samouczek okazał się pomocny? Jeśli tak, pomóż mi podzielić się nim z innymi, podając do niego link. Wystarczy umieścić poniższy kod HTML na własnej stronie internetowej, aby utworzyć łącze do tego samouczka.