PHPCSStandards · jrfnl · Mar 7, 2025 · Nov 6, 2024
diff --git a/src/Generators/HTML.php b/src/Generators/HTML.php
@@ -72,6 +72,11 @@ class HTML extends Generator
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -410,8 +415,8 @@ protected function getFormattedCodeComparisonBlock(DOMNode $node)
         $titleRow = '';
         if ($firstTitle !== '' || $secondTitle !== '') {
             $titleRow .= '   <tr>'.PHP_EOL;
-            $titleRow .= "    <td class=\"code-comparison-title\">$firstTitle</td>".PHP_EOL;
-            $titleRow .= "    <td class=\"code-comparison-title\">$secondTitle</td>".PHP_EOL;
+            $titleRow .= "    <th class=\"code-comparison-title\">$firstTitle</th>".PHP_EOL;
+            $titleRow .= "    <th class=\"code-comparison-title\">$secondTitle</th>".PHP_EOL;
             $titleRow .= '   </tr>'.PHP_EOL;
         }
 

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlankLines.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlankLines.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Comparison, blank lines</h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: Checking handling of blank lines.</td>
-    <td class="code-comparison-title">Invalid: Checking handling of blank lines.</td>
+    <th class="code-comparison-title">Valid: Checking handling of blank lines.</th>
+    <th class="code-comparison-title">Invalid: Checking handling of blank lines.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;First&nbsp;line&nbsp;of&nbsp;the&nbsp;code&nbsp;sample&nbsp;is</br>//&nbsp;deliberately&nbsp;empty.</br></br>//&nbsp;We&nbsp;also&nbsp;have&nbsp;a&nbsp;blank&nbsp;line&nbsp;in&nbsp;the&nbsp;middle.</br></br>//&nbsp;And&nbsp;a&nbsp;blank&nbsp;line&nbsp;at&nbsp;the&nbsp;end.</td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlockLength.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonBlockLength.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Comparison, block length</h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: code sample A has more lines than B.</td>
-    <td class="code-comparison-title">Invalid: shorter.</td>
+    <th class="code-comparison-title">Valid: code sample A has more lines than B.</th>
+    <th class="code-comparison-title">Invalid: shorter.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;This&nbsp;code&nbsp;sample&nbsp;has&nbsp;more&nbsp;lines</br>//&nbsp;than&nbsp;the&nbsp;"invalid"&nbsp;one.</br><span class="code-comparison-highlight">$one</span>&nbsp;=&nbsp;10;</td>
@@ -85,8 +90,8 @@ <h2>Code Comparison, block length</h2>
   </table>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: shorter.</td>
-    <td class="code-comparison-title">Invalid: code sample B has more lines than A.</td>
+    <th class="code-comparison-title">Valid: shorter.</th>
+    <th class="code-comparison-title">Invalid: code sample B has more lines than A.</th>
    </tr>
    <tr>
     <td class="code-comparison-code"><span class="code-comparison-highlight">echo</span>&nbsp;$foo;</td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonEncoding.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonEncoding.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Comparison, char encoding</h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: Vestibulum et orci condimentum.</td>
-    <td class="code-comparison-title">Invalid: Donec in nisl ut tortor convallis interdum.</td>
+    <th class="code-comparison-title">Valid: Vestibulum et orci condimentum.</th>
+    <th class="code-comparison-title">Invalid: Donec in nisl ut tortor convallis interdum.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">&lt;?php</br></br>//&nbsp;The&nbsp;above&nbsp;PHP&nbsp;tag&nbsp;is&nbsp;specifically&nbsp;testing</br>//&nbsp;handling&nbsp;of&nbsp;that&nbsp;in&nbsp;generated&nbsp;HTML&nbsp;doc.</br></br>//&nbsp;Now&nbsp;let's&nbsp;also&nbsp;check&nbsp;the&nbsp;handling&nbsp;of</br>//&nbsp;comparison&nbsp;operators&nbsp;in&nbsp;code&nbsp;samples...</br>$a&nbsp;=&nbsp;$b&nbsp;<&nbsp;$c;</br>$d&nbsp;=&nbsp;$e&nbsp;>&nbsp;$f;</br>$g&nbsp;=&nbsp;$h&nbsp;<=&nbsp;$i;</br>$j&nbsp;=&nbsp;$k&nbsp;>=&nbsp;$l;</br>$m&nbsp;=&nbsp;$n&nbsp;<=>&nbsp;$o;</td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonLineLength.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeComparisonLineLength.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -76,8 +81,8 @@ <h2>Code Comparison, line length</h2>
 Ref: squizlabs/PHP_CodeSniffer#2522</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: contains line which is too long.</td>
-    <td class="code-comparison-title">Invalid: contains line which is too long.</td>
+    <th class="code-comparison-title">Valid: contains line which is too long.</th>
+    <th class="code-comparison-title">Invalid: contains line which is too long.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">class&nbsp;Foo&nbsp;extends&nbsp;Bar&nbsp;implements&nbsp;<span class="code-comparison-highlight">Countable</span>,&nbsp;Serializable</br>{</br>}</td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleLineWrapping.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleLineWrapping.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Title, line wrapping</h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: exactly 45 character long description.</td>
-    <td class="code-comparison-title">Invalid: exactly 45 char long description---.</td>
+    <th class="code-comparison-title">Valid: exactly 45 character long description.</th>
+    <th class="code-comparison-title">Invalid: exactly 45 char long description---.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;Dummy.</td>
@@ -85,8 +90,8 @@ <h2>Code Title, line wrapping</h2>
   </table>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: exactly 46 character long description-.</td>
-    <td class="code-comparison-title">Invalid: exactly 46 character long description</td>
+    <th class="code-comparison-title">Valid: exactly 46 character long description-.</th>
+    <th class="code-comparison-title">Invalid: exactly 46 character long description</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;Dummy.</td>
@@ -95,8 +100,8 @@ <h2>Code Title, line wrapping</h2>
   </table>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: exactly 47 character long description--.</td>
-    <td class="code-comparison-title">Invalid: exactly 47 character long description.</td>
+    <th class="code-comparison-title">Valid: exactly 47 character long description--.</th>
+    <th class="code-comparison-title">Invalid: exactly 47 character long description.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;Dummy.</td>
@@ -105,8 +110,8 @@ <h2>Code Title, line wrapping</h2>
   </table>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: this description is longer than 46 characters and will wrap.</td>
-    <td class="code-comparison-title">Invalid: this description is longer than 46 characters and will wrap.</td>
+    <th class="code-comparison-title">Valid: this description is longer than 46 characters and will wrap.</th>
+    <th class="code-comparison-title">Invalid: this description is longer than 46 characters and will wrap.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;Dummy.</td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleWhitespace.html b/tests/Core/Generators/Expectations/ExpectedOutputCodeTitleWhitespace.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Title, whitespace handling</h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: spaces at start of description.</td>
-    <td class="code-comparison-title">Invalid: spaces at end making line > 46 chars.</td>
+    <th class="code-comparison-title">Valid: spaces at start of description.</th>
+    <th class="code-comparison-title">Invalid: spaces at end making line > 46 chars.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;Dummy.</td>
@@ -85,8 +90,8 @@ <h2>Code Title, whitespace handling</h2>
   </table>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: spaces at start + end of description.</td>
-    <td class="code-comparison-title">Invalid: spaces '&nbsp;&nbsp;&nbsp;&nbsp; ' in description.</td>
+    <th class="code-comparison-title">Valid: spaces at start + end of description.</th>
+    <th class="code-comparison-title">Invalid: spaces '&nbsp;&nbsp;&nbsp;&nbsp; ' in description.</th>
    </tr>
    <tr>
     <td class="code-comparison-code">//&nbsp;Note:&nbsp;description&nbsp;above&nbsp;without&nbsp;the</br>//&nbsp;trailing&nbsp;whitespace&nbsp;fits&nbsp;in&nbsp;46&nbsp;chars.</td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleCase.html b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleCase.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleLength.html b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitleLength.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitlePCREFallback.html b/tests/Core/Generators/Expectations/ExpectedOutputDocumentationTitlePCREFallback.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;

diff --git a/...s/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMismatchedCodeElms.html b/...s/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMismatchedCodeElms.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Comparison, mismatched code blocks</h2>
   <p class="text">This doc has two code elements, one only has a title, one has actual code. Unbalanced</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Code title</td>
-    <td class="code-comparison-title"></td>
+    <th class="code-comparison-title">Code title</th>
+    <th class="code-comparison-title"></th>
    </tr>
    <tr>
     <td class="code-comparison-code"></td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMissingCodeElm.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonMissingCodeElm.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoCode.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoCode.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Comparison, no code</h2>
   <p class="text">This is a standard block.</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Valid: no code.</td>
-    <td class="code-comparison-title">Invalid: no code.</td>
+    <th class="code-comparison-title">Valid: no code.</th>
+    <th class="code-comparison-title">Invalid: no code.</th>
    </tr>
   </table>
   <div class="tag-line">Documentation generated on #REDACTED# by <a href="https://github.com/PHPCSStandards/PHP_CodeSniffer">PHP_CodeSniffer #VERSION#</a></div>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoContent.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonNoContent.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonOneEmptyCodeElm.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonOneEmptyCodeElm.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;
@@ -75,8 +80,8 @@ <h2>Code Comparison, one empty code element</h2>
   <p class="text">This doc has two code elements, but only one of them has a title and actual code.</p>
   <table class="code-comparison">
    <tr>
-    <td class="code-comparison-title">Code title</td>
-    <td class="code-comparison-title"></td>
+    <th class="code-comparison-title">Code title</th>
+    <th class="code-comparison-title"></th>
    </tr>
    <tr>
     <td class="code-comparison-code">$a&nbsp;=&nbsp;'Example&nbsp;code';</td>

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonTwoEmptyCodeElms.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeComparisonTwoEmptyCodeElms.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleEmpty.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleEmpty.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;

diff --git a/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleMissing.html b/tests/Core/Generators/Expectations/ExpectedOutputInvalidCodeTitleMissing.html
@@ -45,6 +45,11 @@
             line-height: 15px;
         }
 
+        .code-comparison-title {
+            text-align: left;
+            font-weight: 600;
+        }
+
         .code-comparison-code {
             font-family: Courier;
             background-color: #F9F9F9;