ViewCSVOtwórz lub wklej plik CSV, a dostaniesz element <table> z sekcją <thead> zawierającą nagłówki <th scope="col"> i po jednym <tr> na każdy wiersz – albo kompletną stronę HTML, którą otworzysz bezpośrednio. Każda wartość jest zabezpieczana (escapowana), więc <script> czy & w Twoich danych wyświetlają się jako tekst i nigdy nie stają się kodem. Plik jest konwertowany w Twojej przeglądarce i nigdy nie jest wysyłany na serwer.
Jak przekonwertować CSV do HTML
- Kliknij Otwórz plik, upuść plik
.csv,.tsvlub.txtna narzędzie albo wybierz Wklej. Jeśli kolumny wyglądają nieprawidłowo, popraw ogranicznik lub kodowanie w sekcji Ustawienia importu. - W polu Wynik wybierz Tylko tabela, aby wkleić kod do istniejącej strony lub systemu CMS, albo Kompletna strona HTML, aby uzyskać samodzielny plik.
- Dodaj Podpis (opcjonalnie), zdecyduj o stylach i podziałach wiersza, a potem kliknij Kopiuj lub Pobierz HTML.
Do README lub wiki zwykle łatwiej edytować tabelę Markdown, a plik do wydruku utworzysz narzędziem CSV do PDF.
Co robi każda opcja
| Tylko tabela | Ustawienie domyślne. Sam element <table>, gotowy do wklejenia na stronę, do szablonu e-maila lub do bloku HTML w systemie CMS. |
|---|---|
| Kompletna strona HTML | Dodaje <!doctype html>, <html lang="en"> (na polskiej stronie z atrybutem lang="pl"), <meta charset="utf-8"> i <title> (podpis albo – jeśli go nie ma – Table), dzięki czemu plik otwiera się poprawnie w każdej przeglądarce. |
| Podpis (opcjonalnie) | Zapisuje element <caption> jako pierwsze dziecko tabeli: to dostępna nazwa, którą czytniki ekranu odczytują dla tabeli. |
| Dodaj proste style | Domyślnie włączone. Na kompletnej stronie osadza mały arkusz stylów: obramowania, cieniowany wiersz nagłówka i liczby wyrównane do prawej. Przy opcji Tylko tabela zamiast tego dodaje class="csv-table" do tabeli i class="num" do komórek z liczbami, aby wygląd określał Twój własny CSS. |
| Pokazuj podziały wierszy w komórkach | Domyślnie włączone. Podział wiersza wewnątrz wartości staje się znacznikiem <br>. Po wyłączeniu podział zostaje w kodzie źródłowym, gdzie przeglądarki wyświetlają go jako spację. |
Jak traktowane są nietypowe dane
- Znaki
&,<,>,"i'są zapisywane jako&,<,>,"i'w każdej komórce, nagłówku i podpisie. Znaczniki w Twoich danych wyświetlają się jako tekst, co oznacza też, że istniejący kod HTML z pliku CSV nie jest renderowany. - Każda komórka ma atrybut
dir="auto", więc wartości arabskie czy hebrajskie wyświetlają się od prawej do lewej nawet na stronie pisanej od lewej do prawej. - Kolumna jest uznawana za liczbową tylko wtedy, gdy każda niepusta wartość jest zwykłą liczbą; kolumna identyfikatorów, np.
0042, pozostaje tekstem i nie jest wyrównywana do prawej. Same wartości nigdy nie są formatowane od nowa. - Przecinki, cudzysłowy i podziały wiersza w cudzysłowie są odczytywane zgodnie z RFC 4180. Pusty nagłówek staje się
Column 3, a powtórzony –name (2). - Wynik jest zapisany w UTF-8. Kompletna strona deklaruje to znacznikiem
<meta charset="utf-8">; gdy wklejasz Tylko tabela do innej strony, ona również musi używać UTF-8.
Rozwiązywanie problemów
- Polskie znaki wyglądają w pliku źródłowym jak é lub podobne. Plik CSV nie jest zapisany w UTF-8. Wybierz jego kodowanie w ustawieniach importu (dla starszych eksportów z polskiego Excela często Windows-1250) i otwórz plik ponownie.
- Znaczniki z moich danych wyświetlają się jako tekst. Kod HTML w komórkach został celowo zabezpieczony, aby nie mógł działać jako kod strony. Jeśli ufasz tej treści i chcesz, by była renderowana, zmień wynik ręcznie.
- Wklejona tabela nie ma obramowań. Opcja Tylko tabela dodaje (przy włączonych stylach) nazwy klas, a nie CSS. Ostyluj
.csv-tableitd.numw arkuszu stylów swojej witryny albo wybierz Kompletna strona HTML, aby dostać wbudowane style. - Wszystkie wartości są w jednej kolumnie. Ogranicznik został źle rozpoznany; ustaw go w ustawieniach importu.
Limity i prywatność
Pliki do 25 MB, 100 000 wierszy lub 2 mln komórek otwierają się z podglądem pierwszych 200 wierszy na żywo. Większe pliki są konwertowane strumieniowo: plik jest odczytywany dwukrotnie we fragmentach (raz, aby zmierzyć kolumny i ustalić, które są liczbowe, i drugi raz, aby zapisać wynik), komunikat informuje, że pobrany plik obejmuje całość, a przycisk Kopiuj nie jest dostępny. Pojedynczy plik wynikowy może mieć najwyżej 4 GB.
Konwersja odbywa się w tle w tej karcie, więc strona cały czas reaguje, a Anuluj przerywa pracę. Plik CSV nigdy nie jest wysyłany na serwer.
Przykład
Lista zamówień ze znakiem &, apostrofem, cudzysłowami i kodem HTML w dwuwierszowym komentarzu, przekonwertowana z ustawieniami domyślnymi (Tylko tabela, ze stylami, z podziałami wiersza). Kolumna qty zawiera same liczby, więc jej komórki dostają class="num".
id,product,qty,comment 0042,Fish & Chips,2,"<b>Extra</b> vinegar no salt" 0043,"O'Brien's ""Stout""",12,
<table class="csv-table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">product</th>
<th scope="col">qty</th>
<th scope="col">comment</th>
</tr>
</thead>
<tbody>
<tr>
<td dir="auto">0042</td>
<td dir="auto">Fish & Chips</td>
<td class="num" dir="auto">2</td>
<td dir="auto"><b>Extra</b> vinegar<br>no salt</td>
</tr>
<tr>
<td dir="auto">0043</td>
<td dir="auto">O'Brien's "Stout"</td>
<td class="num" dir="auto">12</td>
<td dir="auto"></td>
</tr>
</tbody>
</table>Pytania i odpowiedzi
Czy wklejenie wyniku na moją stronę jest bezpieczne?
Dane nie mogą wstrzyknąć kodu: każda wartość, nagłówek i podpis są zabezpieczane jako encje HTML, a żadna wartość nigdy nie trafia do atrybutu. Jedyne znaczniki w wyniku to elementy tabeli, które konwerter zapisuje sam.
Dlaczego strona ma atrybut lang="pl"?
Kompletna strona przejmuje znacznik języka z języka serwisu, z którego korzystasz – w wersji angielskiej byłoby to lang="en". Jeśli Twoje dane są w innym języku, po pobraniu zmień atrybut lang.
Czy mogę sortować lub filtrować tabelę HTML?
Wynik to statyczna tabela bez skryptów. Najpierw posortuj lub przefiltruj dane w narzędziu Sortowanie CSV lub Filtrowanie wierszy CSV, a potem je przekonwertuj.