Make tables 100% width again

But document how to present tables in other ways, too.

Closes #130.

Author: ctrueden

_pages/editing/tables.md

@@ -19,6 +19,55 @@ You can, however, easily create one using Markdown:
 {% endcapture %}
 {% include editing/example code=simple-table %}
 
+## 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      |
+{:.left}
+
+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      |
+{:.center}
+
 ## Aligning Columns
 
 You can place `:` symbols in the table header to specify column alignment:

assets/css/main.css

@@ -50,6 +50,7 @@ blockquote:before, blockquote:after, q:before, q:after {
 table {
   border-collapse: collapse;
   border-spacing: 0;
+  width: 100%;
 }
 
 body {
@@ -1616,12 +1617,10 @@ ul.major-icons li .icon {
 .left {
   margin-left: 0;
   margin-right: 1em;
-  text-align: left;
 }
 .right {
   margin-left: 1em;
   margin-right: 0;
-  text-align: right;
 }
 .center {
   display: block;
@@ -1633,6 +1632,11 @@ ul.major-icons li .icon {
   width: 100%
 }
 
+table.center, table.left, table.right {
+  width: auto;
+  display: table;
+}
+
 .float-left {
   margin-right: 1em;
 }