title: Adding a sidebar and footer to a table
body: <p>So I have a table that looks like this:</p>
  
  <pre><code>+++++++++++
  +    +    +
  + TD + TD +
  +    +    +
  +++++++++++
  +    +    +
  + TD + TD +
  +    +    +
  +++++++++++
  </code></pre>
  
  <p>And I can't seem to figure out how to add a sidebar:</p>
  
  <pre><code>++++++++++++++++
  +    +    + S  +
  + TD + TD + I  +
  +    +    + D  +
  +++++++++++ E  +
  +    +    + B  +
  + TD + TD + A  +
  +    +    + R  +
  ++++++++++++++++
  </code></pre>
  
  <p>Or a footer</p>
  
  <pre><code>++++++++++++++++
  +    +    + S  +
  + TD + TD + I  +
  +    +    + D  +
  +++++++++++ E  +
  +    +    + B  +
  + TD + TD + A  +
  +    +    + R  +
  ++++++++++++++++
  +         +
  + FOOTER  +
  +         +
  +++++++++++
  </code></pre>
  
  <p>So, aside from my terrible ASCII skills, this is the HTML that I mentioned in the first model:</p>
  
  <pre><code>&lt;!-- Flatly, a baller theme, I use it in almost all projects --&gt;
  &lt;link href = "https://bootswatch.com/flatly/bootstrap.min.css" rel = "stylesheet" type = "text/css"&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>td {
      width: 50px;
      height: 50px;
      border: solid #000 1px !important;
  }
  </code></pre>
  
  <p>Giving a result you can see at <a href="https://jsfiddle.net/tv5od4fg/2/" rel="nofollow">this</a> fiddle. </p>
  
  <p>Now, if you're wondering why I would possibly need to make this, its for a little experiment I'm making, which will allow you to add to the table by pressing the sidebar and footer to extend the table by rows and columns. I'm attempting to make the footer and sidebar the same height and width as the table. (As shown in model 3)</p>