title: Sub-headers in Tables: Accessibility and Templating
body: <p>This is hard to explain, so here is a <a href="http://codepen.io/bookcasey/pen/hfIzm" rel="noreferrer">pen</a> where all the examples can be seen.</p>
  
  <h2>Which is better for accessibility?</h2>
  
  <h3>Option 1</h3>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Thing 1&lt;/th&gt;
        &lt;th&gt;Thing 2&lt;/th&gt;
        &lt;th colspan=2&gt;Thing 3&lt;/th&gt;
        &lt;th&gt;Thing 4&lt;/th&gt;
        &lt;th colspan=2&gt;Thing 5&lt;/th&gt;
        &lt;th&gt;Thing 6&lt;/th&gt;
        &lt;th&gt;Thing 7&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td rowspan=2&gt;40&lt;/td&gt;
        &lt;td rowspan=2&gt;30&lt;/td&gt;
        &lt;th&gt;Right&lt;/th&gt;
        &lt;th&gt;Left&lt;/th&gt;
        &lt;td rowspan=2&gt;50&lt;/td&gt;
        &lt;th&gt;Right&lt;/th&gt;
        &lt;th&gt;Left&lt;/th&gt;
        &lt;td rowspan=2&gt;25&lt;/td&gt;
        &lt;td rowspan=2&gt;30&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;10&lt;/td&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;15&lt;/td&gt;
        &lt;td&gt;40&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h3>Option 2</h3>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Thing 1&lt;/th&gt;
        &lt;th&gt;Thing 2&lt;/th&gt;
        &lt;th colspan=2&gt;Thing 3&lt;/th&gt;
        &lt;th&gt;Thing 4&lt;/th&gt;
        &lt;th colspan=2&gt;Thing 5&lt;/th&gt;
        &lt;th&gt;Thing 6&lt;/th&gt;
        &lt;th&gt;Thing 7&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th colspan=2&gt;&lt;/th&gt;
        &lt;th&gt;Right&lt;/th&gt;
        &lt;th&gt;Left&lt;/th&gt;
        &lt;th&gt;&lt;/th&gt;
        &lt;th&gt;Right&lt;/th&gt;
        &lt;th&gt;Left&lt;/th&gt;
        &lt;th colspan=2&gt;&lt;/th&gt;   
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;40&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
        &lt;td&gt;10&lt;/td&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;50&lt;/td&gt;
        &lt;td&gt;15&lt;/td&gt;
        &lt;td&gt;40&lt;/td&gt;
        &lt;td&gt;25&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <h2>If the sub values (Right and Left) are equal,  it should display like this:</h2>
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Thing 1&lt;/th&gt;
        &lt;th&gt;Thing 2&lt;/th&gt;
        &lt;th&gt;Thing 3s&lt;/th&gt;
        &lt;th&gt;Thing 4&lt;/th&gt;
        &lt;th&gt;Thing 5s&lt;/th&gt;
        &lt;th&gt;Thing 6&lt;/th&gt;
        &lt;th&gt;Thing 7&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;40&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
        &lt;td&gt;10&lt;/td&gt;
        &lt;td&gt;50&lt;/td&gt;
        &lt;td&gt;15&lt;/td&gt;
        &lt;td&gt;25&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  Or this:
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Thing 1&lt;/th&gt;
        &lt;th&gt;Thing 2&lt;/th&gt;
        &lt;th colspan=2&gt;Thing 3&lt;/th&gt;
        &lt;th&gt;Thing 4&lt;/th&gt;
        &lt;th&gt;Thing 5s&lt;/th&gt;
        &lt;th&gt;Thing 6&lt;/th&gt;
        &lt;th&gt;Thing 7&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th colspan=2&gt;&lt;/th&gt;
        &lt;th&gt;Right&lt;/th&gt;
        &lt;th&gt;Left&lt;/th&gt;
        &lt;th colspan=5&gt;&lt;/th&gt;  
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;40&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
        &lt;td&gt;10&lt;/td&gt;
        &lt;td&gt;20&lt;/td&gt;
        &lt;td&gt;50&lt;/td&gt;
        &lt;td&gt;15&lt;/td&gt;
        &lt;td&gt;25&lt;/td&gt;
        &lt;td&gt;30&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  Or this:
  
  <pre><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Thing 1&lt;/th&gt;
        &lt;th&gt;Thing 2&lt;/th&gt;
        &lt;th&gt;Thing 3s&lt;/th&gt;
        &lt;th&gt;Thing 4&lt;/th&gt;
        &lt;th colspan=2&gt;Thing 5&lt;/th&gt;
        &lt;th&gt;Thing 6&lt;/th&gt;
        &lt;th&gt;Thing 7&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td rowspan=2&gt;40&lt;/td&gt;
        &lt;td rowspan=2&gt;30&lt;/td&gt;
        &lt;td rowspan=2&gt;10&lt;/td&gt;
        &lt;td rowspan=2&gt;50&lt;/td&gt;
        &lt;th&gt;Right&lt;/th&gt;
        &lt;th&gt;Left&lt;/th&gt;
        &lt;td rowspan=2&gt;25&lt;/td&gt;
        &lt;td rowspan=2&gt;30&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;15&lt;/td&gt;
        &lt;td&gt;40&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Et cetera.</p>
  
  <h2>How can this be templated effectively?</h2>
  
  <p><p>Since tables are defined by horizontal row in the markup, logic to change columns needs to be sprinkled through all the <code>tr</code>s:</p>
  
  <h3>Psuedo-code ERB</h3>
  
  <p><code>thing3()</code> and <code>thing5()</code> return true if <code>thing3right != thing3left</code></p>
  
  <pre>
  %table
    %thead
      %tr
        %th Thing 1
        %th Thing 2
        - if thing3()
          %th Thing 3
        - else
          %th{:colspan => "2"} Thing 3s
        %th Thing 4
        - if thing5()
          %th Thing 5
        - else
          %th{:colspan => "2"} Thing 5s
        %th Thing 6
        %th Thing 7
      - if !thing3() or !thing5()
        %tr.subcategory
          - if !thing3() && !thing5()
            %th{:colspan => "2"}
            %th Right
            %th Left
            %th
            %th Right
            %th Left
            %th{:colspan => "2"}
          - elsif thing3() && !thing5()
            %th{:colspan => "4"}
            %th Right
            %th Left
            %th{:colspan => "2"}
          - elsif !thing3() && thing5()
            %th{:colspan => "2"}
            %th Right
            %th Left
            %th{:colspan => "4"}
    %tbody
      %tr
        %td= @whatever.thing1
        %td= @whatever.thing2
        %td= @whatever.thing3right
        - if !thing3()
          %td= @whatever.thing3left
        %td= @whatever.thing4
        %td= @whatever.thing5right
        - if !thing5()
          %td= @whatever.thing5left
        %td= @whatever.thing6
        %td= @whatever.thing7
  </pre>
  
  <p>This works, but is very hard to use and update. It becomes exponentionally more complex with every column that has sub categories.</p>
  
  <p>How can I display this data in a accessible way that can also be templated in an extensible and easy to update manner?</p>