feat: Add examples table for mixed_case_recommended_field (#1708)

* add table

* fix table to match #1695

* fix java doc error

* update caption styles

* web ui style update + add colons

---------

Co-authored-by: David Gamez Diaz <1192523+davidgamez@users.noreply.github.com>
Co-authored-by: Jingsi Lu <jingsi@mobilitydata.org>

core/src/main/java/org/mobilitydata/gtfsvalidator/notice/MixedCaseRecommendedFieldNotice.java

@@ -15,7 +15,41 @@
  * (e.g. “JFK Airport”). Abbreviations may be problematic for accessibility by screen reader
  * software and voice user interfaces.
  *
- * @see org.mobilitydata.gtfsvalidator.annotation.MixedCase
+ * <table style="table-layout:auto; width:auto;">
+ *   <caption>Good examples:</caption>
+ *   <tr>
+ *     <th><code>Field Text</code></th>
+ *     <th><code>Dataset</code></th>
+ *   </tr>
+ *   <tr>
+ *     <td>"Schwerin, Hauptbahnhof"</td>
+ *     <td><a href="http://vbb.de/vbbgtfs">Verkehrsverbund Berlin-Brandenburg</a></td>
+ *   </tr>
+ *    <tr>
+ *     <td>"Red Hook/Atlantic Basin"</td>
+ *     <td><a href="http://nycferry.connexionz.net/rtt/public/utility/gtfs.aspx">NYC Ferry</a></td>
+ *   </tr>
+ *   <tr>
+ *     <td>"Campo Grande Norte"</td>
+ *     <td><a href="https://gateway.carris.pt/gateway/gtfs/api/v2.8/GTFS">Carris</a></td>
+ *   </tr>
+ * </table>
+ *
+ * <table style="table-layout:auto; width:auto;">
+ *   <caption>Bad examples:</caption>
+ *   <tr>
+ *     <th><code>Field Text</code></th>
+ *   </tr>
+ *   <tr>
+ *     <td>"GALLERIA MALL"</td>
+ *   </tr>
+ *   <tr>
+ *     <td>"3427 GG 17"</td>
+ *   </tr>
+ *   <tr>
+ *     <td>"21 Clark Rd Est"</td>
+ *   </tr>
+ * </table>
  */
 @GtfsValidationNotice(
     severity = WARNING,

main/src/main/resources/report.html

@@ -43,6 +43,11 @@
         width: 100%;
     }
 
+    table caption {
+        text-align: left;
+        margin: 0.5em 0;
+    }
+
     table th {
         text-align: left;
         border-bottom: 2px solid #000;

web/client/src/css/components/markdown.css

@@ -63,9 +63,12 @@
 
   table {
     @apply my-2;
+    caption {
+      @apply text-left;
+    }
   }
 
-  th, td {
+  th, td,  {
     @apply align-baseline;
     @apply px-4 py-3;
     @apply text-left;