Utwórz tabelę bez nagłówka w Markdown

141

Czy w Markdown można utworzyć tabelę bez nagłówka?

Kod HTML wyglądałby następująco:

<table>
<tr>
    <td>Key 1</td>
    <td>Value 1</td>
</tr>
<tr>
    <td>Key 2</td>
    <td>Value 2</td>
</tr>
</table>
adius
źródło

Odpowiedzi:

92

Większość parserów Markdown nie obsługuje tabel bez nagłówków. Oznacza to, że linia oddzielająca dla nagłówków jest obowiązkowa.

Parsery, które nie obsługują tabel bez nagłówków

Parsery że zrobić tabele wsparcia bez nagłówków.

Rozwiązanie CSS

Jeśli jesteś w stanie zmienić CSS wyniku HTML, możesz jednak wykorzystać :emptypseudoklasę, aby ukryć pusty nagłówek i sprawić, by wyglądał, jakby w ogóle go nie było.

adius
źródło
28
Parser Githuba mógłby zostać dodany do listy tych, które go nie obsługują.
Quantum7
80

Jeśli nie masz nic przeciwko marnowaniu linii, pozostawiając ją pustą, rozważ następujący hack (jest to hack i używaj go tylko wtedy, gdy nie lubisz dodawać żadnych dodatkowych wtyczek).

| | | |
|-|-|-|
|__Bold Key__| Value1 |
| Normal Key | Value2 |

Aby zobaczyć, jak może wyglądać powyższe, skopiuj powyższe i odwiedź https://stackedit.io/editor

To pracował z GitLab / GitHub „s Przecena wdrożeń.

Thamme Gowda
źródło
1
Z jaką implementacją to działa? Nie działa z Perl's Text :: MultiMarkdown, ale myślę, że może działać z niektórymi implementacjami PHP MultiMarkdown.
RedGrittyBrick
2
Działa z implementacjami przecen gitlab / github. Nie jestem pewien co do tekstu Perla :: MultiMarkdown
Thamme Gowda
8
Spowoduje to utworzenie pustego nagłówka tabeli i pustego wiersza.
Gajus
To faktycznie działa świetnie z pandocprzecenami do pdf.
Alex Baranowski
Dzięki! Działa to również z przecenami Laravel 5.8 (multi). Żadne nagłówki nie są widoczne - tylko linia. Wygląda na separator, który można usunąć za pomocą kodu CSS w motywie.
user2966991
17

Udało mi się to współpracować z Markdown Bitbucket, używając pustego linku:

[]()  | 
------|------
Row 1 | row 2
Stuart Campbell
źródło
2
Wyświetla również pusty wiersz nagłówka. Przynajmniej jest to tylko połowa wysokości normalnej linii. Pracował dla mnie również jako Hack na
githubie
Ten hack zadziałał dla mnie podczas pisania dokumentacji w Bezsenności. Nadal tworzy linię nagłówka, ale jest dużo krótsza niż gdybym wstawił tam tekst. Dzięki!
jkmartindale
Znakomity! Nadal widzę małą pionową przestrzeń z Github Markdown, ale jest lepiej niż wcześniej.
Keith Bennett
15

Uniwersalne rozwiązanie

Wiele sugestii niestety nie działa dla wszystkich przeglądarek / redaktorów Markdown, na przykład popularne rozszerzenie Markdown Viewer Chrome, ale działają one z iA Writer .

To, co wydaje się działać w obu tych popularnych programach (i może działać w przypadku Twojej konkretnej aplikacji), to użycie HTML comment blocks ('<!-- -->'):

| <!-- -->    | <!-- -->    |
|-------------|-------------|
| Foo         | Bar         |

Podobnie jak niektóre z wcześniej wymienionych sugestii, powoduje to dodanie pustego wiersza nagłówka w przeglądarce / edytorze Markdown. W iA Writer jest estetycznie na tyle mały, że nie przeszkadza mi zbytnio.

Tony Barganski
źródło
To całkowicie eliminuje sens używania Markdown, ponieważ gdy jest wyświetlany jako tekst, komentarze zostaną usunięte, a kolumny nie będą już nawet wyrównane.
hackel
Myślę, że @hackel jest źle zrozumiany. Nie powoduje to wyrównania kolumn przy użyciu stałych szerokości. Raczej daje to dobre obejście, mając prawidłowe, ale puste nagłówki kolumn. W mojej sytuacji było to świetne obejście. Tabela nadal renderowana zgodnie z zamierzeniami / oczekiwaniami; po prostu nie miał wiersza nagłówka.
mdahlman
8

Poniższe działa dobrze dla mnie w GitHub. Pierwszy wiersz nie jest już pogrubiony, ponieważ nie jest nagłówkiem:

<table align="center">
    <tr>
        <td align="center"><img src="docs/img1.png?raw=true" alt="some text"></td>
        <td align="center">Some other text</td>
        <td align="center">More text</td>
    </tr>
    <tr>
        <td align="center"><img src="docs/img2.png?raw=true" alt="some text"></td>
        <td align="center">Some other text 2</td>
        <td align="center">More text 2</td>
    </tr>
</table>

Sprawdź przykładową tabelę HTML bez nagłówka tutaj .

Daniel
źródło
5
To jest właśnie to, czego pytający powiedział, że nie chce.
Neil Mayhew,
Wydaje się, że tabele HTML nie działają w Bitbucket ( community.atlassian.com/t5/Bitbucket-questions/… ) - wyświetla sam HTML zamiast renderować tabelę.
jsaven
7

Pominięcie nagłówka nad dzielnikiem tworzy tabelę bez nagłówka w przynajmniej Perl Text :: MultiMarkdown i FletcherPenney MultiMarkdown

|-------------|--------|
|**Name:**    |John Doe|
|**Position:**|CEO     |

Zobacz prośbę o funkcję PHP Markdown


Puste nagłówki w PHP Parsedown tworzą tabele z pustymi nagłówkami, które są zwykle niewidoczne (w zależności od twojego CSS) i dlatego wyglądają jak tabele bez nagłówków.

|     |     |
|-----|-----|
|Foo  |37   |
|Bar  |101  |
RedGrittyBrick
źródło
Jeśli chodzi o użycie Parsedown, właściwie nagłówek wciąż tu jest, po prostu sprawdź HTML. Jeśli masz dopełnienie CSS na komórkach, zobaczysz komórki nagłówka. Ale myślę, że table th:empty { padding: 0; }to by to rozwiązało.
AymDev
6

Przynajmniej w przypadku GitHub Flavored Markdown możesz dać złudzenie, pogrubiając wszystkie wpisy wiersza niebędące nagłówkami za pomocą zwykłego __lub **formatowania:

|Regular | text | in header | turns bold |
|-|-|-|-|
| __So__ | __bold__ | __all__ | __table entries__ |
| __and__ | __it looks__ | __like a__ | __"headerless table"__ |
TT--
źródło
Szukałem czegoś, co działałoby w GFM, a ten hack jest kreatywny!
Mrchief
3
$ cat foo.md
Key 1 | Value 1
Key 2 | Value 2
$ kramdown foo.md
<table>
  <tbody>
    <tr>
      <td>Key 1</td>
      <td>Value 1</td>
    </tr>
    <tr>
      <td>Key 2</td>
      <td>Value 2</td>
    </tr>
  </tbody>
</table>
Steven Penny
źródło
Wydaje się, że to nie działa z github.com/chjj/marked . Czy istnieje odniesienie, w którym mogę sprawdzić, czy jest to nawet oczekiwane zachowanie?
adius
@AdrianSieber Używam Kramdown, o innym nie mogę mówić.
Steven Penny
2

Możesz ukryć nagłówek, jeśli możesz dodać następujący CSS:

<style>
    th {
        display: none;
    }
</style>

Jest to trochę uciążliwe i nie rozróżnia stołów, ale może wystarczyć do prostego zadania.

Manngo
źródło
Jedyna sztuczka CSS, która działa dla mnie z jakiegoś powodu (używam VNote z rendererem Markdown-it). Żadne z podanych tutaj rozwiązań: stackoverflow.com/questions/12023771/hide-empty-cells-in-table nie zadziałało.
co
1

Używam <span>w nagłówku pierwszej kolumny:

 <span> |
---     |    ---
Value   |  Value
Value   |  Value

Tworzy pusty nagłówek z obramowaniem, ale o 1/2 rozmiaru.

Long-John Silver
źródło
0

Rozwiązanie @ thamme-gowda działa również w przypadku obrazów!

| | |:----------------------------------------------------------------------------:| | ![](https://gravatar.com/avatar/4cc702785290b4934c531c56f6061e5e "Tonejito") |

Możesz to sprawdzić w podsumowaniu, które zrobiłem dla tego . Oto renderowanie hackowania tabeli na GitHub i GitLab:

tonejito
źródło