title: Weird HTML colspan rowspan behavior
body: <p>Border ALL the things!</p>
  
  <p>I'm writing a HTML table and I'm getting extremely strange behavior. I expected to see all of my cells have a border, but that's not the case in Firefox.</p>
  
  <p>I'm getting this:</p>
  
  <p><img src="https://i.stack.imgur.com/K4d7o.png" alt="enter image description here"></p>
  
  <pre><code>&lt;style&gt;
  .speciestable{ border:1px solid black;} 
  .speciestable td{border:1px solid #555; vertical-align:top; text-align:center; }
  &lt;/style&gt;
  
  &lt;table class="speciestable"&gt;
  &lt;tr&gt;
      &lt;td rowspan="3"&gt;LEFT&lt;/td&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;1&lt;/td&gt;
      &lt;td&gt;2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td colspan="2"&gt;Bottom&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>What's going on? Am I doing something wrong? Why don't all my cells have borders?</p>