<div class="panel panel-default">
    <div class="panel-body">
        <h1>
          Tables
        </h1>
        <h3>
            Simple Table
        </h3>
        <p>
            A simple table in Markdown is created by using vertical bars (|) to separate columns and hyphens (-) to define the table header. Each row is represented as a separate line, with the content of each cell separated by vertical bars.
        </p>
        <pre><code>First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell</code></pre>
        <h4>
            Example
        </h4>
        <table class="table table-striped">
            <thead>
            <tr>
              <th>First Header</th>
              <th>Second Header</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Content Cell</td>
              <td>Content Cell</td>
            </tr>
            <tr>
              <td>Content Cell</td>
              <td>Content Cell</td>
            </tr>
            </tbody>
        </table>
        <hr>
        
        <h3>
            Aligned Table
        </h3>
        <p>
            An aligned table in Markdown allows you to specify the alignment of the content within each cell. It is created by using colons (:) to indicate the alignment of the columns. A colon on the left side indicates left alignment, a colon on the right side indicates right alignment, and colons on both sides indicate center alignment.
        </p>
        <pre><code> Left Header |  Center Header  | Right Header
:----------- | :-------------: | ------------:
 Conent Cell |  Content Cell   | Content Cell</code></pre>
        <h4>
            Example
        </h4>
        <table class="table table-striped">
            <thead>
            <tr>
              <th style="text-align:left">Left Header</th>
              <th style="text-align:center">Center Header</th>
              <th style="text-align:right">Right Header</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td style="text-align:left">Conent Cell</td>
              <td style="text-align:center">Content Cell</td>
              <td style="text-align:right">Content Cell</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>