Better styles and documentation for tables

See
https://groups.google.com/d/topic/tiddlywikidev/5UkATv0HjR0/discussion

editions/tw5.com/tiddlers/wikitextrules/TableWikiText.tid

@@ -0,0 +1,76 @@
+created: 201309141321
+creator: JeremyRuston
+modified: 201309141355
+modifier: JeremyRuston
+tags: wikitextrule
+title: TableWikiText
+
+! Basics
+
+TiddlyWiki5 formats tables using vertical bar characters like so:
+
+```
+|!Cell1 |!Cell2 |
+|Cell3 |Cell3 |
+```
+
+Exclamation marks are used to indicate header cells. The example renders as:
+
+|!Cell1 |!Cell2 |
+|Cell3 |Cell3 |
+
+! Cell Alignment
+
+Table cell alignment is controlled by inserting space characters before and/or after the cell content. For example:
+
+```
+|Left aligned content |
+| Right aligned content|
+| Centred content |
+|+++ a very wide column so we can see the alignment +++|
+```
+
+The example renders as:
+
+|Left aligned content |
+| Right aligned content|
+| Centred content |
+|+++ a very wide column so we can see the alignment +++|
+
+! Cell Merging
+
+To merge a table cell with the one above, use the special cell text `~`. To merge a cell with the one to its left use the text `>`. For example:
+
+```
+|Cell1 |Cell2 |Cell3 |Cell4 |
+|Cell5 |Cell6 |Cell7 |>|
+|Cell5 |~|Cell7 |Cell8 |
+```
+
+Renders as:
+
+|Cell1 |Cell2 |Cell3 |Cell4 |
+|Cell5 |Cell6 |Cell7 |>|
+|Cell5 |~|Cell7 |Cell8 |
+
+! Table Classes, Captions, Headers and Footers
+
+Table CSS classes, captions, headers and footers can be specified as special pseudo-rows:
+
+```
+|myclass anotherClass|k
+|This is a caption |c
+|Cell1 |Cell2 |
+|Cell3 |Cell3 |
+|Header|Header|h
+|Footer|Footer|f
+```
+
+Renders as:
+
+|myclass anotherClass|k
+|This is a caption |c
+|Cell1 |Cell2 |
+|Cell3 |Cell3 |
+|Header|Header|h
+|Footer|Footer|f

themes/tiddlywiki/snowwhite/base.tid

@@ -106,7 +106,9 @@ pre {
 
 table {
 	border: 1px solid #ddd;
-	width: 100%;
+	width: auto;
+	max-width: 100%;
+	caption-side: bottom;
 }
 
 table th, table td {
@@ -115,12 +117,21 @@ table th, table td {
 	border-left: 1px solid #ddd;
 }
 
+table thead tr td, table th {
+	background-color: #f0f0f0;
+	font-weight: bold;
+}
+
+table tfoot tr td {
+	background-color: #a8a8a8;
+}
+
 .tw-tiddler-frame img, .tw-tiddler-frame svg, .tw-tiddler-frame canvas, .tw-tiddler-frame embed {
 	max-width: 100%;
 }
 
 embed {
-	width: 100%;
+	max-width: 100%;
 	height: 20em;
 }