Tables
Standard Tables
The standard Kramdown table syntax renders on this site with grid lines, generous cell padding, and some indention:
| Word 1 | Word 2 | Result |
|--------|--------|--------|
| 🌧️ | 🏹 | 🌈 |
| 🚶♂️ | ➡️ | 🥭 |
| 1️⃣ | 🌽 | 🦄 |
| Word 1 | Word 2 | Result |
|---|---|---|
| 🌧️ | 🏹 | 🌈 |
| 🚶♂️ | ➡️ | 🥭 |
| 1️⃣ | 🌽 | 🦄 |
Add the CSS class .compact to the table to suppress the grid lines and indentation and tighten the spacing:
| Word 1 | Word 2 | Result |
|--------|--------|--------|
| 🌧️ | 🏹 | 🌈 |
| 🚶♂️ | ➡️ | 🥭 |
| 1️⃣ | 🌽 | 🦄 |
{:.compact}
| Word 1 | Word 2 | Result |
|---|---|---|
| 🌧️ | 🏹 | 🌈 |
| 🚶♂️ | ➡️ | 🥭 |
| 1️⃣ | 🌽 | 🦄 |
Compact tables can be useful for achieving vertical alignment in text that is not otherwise obviously tabular. Here, for example, a compact table aligns the + and = operators:
| 🧈 | + | ✈️ | = | 🦋 |
| jelly | + | 🐟 | = | 🪼 |
| 🌹 | + | ette | = | 🏵️ |
{:.compact}
| 🧈 | + | ✈️ | = | 🦋 |
| jelly | + | 🐟 | = | 🪼 |
| 🌹 | + | ette | = | 🏵️ |
(Note that vertically aligning the items in the Markdown source code is not necessary — but it’s nice!)
Here the Kramdown separator line syntax specifies right, center, and left alignment:
| pre | | post |
|------:|:---:|:----|
| alignme | → | nt |
| align | → | ment |
| ali | → | gnment |
| | (end)| alignment |
{:.compact}
| pre | post | |
|---|---|---|
| alignme | → | nt |
| align | → | ment |
| ali | → | gnment |
| (end) | alignment |
Big Tables
The standard Markdown syntax is nice for small tables, but quickly falls appart when tables contain complex formatting and large quantities of text within cells.
This site offers a second table syntax, “big tables.” These are not standard Markdown or Kramdown. Big tables are distinguised from simple tables by a row separator lines containing double bars: ||-------||. Headers use ||======||. With each row, columns are identified by [id].
||=================================================================||
[one] First column
[two] Second column
[three] Third column
||=================================================================||
[one]
Cells can contain multiple paragraphs.
Like this.
[two]
- Cells can also contain
- complex formatting
- such as lists
[three]
```text
Code blocks work too!
```
||-----------------------------------------------------------------||
[two]
in the order they _first_ occurred
[one]
Columns appear in each row
[three]
within the table.
||-----------------------------------------------------------------||
[two]
A row may omit columns.
[four]
A row may introduce a new column not mentioned in the header or previous rows.
||-----------------------------------------------------------------||
First column
Second column
Third column
Cells can contain multiple paragraphs.
Like this.
- Cells can also contain
- complex formatting
- such as lists
Code blocks work too!
in the order they first occurred
Columns appear in each row
within the table.
A row may omit columns.
A row may introduce a new column not mentioned in the header or previous rows.
A big “table” is not really a table in the HTML sense; it is a sequence of rows each of which has a grid layout. By default, that grid layout is a horizontally arranged collection of cells which equally divide the available width. It is possible, however, to apply custom styles to big tables based on the names of their columns. The Comp 127 site, for example, uses syntax-terminology-semantics tables in several activites, which apply custom style to specific cells and use a responsive custom layout for each row:
||============================================================||
[syntax] Java syntax
[terminology] What it’s called
[semantics] What it means
||============================================================||
[syntax]
class Bicycle {
<ghost>...</ghost>
}
[terminology]
- <def>class declaration</def> <meta>(n)</meta>
- declare a class <meta>(v)</meta>
[semantics]
“In our world, `Bicycle` is one type of thing that can exist. There aren’t any of them yet! But there could be. Here is a description of their state and behavior….”
<highlight>Note that this text appears _below_ the `terminology` cell instead of to the right.</highlight>
||------------------------------------------------------------||
Java syntax
What it’s called
What it means
class Bicycle { … }
- class declaration
- declare a class
“In our world, Bicycle is one type of thing that can exist. There aren’t any of them yet! But there could be. Here is a description of their state and behavior….”
Note that this text appears below the terminology cell instead of to the right.
You can find the CSS for these custom layouts in src/presentation/style/_documents/big-table/ in Coursage. To add your own custom style, create a new file in that directory using the existing ones as a model, then add a @use directive for you new file in:
src/presentation/style/_documents/document.sass
You must do this in the Coursage source code; it is not yet possible to add custom big table styles in the course site’s source code.