You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/authoring/tables.qmd
+351-1Lines changed: 351 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -353,7 +353,15 @@ tibble::tribble(
353
353
354
354
## Grid Tables
355
355
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:
357
365
358
366
359
367
```markdown
@@ -427,6 +435,348 @@ Note that grid tables are quite awkward to write with a plain text editor (becau
427
435
- Quarto [Visual Editor](/docs/visual-editor/content.qmd#editing-tables)
428
436
- Tables Generator's [Plain Text mode](https://www.tablesgenerator.com/text_tables) with `Use reStructuredText syntax` enabled
429
437
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
+
430
780
## HTML Tables
431
781
432
782
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).
-[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
+
3
5
-[`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