Table blocks with both style options and with various color options

Ticket 61563 for Twenty Fourteen

<!-- wp:heading -->
<h2 class="wp-block-heading">Default style for Table block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Table block with <strong>default</strong> styles</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false} -->
<figure class="wp-block-table"><table><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>Green text</strong> color</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-regular","style":{"elements":{"link":{"color":{"text":"var:preset|color|green"}}}},"textColor":"green"} -->
<figure class="wp-block-table is-style-regular"><table class="has-green-color has-text-color has-link-color"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>Medium Gray background</strong> color</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-regular","backgroundColor":"medium-gray"} -->
<figure class="wp-block-table is-style-regular"><table class="has-medium-gray-background-color has-background"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>Green text and Light Gray background</strong> colors</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-regular","style":{"elements":{"link":{"color":{"text":"var:preset|color|green"}}}},"backgroundColor":"light-gray","textColor":"green"} -->
<figure class="wp-block-table is-style-regular"><table class="has-green-color has-light-gray-background-color has-text-color has-background has-link-color"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>border width of 2px</strong> but no border color (using appearance tools)</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"style":{"border":{"width":"2px"}}} -->
<figure class="wp-block-table"><table style="border-width:2px"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>2px border width and Green border color</strong> (using appearance tools)</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"style":{"border":{"width":"2px"}},"borderColor":"green"} -->
<figure class="wp-block-table"><table class="has-border-color has-green-border-color" style="border-width:2px"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Stripes style for Table block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Table block with standard stripes and <strong>default</strong> styles</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-stripes"} -->
<figure class="wp-block-table is-style-stripes"><table><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>Green text</strong> color</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-stripes","style":{"elements":{"link":{"color":{"text":"var:preset|color|green"}}}},"textColor":"green"} -->
<figure class="wp-block-table is-style-stripes"><table class="has-green-color has-text-color has-link-color"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>Medium Gray background</strong> color</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-stripes","backgroundColor":"medium-gray"} -->
<figure class="wp-block-table is-style-stripes"><table class="has-medium-gray-background-color has-background"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Table block with <strong>Green text and Light Gray background</strong> colors</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-stripes","style":{"elements":{"link":{"color":{"text":"var:preset|color|green"}}}},"backgroundColor":"light-gray","textColor":"green"} -->
<figure class="wp-block-table is-style-stripes"><table class="has-green-color has-light-gray-background-color has-text-color has-background has-link-color"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Striped Table block with <strong>border width of 2px</strong> but no border color (using appearance tools)</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-stripes","style":{"border":{"width":"2px"}}} -->
<figure class="wp-block-table is-style-stripes"><table style="border-width:2px"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Striped Table block with <strong>2px border width and Green border color</strong> (using appearance tools)</p>
<!-- /wp:paragraph -->

<!-- wp:table {"hasFixedLayout":false,"className":"is-style-stripes","style":{"border":{"width":"2px"}},"borderColor":"green"} -->
<figure class="wp-block-table is-style-stripes"><table class="has-border-color has-green-border-color" style="border-width:2px"><thead><tr><th>thead th 1</th><th>thead th 2</th></tr></thead><tbody><tr><td>tbody td: row 1, column 1</td><td>tbody td: row 1, column 2</td></tr><tr><td>tbody td: row 2, column 1</td><td>tbody td: row 2, column 2</td></tr></tbody><tfoot><tr><td>tfoot td: column 1</td><td>tfoot td: column 2</td></tr></tfoot></table><figcaption class="wp-element-caption">figcaption</figcaption></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Classic tables in block editor</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Classic block with a table that contains a caption element</p>
<!-- /wp:paragraph -->

<table>
<caption>Caption</caption>
<thead>
<tr>
<th>thead th 1</th>
<th>thead th 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody td: row 1, column 1</td>
<td>tbody td: row 1, column 2</td>
</tr>
<tr>
<td>tbody td: row 2, column 1</td>
<td>tbody td: row 2, column 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot td: column 1</td>
<td>tfoot td: column 2</td>
</tr>
</tfoot>
</table>