html - White Space in HTML from Django Template

Question

I have a django app that I need to get in a list format. My problem is the how the event list is stylized in HTML after I filter my results. I have tried to add   and it does not seem to take and probably isn't the best practice.

I have been successful with using a table, but really don't like the look of it. Is there a way to just have an unordered list with appropriate spacing using a div or span tag? For example I would like for my list to look like

2/6/2013     Widget Company        Chicago
2/7/2013     Dodad Company2        Kansas City

rather than

2/6/2013 Widget Company Chicago
2/7/2013  Dodad Company2 Kansas City

Here is my code, currently as a table.

 {% if latest_events %}
     {% for event in latest_events %}
<table border="1">

     <tr>
       <td>  {{ event.event_date }}  </td> <td>{{ event.company  }}</td> <td> {{ event.venue  }} </td> <td>{{ event.city  }}</td>
     </tr>

     </table> 
{% endfor %}
</ul>
{% else %}
    <p>No Events are available.</p>
{% endif %}

Answer 1

Use the center template-tag - it will do the job for you.

Available alternatives: ljust and rjust

Answer 2

If all you want is extra spacing between the elements, add some padding.

http://jsfiddle.net/n762q/

table.associates td, table.associates th {
    padding-right: 2em;
}

<table class="associates">
    <thead>
        <tr>
            <th>Date</th>
            <th>Company</th>
            <th>City</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>2/6/2013</td>
            <td>Widget Company</td>
            <td>Chicago</td>
        </tr>

        <tr>
            <td>2/7/2013</td>
            <td>Dodad Company2</td>
            <td>Kansas City</td>
        </tr>
    </tbody>
</table>

Alternately, you could specify a min-width on your cells or the table itself.

http://jsfiddle.net/n762q/1/

table.associates {
    min-width: 70%;
}

Answer 3

The problem here is browsers strip sequences of white space, so(_ = space) ____ will become _. As stated above the solution is to style your table.

Just setting a width on the table element may give you the results you're looking for as tables do not consume more width than necessary by default. However they adjust their cells with the change of their width.

Answer 4

Just think what's your goal? To achieve that, not just Django or Python, you may use css style , e.g. :

<table border=1px style="width:100%;">
<tr>
       <td style="padding-left:10px; width=100px;"> {{ event.event_date }} </td> 
       <td style="text-align:center;width=40px;"> {{ event.company  }} </td> 
       <td style="text-align:center;width=40px;"> {{ event.venue  }} </td>
       <td style="text-align:center; width=40px;"> {{ event.city  }} </td>
</tr>
</table>

Answer 5

You are dealing here with HTML only, I recommend using Twitter Bootstrap since it comes with a lot of nice things(style/css) you can use and is really extremely easy to use. For example, it has tables, give it a look at it Twitter Boostrap tables or maybe the grid Twitter Bootstrap Grid