Table render in MD : center horizontal + no lines issues

support
1

I am on last 0.120.2 Hugo version, I try to make readable table in MD.
I read the doc of MD on : Extended Syntax | Markdown Guide
I use the Ananke theme.

but :

  • I get no lines (horizontal & vertical)
  • the horizontal center is in standard , so it is difficult to read from one column to the last :

See Example of table rendered :

Capture d’écran_2023-11-02_07-06-11
Capture d’écran_2023-11-02_07-06-11740×512 29.2 KB

it is difficult to read what is about “Datalogic” or “Unitech” (I put “-” on fist caracter to be able to seeand added some empty lines but no relevant result)

The MD code is :

| Constructeur | Modèle bague de scan | Caractéristiques                                                                                                                                                                                                                                                                         |
| ------------ | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Cipherlab    | WR30                 | - bague Bluetooth durcie                                                                                                                                                                                                                                                                 |
|              |
| Datalogic    | HandScanner HS7500   | - lit du 1D et 2D, relié au terminal par Bluetooth BLE, le plus petit du marché à Nov 2020 - 2 distances: voir ci-dessous                                                                                                                                                                |
|              |
| Honeywell    | 8620                 | - lit du 1D et 2D du bout des doigts et est relié au terminal par un fil                                                                                                                                                                                                                 |
|              |
| Honeywell    | 8670                 | -lit du 1D et 2D du bout des doigts et est relié au terminal SANS fil (BT)                                                                                                                                                                                                               |
| Unitech      | MS652+               | - 1D, 2D, appairage BT (classic v2.1+BLE 4.2) + NFC, IP42, montage 2 doigts, compatible toutes tablettes Android >=5 et iOS, batterie 13h                                                                                                                                                |

Can you please help me or add a better MD render in next versions of Hugo ?
thanks

2

Borders for tables are defined in CSS, afaik

3

Yes, but we are in MD Files writing part of a web site not in program part … as afaik of tables in MD (see the link I put), borders should render in standard .

4

The “borders” (pipes) in md is the way you mark text that should belong into a table. This is not responsible to generate lines in your HTML page.

The whole formatting of the resulting HTML table (with the exception of alignment) is done by CSS of your used theme. See The table does not have any styles · Issue #616 · theNewDynamic/gohugo-theme-ananke · GitHub

5

Your expectations are not correct. HTML has delegated all table styling long ago to CSS. Which no MD processor creates, regardless of Hugo.
The link you posted describes the issue at best overly simplified, at worst incorrectly.

6

ok thank you all : the link I had is maybe not a reference.
So to have borders in my tables, I need to integrate custom css.

My conception issue stays as the MD File is a “.content” in the html layout of the Theme, and I cannot imagine how to add a table (with its style) in the middle of the text.
Do you know some example of solving a similar problem please ?

7

You add the table where you want and you provide the CSS to style it where your theme can find it.
I suggest to head over to Mozilla Developer Network for details on styling tables.

8

Thank you @chrillek ! It works !
So to summarize for others who may need same solution :

  • in your .MD file write your table with “|” and ‘-’ : you will see with “inspect” of your brower the “table” style called in the html code.
  • add a file custom.css under assets/ananke/css if you have Ananke theme
  • put inside this new css file styles adjusted from Styling tables - Learn web development | MDN
    that 's it !
    (easy in fact when you know how)
9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.