Markdown Issues

[nofue]

I'm trying to create a card showing a list of names. Without any bullets or asterisks, just like what's in the screenshot.

I tried this with markup, but there's no way to split lines in SQLPage. What I tried:

Two spaces after the item to break the line - nope
Using HTML <br> / <br/> bto break the line - nope
Using a backslash to break the line - nope
Also tried to make this a table, using | on either side of the line -- but: nope.

As I cannot put a list within a card as with Bootstrap, I'm wondering how to achieve this with SQLPage?

[lovasoa]

I think you may have forgotten or incorrectly formatted some newlines in your sql...

The only cross-database universally supported way to write a newline in a string in sql is to include a literal newline in a string literal:

select '
' as this_is_a_newline;

You can always look at the page source when markdown fails to render, the error usually becomes obvious.

drop table if exists people;
CREATE TEMP TABLE people (
  last_name   VARCHAR(100) NOT NULL,
  first_name  VARCHAR(100) NOT NULL,
  profile_url VARCHAR(255) NOT NULL
);

INSERT INTO people (last_name, first_name, profile_url) VALUES
  ('Neumann',    'Johann', 'https://www.beispielverein.at/personen/neumann-johann'),
  ('Moser',      'Klaus',  'https://www.beispielverein.at/personen/moser-klaus'),
  ('Staud',      'Erich',  'https://www.beispielverein.at/personen/staud-erich'),
  ('Mayer',      'Julian', 'https://www.beispielverein.at/personen/mayer-julian'),
  ('Gsellmann',  'Roland', 'https://www.beispielverein.at/personen/gsellmann-roland'),
  ('Loidl',      'Josef',  'https://www.beispielverein.at/personen/loidl-josef'),
  ('Wimberger',  'Gerald', 'https://www.beispielverein.at/personen/wimberger-gerald'),
  ('Christandl', 'Harald', 'https://www.beispielverein.at/personen/christandl-harald'),
  ('Poms',       'Josef',  'https://www.beispielverein.at/personen/poms-josef'),
  ('Stübler',    'Franz',  'https://www.beispielverein.at/personen/stuebler-franz');

select 'shell' as component, 'markdown_table.css' as css;
select 'text' as component,
    '
| Last name | First name |
| ---- | ---- |
' ||
    group_concat(
        '| [' || last_name|| '](' || profile_url || ') | ' || first_name || ' |',
        '
'
    ) as contents_md
from people;

and some slop llm css to match your screenshot style if you want:

/* Apply to ALL tables by default */
table {
  width: 100%;
  border-collapse: separate;     /* needed for row "cards" */
  border-spacing: 0;
  background: transparent;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #1f2937;                /* dark gray text */
}

/* Optional outer "card" look (like the screenshot container) */
table {
  border: 1px solid #d6d9de;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

/* Header row: tall, uppercase, subtle */
table thead th {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 0.95rem;
  color: #111827;
  padding: 18px 20px;
  text-align: left;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

/* Body cells: roomy rows with light separators */
table tbody td,
table tbody th {
  padding: 18px 20px;
  font-size: 1.25rem;            /* large like screenshot */
  line-height: 1.2;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

/* Make each row look slightly "striped" via subtle gray background */
table tbody tr:nth-child(odd) td,
table tbody tr:nth-child(odd) th {
  background: #f3f4f6;
}

/* Remove border on last row */
table tbody tr:last-child td,
table tbody tr:last-child th {
  border-bottom: 0;
}

/* Links: dark navy, bold, underlined */
table a {
  color: #1f3b6d;
  text-decoration: underline;
  font-weight: 700;
}

/* Hover states: gentle highlight; link gets a tad darker */
table tbody tr:hover td,
table tbody tr:hover th {
  background: #eef2f7;
}
table a:hover {
  color: #162a4e;
}

/* Keep first column (often link/name) visually prominent */
table tbody td:first-child,
table tbody th:first-child {
  font-weight: 700;
}

/* Right column aligns like screenshot (names start left, not right) */
table tbody td:last-child {
  text-align: left;
}

/* Nice focus ring for accessibility */
table a:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Responsive: reduce font size/padding on small screens */
@media (max-width: 480px) {
  table thead th {
    padding: 14px 14px;
    font-size: 0.85rem;
  }
  table tbody td,
  table tbody th {
    padding: 14px 14px;
    font-size: 1.05rem;
  }
}

[nofue]

Thanks for taking the time to elaborate -- but you are completely missing my question.

Markdown is defined to allow for newline using either a backslash or two spaces at the end of the line.
Obviously, SQLPage doesn't honor these specs. I perfectly know how to create nice looking tables using CSS -- I've done this since 1997. However, I wasn't asking for "how can I put my records into a table", but how to use the card component of SQLPage to display SEVERAL tables side by side in an orderly way.

It's not about fetching data into a table, but how to get lists into columns, following the simple "one line per person" approach (without any bullets, asterisks, etc. as markdown requires).

This is the context of this request -- all you have seen was the leftmost card.

I can't figure how to make this happen using existing components. If there is no way to use existing components, I may rather use a different approach, and I'm very sure that this will not be writing an extension to SQL Page.

[lovasoa]

The example above explains how to create a markdown table in sql. You can use these tables anywhere, including in the card component.

I think you may be confused about what markdown tables are.

Markdown is not "defined to allow for newline using either a backslash or two spaces at the end of the line". SQLPage implements the full GFM spec, you can find it here: https://github.github.com/gfm/ (see the section about blank lines, paragraphs, and tables).