Bdtjtk

I'm trying to create headers for my table and the text isn't aligning with those entries in the bodies. Even when I do single characters. What seems to be the issue here? I've included the table code below and the image of how the table comes out.

        <table style="width:100%">

          <col align="left">

          <col align="left">

          <col align="left">

            <col align="left">

            <!-- HEADERS -->

            <thead>

                <tr>

                    <th scope="col">SYMBOL</th>

                    <th scope="col">PRICE</th>

                    <th scope="col">$ CHANGE</th>

                    <th scope="col">% CHANGE</th>

                </tr>

            </thead>

            <tbody>

          {% for item in view.display_stocks %}

          <tr class="table table-striped">

            <th scope   ="row"><a href="search/stock_symbol={{ item.stock_symbol }}"><font color="#2C3E50">{{ item.stock_symbol }}</font></a></th>

            {% if item.percent_change < 0 %}

                <th><font color="red">${{ item.price }}</font><th>

                <th><font color="red">{{ item.dollar_change }}</font><th>

                <th><font color="red">{{ item.percent_change }}%</font><th>

            {% else %}

                <th><font color="green">${{ item.price }}</font><th>

                <th><font color="green">+{{ item.dollar_change }}</font><th>

                <th><font color="green">+{{ item.percent_change }}%</font><th>

            {% endif %}

            </tr>

            {% endfor %}

            </tbody>

        </table>

Edit: None of the answers seem to be fix the problem, but I just tried adding more columns in and there seems to be an extra two columns coming in the body from somewhere, here's a picture when I add two extra columns for the header:

Surely it has to do with the align="left" that you have put on your col , remove it and it should be fine.

You should use <td> instead of <th> inside the table body. Also, you have these classes in the body <tr class="table table-striped"> that you don't in the head.

Well, you should probably close your th’s in your body correctly and that would probably fix the issue:

{% if item.percent_change < 0 %}

  <th><font color="red">${{ item.price }}</font></th>

  <th><font color="red">{{ item.dollar_change }}</font></th>

  <th><font color="red">{{ item.percent_change }}%</font></th>

{% else %}

  <th><font color="green">${{ item.price }}</font></th>

  <th><font color="green">+{{ item.dollar_change }}</font></th>

  <th><font color="green">+{{ item.percent_change }}%</font></th>

{% endif %}

The body code you have will automatically close the th and then create a second one, which is why your columns are getting off set.

That being said, I agree with other commenters that generally speaking, you should use td instead of th for body cells and use CSS to style the content as you would like it.