Dostępny generator tabel HTML: CSV do HTML z podpisem | We.Inc
Wklej CSV lub zacznij od cennika albo godzin otwarcia. Otrzymasz prawdziwą tabelę HTML z podpisem, komórkami nagłówka i scope, bezpiecznie zabezpieczoną, plus mały responsywny blok CSS do skopiowania.
Wklej wiersze z arkusza kalkulacyjnego lub CSV albo zacznij od gotowego cennika usług lub godzin otwarcia. Otrzymasz właściwą tabelę HTML z podpisem, komórkami nagłówka i atrybutami scope, których używają czytniki ekranu, oraz krótki blok CSS, który zachowuje czytelność na telefonach. Każda wartość jest zabezpieczona, więc wklejony tekst nie może zepsuć Twojej strony. Wszystko działa w Twojej przeglądarce. Nic, co wpiszesz, nie jest wysyłane do We.Inc ani nikogo innego i znika po zamknięciu karty.
Wybierz gotowy szablon lub wklej własne wiersze. Przecinki, tabulatory (z arkusza kalkulacyjnego) i średniki działają, a wartości w cudzysłowie z przecinkami w środku pozostają razem.
Wybierz, czy pierwszy wiersz zawiera nagłówki kolumn i czy pierwsza kolumna opisuje każdy wiersz. Stają się komórkami th z atrybutami scope.
Napisz podpis. Nazywa tabelę dla użytkowników czytników ekranu i jest widoczny nad nią dla wszystkich.
Wybierz styl i obejrzyj podgląd w szerokości komputera i telefonu. Szerokie tabele przewijają się na boki wewnątrz własnego pola na małych ekranach, zamiast się ściskać.
Skopiuj HTML i CSS albo pobierz oba jako jeden plik.
Używaj tabeli tylko do danych z wierszami i kolumnami, jak ceny czy godziny. Do układu strony używaj CSS.
Utrzymuj nagłówki krótkie. Powtarzają się w każdym komunikacie czytnika ekranu.
Umieść jednostki w nagłówku (Cena, USD) zamiast w każdej komórce.
Nie łącz komórek, chyba że musisz. Połączone komórki trudno śledzić za pomocą czytnika ekranu.
Sprawdź tabelę w szerokości telefonu. Jeśli wymaga więcej niż jednego przesunięcia na bok, rozważ jej podział.
Najczęściej zadawane pytania
Co sprawia, że tabela HTML jest dostępna?
Podpis, który ją nazywa, komórki nagłówka th dla nagłówków kolumn i wierszy oraz atrybuty scope mówiące, czy nagłówek należy do kolumny, czy do wiersza. Czytniki ekranu używają ich, aby ogłosić, do którego nagłówka należy każda wartość. Ten generator dodaje wszystkie trzy.
Dlaczego nie zbudować tabeli z div-ów?
Siatka div-ów może wyglądać jak tabela, ale technologie asystujące nie potrafią stwierdzić, która komórka należy do którego nagłówka. Prawdziwy element tabeli niesie to znaczenie za darmo.
Jak obsługiwana jest responsywna tabela?
Tabela znajduje się w polu, które przewija się na boki na wąskich ekranach. Pole jest fokusowalne i opisane podpisem, więc użytkownicy klawiatury też mogą je przewijać.
Czy moje dane są zabezpieczane?
Tak. Znaki ampersand, nawiasy ostre i cudzysłowy w komórkach są zamieniane na encje HTML, więc komórka zawierająca <script> wyświetla się jako tekst, zamiast się uruchomić.
Czy mogę wkleić prosto z Excela lub Arkuszy Google?
Tak. Skopiowane komórki docierają oddzielone tabulatorami, które narzędzie wykrywa automatycznie.
Czy to jest darmowe?
Tak, bez rejestracji. Działa w Twojej przeglądarce.
Cenniki i godziny otwarcia to tabele
Większość stron małych firm ma co najmniej dwie tabele: ile co kosztuje i kiedy jesteś otwarty. Obie to prawdziwe dane tabelaryczne, więc powinny być oznaczone jako tabele, z każdą ceną powiązaną z usługą i każdą godziną powiązaną z dniem.
Gotowe szablony tutaj zaczynają od tych dwóch kształtów. Zastąp przykładowe wiersze własnymi, zanim opublikujesz; to wartości przykładowe, a nie prawdziwe ceny.