Page history Edit this page How do I edit this website?

Tables

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

Plugins The bread and butter of ImageJ.
Extend 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.