title: Most common way of writing a HTML table with vertical headers?
body: <p>Hi all it's been a while since I've asked something, this is something that has been bothering me for a while, the question itself is in the title:</p>
  
  <blockquote>
    <p>What's your preferred way of writing HTML tables that have vertical headers?</p>
  </blockquote>
  
  <p>By vertical header I mean that the table has the header (<code>&lt;th&gt;</code>) tag on the left side (generally)</p>
  
  <blockquote>
    <p><strong>Header 1</strong> data data data<br>
    <strong>Header 2</strong> data data data<br>
    <strong>Header 3</strong> data data data</p>
  </blockquote>
  
  <p>They look like this, so far I've come up with two options</p>
  
  <h2>First Option</h2>
  
  <pre>
     <code>
      &lt;table id="vertical-1"&gt;
              &lt;caption&gt;First Way&lt;/caption&gt;
              &lt;tr&gt;
                  &lt;th&gt;Header 1&lt;/th&gt;
                  &lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Header 2&lt;/th&gt;
                  &lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Header 2&lt;/th&gt;
                  &lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;&lt;td&gt;data&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
     </code>
  </pre>
  
  <p>The main advantage of this way is that you have the headers right (actually left) next to the data it represents, what I don't like however is that the <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code> and <code>&lt;tfoot&gt;</code> tags are missing, and there's no way to include them without breaking the nicelly placed together elements, which lead me to the second option.</p>
  
  <h2>Second Option</h2>
  
  <pre>
     <code>
          &lt;style type="text/css"&gt;
              #vertical-2 thead,#vertical-2 tbody{
                  display:inline-block;
              }
  
          &lt;/style&gt;
          &lt;table id="vertical-2"&gt;
              &lt;caption&gt;Second Way&lt;/caption&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th colspan="3"&gt;Header 1&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th colspan="3"&gt;Header 2&lt;/th&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th colspan="3"&gt;Header 3&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;row 1&lt;/td&gt;
                      &lt;td&gt;row 1&lt;/td&gt;
                      &lt;td&gt;row 1&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;data&lt;/td&gt;
                      &lt;td&gt;data&lt;/td&gt;
                      &lt;td&gt;data&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;data&lt;/td&gt;
                      &lt;td&gt;data&lt;/td&gt;
                      &lt;td&gt;data&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;td colspan="4"&gt;Footer&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
          &lt;/table&gt;
     </code>
  </pre>
  
  <p>The main advantage here is that you have a fully descriptive html table, the drawbacks are that proper representation needs a bit of CSS for the <code>tbody</code> and <code>thead</code> tags and that the relation between the headers and data isn't very clear as I had my doubts when creating the markup.</p>
  
  <hr>
  
  <p>So, both ways render the table how it should, here a pitcure:</p>
  
  <p><img src="https://i.stack.imgur.com/s0YDr.png" alt="render"><br>
  With the headers on the left or right side if you would prefer it, so, any suggestions, alternatives, browser issues?</p>