Create examples for right-aligned table cells

- Add numerical table cell example with right-aligned numbers
- Update table example to compare left-aligned text
- Update guidance for right-aligned table cells and link to tabular
numbers

public/sass/elements/_tables.scss

@@ -13,7 +13,7 @@ table {
 
 table th,
 table td {
-  @include core-16($tabular-numbers: true);
+  @include core-16();
   padding: em(12, 16) em(20, 16) em(9, 16) 0;
 
   text-align: left;
@@ -24,3 +24,9 @@ table td {
 table th {
   font-weight: 700;
 }
+
+// Right align numerical cell contents, for easier comparison
+.numerical {
+  text-align: right;
+  @include core-16($tabular-numbers: true);
+}

views/index.html

@@ -656,10 +656,23 @@ <h3 class="heading-medium">Data in a table</h3>
     <p class="text">
       Consider putting content into tables to make it easier to scan.
     </p>
-    <p>
-      <a href="https://www.gov.uk/government/publications/dvlas-annual-report-and-accounts-2012-to-2013/dvlas-annual-report-and-accounts-2012-to-2013#directors-report">See an example of table usage on GOV.UK</a>
+
+    <ul class="text list-bullet">
+      <li>when comparing rows of numbers, align numbers to the right in table cells</li>
+      <li>don't right-align dates</li>
+      <li>use <a href="https://github.com/alphagov/govuk_frontend_toolkit#tabular-numbers">tabular numbers</a> to allow numbers of the same width to be more easily compared</li>
+    </ul>
+
+    <p class="text">
+      <a href="https://www.gov.uk/performance/carers-allowance/volumetrics">See an example of numerical table usage on GOV.UK</a>
     </p>
+    <div class="example">
+      {{> data_table_numerical }}
+    </div>
 
+    <p>
+      Not all content in tables should be right aligned.
+    </p>
     <div class="example">
       {{> data_table }}
     </div>

views/snippets/data_table_numerical.html

@@ -0,0 +1,31 @@
+<table>
+  <thead>
+    <tr>
+      <th></th>
+      <th class="numerical" scope="col">Business Plan</th>
+      <th class="numerical" scope="col">Actual</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Vehicle volumes</td>
+      <td class="numerical">103,672,000</td>
+      <td class="numerical">97,424,000</td>
+    </tr>
+    <tr>
+      <td>Driver volumes</td>
+      <td class="numerical">16,891,000</td>
+      <td class="numerical">15,197,000</td>
+    </tr>
+    <tr>
+     <td>Electronic take-up target</td>
+      <td class="numerical">54%</td>
+      <td class="numerical">-</td>
+    </tr>
+    <tr>
+      <td>Electronic take-up (actual)</td>
+      <td class="numerical">-</td>
+      <td class="numerical">50.3%</td>
+    </tr>
+  </tbody>
+</table>