Tabele HTML są podstawą uporządkowanych danych w Internecie. Nie są już używane tylko w arkuszach kalkulacyjnych. Możesz zmienić ich kształt, kolor i dokładnie kontrolować sposób ich wyświetlania w oknie przeglądarki. Stara, sprawdzona metoda opiera się na określonych atrybutach prezentacji. To działa. To jest proste i jasne. Nie potrzebujesz skomplikowanych frameworków CSS, aby uzyskać przyzwoity układ.
Zmiana koloru tła tabeli
Zacznij od widoku ogólnego. Chcesz, żeby cała siatka się wyróżniała? Nie potrzebujesz osobnego arkusza stylów. Po prostu dodaj atrybut bgcolor do otwierającego tagu
.
Przykład:
To wyznacza scenę. Każda komórka dziedziczy ten styl, chyba że go zastąpisz.
Możesz także drążyć. Pokoloruj pojedynczy wiersz lub określoną komórkę. Dodaj bgcolor="color" do znacznika
lub
| .
Przykład:
|
To jest mały szczegół. Ale zmienia sposób, w jaki oko postrzega dane.
Rozmiar tabeli
Przeglądarki domyślnie są leniwe. Rozszerzają wiersze i kolumny, aby pomieścić zawartość. Jeśli dane są krótkie, tabela rozciąga się, aby wypełnić okno. Jeśli dane są długie, tabela staje się długa.
Czasami potrzebujesz kontroli. Chcesz stałych rozmiarów.
Dodaj szerokość i wysokość do początkowego tagu
. Możesz użyć pikseli lub wartości procentowych.
Przykład:
Piksele zapewniają ścisłe ograniczenia. Procenty pozwalają tabeli dostosować się do rozmiaru rzutni. Wybór opcji zależy od celów projektowych.
Można także ustawić wymiary poszczególnych komórek. Dodaj width="value" do tagu
lub
| . Zastępuje to globalne ustawienie specyficzne dla lokalizacji.
Eksperyment. Wypróbuj wartość piksela. Następnie wypróbuj wartość procentową. Zobacz, jak to działa lub psuje się na różnych ekranach.
Wewnętrzna wyściółka (Cellpadding)
Przestrzeń jest częścią projektu. W szczególności odstęp między krawędzią komórki a tekstem w niej zawartym.
To jest „cellpadding”. Przyjmuje wartość w pikselach.
Użyj go w tagu początkowym
.
Przykład 1:
Przykład 2:
Pięć pikseli to mało. Piętnastka jest przestronna. Treść wydaje się inna. Wygląda czyściej i ma więcej wcięć.
Zewnętrzne wypełnienie (odstępy między komórkami)
Następnie pomiędzy komórkami powstaje przerwa.
To jest „odstęp między komórkami”. Akceptuje również wartość w pikselach.
Dodaj go do tagu
.
Przykład 1:
Przykład 2:
Niewielki „odstęp między komórkami” powoduje, że siatka jest ciaśniejsza. Duże odstępy między komórkami tworzą wygląd przypominający listę zadań.
Nagłówki tabel
Struktura potrzeb danych. Nagłówki zapewniają tę strukturę.
Aby wyróżnić kolumnę lub wiersz jako nagłówek, zamień
na
| w pierwszym wierszu.
Tekst automatycznie staje się pogrubiony i wyśrodkowany.
Przykład:
| Kolumna 1 |
Kolumna 2 |
| A |
B |
| C |
| | | |
