This page explains how to insert a table into your page.
Usage
There is no dedicated include to create a table. You can, however, easily create one using Markdown:
Code
| Blue | Red | Green | Yellow | Purple |
|------|-----|-------|--------|--------|
| 5 | 4 | 3 | 2 | 1 |
| 1 | 2 | 3 | 4 | 5 |
Result
Blue | Red | Green | Yellow | Purple |
---|---|---|---|---|
5 | 4 | 3 | 2 | 1 |
1 | 2 | 3 | 4 | 5 |
Aligning Tables
By default, tables are stretched to 100% width:
Blue | Red | Green | Yellow | Purple |
---|---|---|---|---|
5 | 4 | 3 | 2 | 1 |
1 | 2 | 3 | 4 | 5 |
If you want the table to be its natural width instead, put {:.left}
beneath the table:
Code
| Blue | Red | Green | Yellow | Purple |
|------|-----|-------|--------|--------|
| 5 | 4 | 3 | 2 | 1 |
| 1 | 2 | 3 | 4 | 5 |
{:.left}
Result
Blue | Red | Green | Yellow | Purple |
---|---|---|---|---|
5 | 4 | 3 | 2 | 1 |
1 | 2 | 3 | 4 | 5 |
Or for a centered table, use {:.center}
:
Code
| Blue | Red | Green | Yellow | Purple |
|------|-----|-------|--------|--------|
| 5 | 4 | 3 | 2 | 1 |
| 1 | 2 | 3 | 4 | 5 |
{:.center}
Result
Blue | Red | Green | Yellow | Purple |
---|---|---|---|---|
5 | 4 | 3 | 2 | 1 |
1 | 2 | 3 | 4 | 5 |
Aligning Columns
You can place :
symbols in the table header to specify column alignment:
Code
| Day | Abbreviation | Description |
|----------:|:------------:|:----------------|
| Monday | Mon | Dynamo anagram |
| Tuesday | Tue | Day of victory! |
| Wednesday | Wed | The best Addams |
| Thursday | Thu | Friday's Friday |
| Friday | Fri | TGIF |
Result
Day | Abbreviation | Description |
---|---|---|
Monday | Mon | Dynamo anagram |
Tuesday | Tue | Day of victory! |
Wednesday | Wed | The best Addams |
Thursday | Thu | Friday’s Friday |
Friday | Fri | TGIF |
Adding Images
You can include images within tables:
Code
| ![Plugins](/media/editing/plugins.png) | The bread and butter of ImageJ. |
| ![Extend](/media/editing/extend.png) | You know you want to. |
Result
![]() |
The bread and butter of ImageJ. |
![]() |
You know you want to. |
Custom Styling
You can add custom styling to a table by attaching a CSS class:
Code
| Superhero | Superpower |
| ------------- | -------------------- |
| Cyclops | optic blasts |
| The Flash | super speed |
| Squirrel Girl | talks with squirrels |
{:.box}
Result
Superhero | Superpower |
---|---|
Cyclops | optic blasts |
The Flash | super speed |
Squirrel Girl | talks with squirrels |
If there is not already a class with the styling you want, you can declare it inline:
Code
<style>
.power-levels-table {
background-image: repeating-linear-gradient(60deg,
plum, hotpink 30px, turquoise 30px, aquamarine 60px);
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-weight: bold;
}
</style>
| Superhero | Power Level |
| -------------- | -----------|
| Captain Marvel | ridiculous |
| Superman | ludicrous |
| Silver Surfer | absurd |
{:.power-levels-table}
Result
Superhero | Power Level |
---|---|
Captain Marvel | ridiculous |
Superman | ludicrous |
Silver Surfer | absurd |
Spreadsheets
You can embed an external spreadsheet.
Google Sheets
{% include spreadsheet platform="google" id="1xl0owZ1kAJDLrA2XtNjlvKwhO5ZsS5_CMmw-dU64sFk" %}
This include is under construction! Coming soon.