Tabele danych zawierają różne informacje w kolumnach i wierszach, co ułatwia odczytywanie. Dane są zazwyczaj częściowo numeryczne z etykietami tekstowymi. Przykładem jest tabela danych, która pokazuje, ile kalorii dana osoba spożywa każdego dnia. Tworzenie tabeli danych online można wykonać za pomocą HTML lub bardziej złożonego języka przeglądarki CSS. Ostateczna tabela wygląda jak tabela danych utworzona w arkuszu kalkulacyjnym lub na papierze. Jedyną różnicą jest kodowanie w tle, którego nie widać, chyba że patrzy się na kod źródłowy. Kodowanie można tworzyć za pomocą edytorów HTML, tekstu lub w inny sposób. Istnieje wiele witryn internetowych oferujących możliwość wprowadzania danych, ustawiania kilku atrybutów i tworzenia dla Ciebie całego kodu tabeli. Tabele danych online są zwykle używane jako część strony sieci Web. Tabele danych są często używane do tworzenia list towarów z kategoriami, takich jak towary na sprzedaż. Niektóre strony internetowe używają ich do wyświetlania statystyk w celu uzyskania informacji. Chociaż tabel danych można używać w trybie offline do drukowania lub w raportach, zwykle lepiej jest używać oprogramowanie do arkuszy kalkulacyjnych, takie jak Microsoft Office Excel, które oferuje znacznie więcej funkcji do pracy z danymi. Ten przewodnik pokazuje, jak utworzyć tabelę danych HTML za pomocą Notatnika.
Otwórz edytor HTML lub zwykły dokument tekstowy Notatnika, aby wprowadzić kod HTML. Notatnik działa dobrze, jeśli jesteś przyzwyczajony do kodowania HTML. Edytory HTML przyspieszają wykonywanie powtarzających się zadań, ale niektóre, takie jak Frontpage, dodają dodatkowe, niepotrzebne kodowanie, które może spowolnić działanie stron internetowych. Najlepszą rzeczą do zrobienia jest najpierw kod za pomocą edytora HTML, a następnie wróć i ręcznie edytuj kod, aby go wyczyścić.
Wybierz atrybuty tabeli dla obramowania, szerokości, koloru tła i kolorów czcionki. Musisz wziąć pod uwagę układ strony internetowej, szerokość, kolory i inne atrybuty, aby tabela była czytelna. Musisz również zdecydować, ile wierszy i kolumn jest potrzebnych dla danych. Rozpocznij definiowanie atrybutów tabeli. (Nasz przykład pokazuje liczbę kalorii zjedzonych podczas obiadu i kolacji każdego dnia tygodnia. Potrzebujemy trzech kolumn (Dzień, Lunch i Kolacja) i siedmiu wierszy (dwa na etykiety i po jednym na każdy dzień tygodnia).
Dodaj obramowanie wokół tabeli i komórek danych. Obramowania dzielą dane na komórki, co ułatwia ich przeglądanie. Jest mierzony w pikselach i można mu nadać wartość 0, aby ich nie używać. Ramka jedno- lub dwupikselowa jest na ogół w porządku. Znacznik na granicy to
bgcolor=border="CHOSEN_BORDER_WIDTH"
Kolor obramowania można zmienić za pomocą tagu
bordercolor="CHOSEN_COLOR"
który wykorzystuje podstawowe terminy dotyczące kolorów, takie jak czerwony lub czarny lub sześciocyfrowe szesnastkowe kody kolorów. Szesnastkowe oferują więcej kolorów. W naszym przykładzie użyto border="2" i bordercolor="black".
Określ szerokość całego stołu. Jest mierzony w pikselach lub procentach rozmiaru ekranu. Piksele są ostateczne, a wartości procentowe umożliwiają dostosowanie tabeli do różnych rozmiarów ekranu. Spróbuj ocenić szerokość na podstawie szerokości danych w wierszach. Jeśli później okaże się, że stół jest za cienki lub za szeroki, można go zmienić. W naszym przykładzie użyto width="175".
Ustaw kolor tła komórek danych. Różni się od koloru tła strony, co zapewnia dobry kontrast. Znacznik to
bgcolor="CHOSEN_COLOR"
podobnie jak kolor obramowania. W naszym przykładzie użyto bgcolor="white".
Ustaw kolor czcionki tekstu w komórkach. Upewnij się, że kolor dobrze kontrastuje z tłem, aby był czytelny. Zawsze najlepiej sprawdza się światło na ciemnym lub ciemny na jasnym. Znacznik to
czcionka="CHOSEN_COLOR"
Naszym przykładem jest font="black", co dobrze kontrastuje z białym tłem.
Zapisz pełne znaczniki tabeli między strzałkami w lewo i w prawo, z odstępem między atrybutami znacznika i zaczynając od znacznika tabeli na początku. Kolejność tagów nie ma znaczenia, o ile „tabela” jest z przodu.
Określ szerokości kolumn. Szerokość każdej kolumny zależy od szerokości całego stołu. Weź szerokość tabeli i podziel ją przez liczbę komórek, aby uzyskać kolumny o równych rozmiarach. W razie potrzeby dostosuj szerokości kolumn, ale suma nie może przekraczać szerokości tabeli. Gdy zmieni się szerokość jednej komórki, pozostałe komórki należy dostosować, aby zsumować szerokość tabeli. (Nasz przykład ma szerokość 175 i trzy kolumny w rzędzie, więc parzysty podział wynosi około 59. Rzeczywisty podział to 70, 60, 40.)
Zacznij dodawać swoje dane. Najpierw rozpocznij nową linię i dodaj wiersz tabeli z kodem
Wprowadź swoje dane dla komórki; używając tego kodu do reprezentowania pustych komórek:
Zamknij komórkę tagiem. Znacznik bordercolor służy do określenia koloru obramowania komórki, jeśli jest to wymagane. Jeśli zostanie pominięty, używany jest domyślny kolor obramowania tabeli. Pierwszy kod komórki w naszym przykładzie to:
Powtarzaj tworzenie komórek danych tabeli, każda w nowym wierszu, aż wszystkie komórki w wierszu będą kompletne. Następnie zakończ wiersz tagiem. Rozpocznij następny wiersz tym samym procesem, zaczynając od
Zamknij kod tabeli za pomocą etykietka. Nasz końcowy kod tabeli, jeśli został zakończony po dwóch wierszach danych, znajduje się poniżej.
Rzeczy, których będziesz potrzebować
- Edytor HTML lub Notatnik
- Dane