title: Why the code in a pre tag which is inside a table cell look terrible?
body: <p>I have tried to use html to make my own quick reference to different programming language, in the reference I tried to put the code snippet inside a pre tag which is inside a cell tag.</p>
  
  <p><strong>First, html like this, and the codes look terrible</strong></p>
  
  <pre><code>                &lt;td&gt;
                      &lt;pre&gt;&lt;code&gt;if (..){
  
                      } else {
  
                      }&lt;/code&gt;&lt;/pre&gt;
                  &lt;/td&gt;
  </code></pre>
  
  <p><strong>Then, i have fixed the problem by removing all the indent in <code>pre</code> tag</strong></p>
  
  <pre><code>                    &lt;td&gt;
  &lt;pre&gt;&lt;code&gt;if (..) {
  
  } else {
  
  }&lt;/code&gt;&lt;/pre&gt;
                      &lt;/td&gt;
  </code></pre>
  
  <p>This picture shows the difference, the first cell is written the beautiful indent html, while the others cell are written by ugly indent html. I don't understand the reason, and if there any ways to fix the problem ?
  <img src="https://i.stack.imgur.com/cYJTS.png" alt="example"></p>