Skip to content

Commit 8fa3774

Browse files
committed
docs
1 parent 1d33734 commit 8fa3774

File tree

2 files changed

+353
-1
lines changed

2 files changed

+353
-1
lines changed

docs/authoring/tables.qmd

Lines changed: 351 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -353,7 +353,15 @@ tibble::tribble(
353353

354354
## Grid Tables
355355

356-
Grid tables are a more advanced type of markdown tables that allow arbitrary block elements (multiple paragraphs, code blocks, lists, etc.). For example:
356+
Grid tables are a more advanced type of markdown tables that allow arbitrary block elements (multiple paragraphs, code blocks, lists, etc.).
357+
358+
::: {.callout-tip}
359+
## Consider List Tables
360+
361+
While grid tables are fully supported, [List Tables](#list-tables) provide an easier-to-maintain alternative with the same capabilities. List tables are easier to edit in plain text and produce cleaner diffs in version control.
362+
:::
363+
364+
For example:
357365

358366

359367
``` markdown
@@ -427,6 +435,348 @@ Note that grid tables are quite awkward to write with a plain text editor (becau
427435
- Quarto [Visual Editor](/docs/visual-editor/content.qmd#editing-tables)
428436
- Tables Generator's [Plain Text mode](https://www.tablesgenerator.com/text_tables) with `Use reStructuredText syntax` enabled
429437

438+
## List Tables
439+
440+
List tables provide an easier-to-maintain alternative to grid tables, using a ReStructuredText-inspired syntax based on nested lists. They support the same advanced features as grid tables (arbitrary block elements, multiple paragraphs, code blocks, lists, etc.) while being much easier to edit in a plain text editor.
441+
442+
::: {.callout-note}
443+
List table syntax was originally developed by [Martin Fischer](https://github.com/pushshift) with contributions from [Albert Krewinkel](https://github.com/tarleb) and [William Lupton](https://github.com/wlupton).
444+
:::
445+
446+
### Basic Syntax
447+
448+
List tables use a fenced div with the `.list-table` class. Each list item represents a row, and nested list items within represent cells:
449+
450+
::: {layout-ncol="2"}
451+
452+
:::: {}
453+
454+
``` markdown
455+
::: {.list-table}
456+
457+
* - Row 1, Col 1
458+
- Row 1, Col 2
459+
- Row 1, Col 3
460+
461+
* - Row 2, Col 1
462+
- Row 2, Col 2
463+
- Row 2, Col 3
464+
465+
:::
466+
```
467+
468+
::::
469+
470+
:::: {}
471+
472+
::: {.list-table}
473+
474+
* - Row 1, Col 1
475+
- Row 1, Col 2
476+
- Row 1, Col 3
477+
478+
* - Row 2, Col 1
479+
- Row 2, Col 2
480+
- Row 2, Col 3
481+
482+
:::
483+
484+
::::
485+
486+
:::
487+
488+
### Captions
489+
490+
To add a caption to your list table, include text at the beginning of the div, before the list:
491+
492+
::: {layout-ncol="2"}
493+
494+
:::: {}
495+
496+
``` markdown
497+
::: {.list-table}
498+
499+
Sample list table.
500+
501+
* - Fruit
502+
- Price
503+
504+
* - Apple
505+
- $1.50
506+
507+
* - Orange
508+
- $2.00
509+
510+
:::
511+
```
512+
513+
::::
514+
515+
:::: {}
516+
517+
::: {.list-table}
518+
519+
Sample list table.
520+
521+
* - Fruit
522+
- Price
523+
524+
* - Apple
525+
- $1.50
526+
527+
* - Orange
528+
- $2.00
529+
530+
:::
531+
532+
::::
533+
534+
:::
535+
536+
### Column Configuration
537+
538+
You can configure column alignment, widths, and headers using attributes:
539+
540+
#### Column Alignments
541+
542+
Use the `aligns` attribute to specify alignment for each column. Values are: `l` (left), `c` (center), `r` (right), or `d` (default):
543+
544+
::: {layout-ncol="2"}
545+
546+
:::: {}
547+
548+
``` markdown
549+
::: {.list-table aligns="l,r,c"}
550+
551+
* - Left
552+
- Right
553+
- Center
554+
555+
* - Text
556+
- 123
557+
- More
558+
559+
:::
560+
```
561+
562+
::::
563+
564+
:::: {}
565+
566+
::: {.list-table aligns="l,r,c"}
567+
568+
* - Left
569+
- Right
570+
- Center
571+
572+
* - Text
573+
- 123
574+
- More
575+
576+
:::
577+
578+
::::
579+
580+
:::
581+
582+
#### Column Widths
583+
584+
Use the `widths` attribute to specify relative column widths:
585+
586+
::: {layout-ncol="2"}
587+
588+
:::: {}
589+
590+
``` markdown
591+
::: {.list-table widths="0.7,0.3"}
592+
593+
* - Wide column
594+
- Narrow
595+
596+
* - More content here
597+
- Less
598+
599+
:::
600+
```
601+
602+
::::
603+
604+
:::: {}
605+
606+
::: {.list-table widths="0.7,0.3"}
607+
608+
* - Wide column
609+
- Narrow
610+
611+
* - More content here
612+
- Less
613+
614+
:::
615+
616+
::::
617+
618+
:::
619+
620+
#### Header Rows and Columns
621+
622+
Use `header-rows` and `header-cols` to specify how many rows/columns should be treated as headers:
623+
624+
::: {layout-ncol="2"}
625+
626+
:::: {}
627+
628+
``` markdown
629+
::: {.list-table header-rows="1"}
630+
631+
* - Name
632+
- Value
633+
634+
* - Item 1
635+
- 100
636+
637+
* - Item 2
638+
- 200
639+
640+
:::
641+
```
642+
643+
::::
644+
645+
:::: {}
646+
647+
::: {.list-table header-rows="1"}
648+
649+
* - Name
650+
- Value
651+
652+
* - Item 1
653+
- 100
654+
655+
* - Item 2
656+
- 200
657+
658+
:::
659+
660+
::::
661+
662+
:::
663+
664+
### Advanced Features
665+
666+
List tables support the same advanced features as grid tables:
667+
668+
#### Multiple Paragraphs and Lists
669+
670+
Cells can contain multiple paragraphs, lists, and other block elements:
671+
672+
::: {layout-ncol="2"}
673+
674+
:::: {}
675+
676+
::: {.list-table header-rows="1"}
677+
678+
Example of complex content in cells.
679+
680+
* - Feature
681+
- Description
682+
683+
* - Multi-paragraph
684+
685+
- First paragraph of content.
686+
687+
Second paragraph of content.
688+
689+
* - Lists
690+
691+
- Features:
692+
693+
- Easy to read
694+
- Easy to maintain
695+
- Flexible syntax
696+
697+
:::
698+
699+
::::
700+
701+
:::: {}
702+
703+
````markdown
704+
::: {.list-table header-rows="1"}
705+
706+
Example of complex content in cells.
707+
708+
* - Feature
709+
- Description
710+
711+
* - Multi-paragraph
712+
713+
- First paragraph of content.
714+
715+
Second paragraph of content.
716+
717+
* - Lists
718+
719+
- Features:
720+
721+
- Easy to read
722+
- Easy to maintain
723+
- Flexible syntax
724+
725+
:::
726+
````
727+
728+
::::
729+
730+
:::
731+
732+
#### Cell Spanning
733+
734+
Use `colspan` and `rowspan` attributes on empty list items to merge cells:
735+
736+
::: {layout-ncol="2"}
737+
738+
::: {}
739+
740+
::: {.list-table header-rows="1"}
741+
742+
* - Name
743+
- Details
744+
- Notes
745+
746+
* - Product A
747+
- []{colspan="2"} This cell spans two columns
748+
749+
* - Product B
750+
- Info
751+
- More info
752+
753+
:::
754+
755+
:::
756+
757+
::: {}
758+
759+
````markdown
760+
::: {.list-table header-rows="1"}
761+
762+
* - Name
763+
- Details
764+
- Notes
765+
766+
* - Product A
767+
- []{colspan="2"} This cell spans two columns
768+
769+
* - Product B
770+
- Info
771+
- More info
772+
773+
:::
774+
````
775+
776+
:::
777+
778+
:::
779+
430780
## HTML Tables
431781

432782
Quarto can process HTML tables in `html` `RawBlock` nodes (_i.e._, `{=html}`) and convert them to Markdown tables, regardless of the output format (intentionally including non-HTML formats).
Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
Quarto 1.9 includes the following new features:
22

3+
- [List Tables](/docs/authoring/tables.qmd#list-tables): Built-in support for ReStructuredText-style list tables, an easier-to-maintain alternative to grid tables. Originally developed by Martin Fischer with contributions from Albert Krewinkel and William Lupton.
4+
35
- [`aria-label` for videos](/docs/authoring/videos.qmd#accessibility-label): Improve accessibility of embedded videos by providing custom descriptive labels for screen readers instead of the default "Video Player" label.

0 commit comments

Comments
 (0)