White Space in HTML from Django Template - html

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 %}

Use the center template-tag - it will do the job for you.
Available alternatives: ljust and rjust

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%;
}

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.

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

Related

How can I use for loop in HTML to display data in a table with format

So I'm a beginner and I'm using django and python. I created a table here and I want to display all data in a queryset. Plus I want to have 4 columns. So I want something like, for each four items in the queryset, create a and display the 4 items, but it seems like I can only do one item in each loop.
My code looks like this, and it's dipslaying one each row right now.
Code for the table
Is it possible to do this in html?
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column1</th>
<th>Column1</th>
<th>Column1</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td><img src="{{user.img_url}}"></td>
<td>{{user.username}}</td>
<td>{{user.email}}</td>
<td>{{user.bookmarks.count}}</td>
</tr>
{% endfor %}
</tbody>
</table>

Show auto-incremental serial number in html table

I have one django project. In the template html page, I use a table to demonstrate data. In the first row of the table, I want to show the ID of "i". But since the i.0 is the batch_id of the model, it does not increment from 1. How could I change the html of this page to show the serial number in first row starting from 1?
<table width="100" border="1" style="table-layout:fixed;position:relative;left:75px;" bordercolor="#E0E0E0">
<tr bgcolor="#F0F0F0">
<th width="55px" style="word-wrap:break-word;"><div class="panel-heading">ID</div></th>
<th width="130px" style="word-wrap:break-word;"><div class="panel-heading">Search Content</div></th>
</tr>
<tr>
{% for i in datas %}
<td style="word-wrap:break-word;"><div class="panel-body"><small>{{ i.0 }}</small></div></td>
<td style="word-wrap:break-word;color: #0066CC"><div class="panel-body"><strong><small>{{ i.2 }}</small></strong></div></td>
{% endfor %}
</tr>
</table>
As mentioned by Parth Modi, your current loop just output the td.
If every set of data should be in a new row, you need to wrap the tr.
For your "serial number", I think you just talk about the loop count, starting from 1?
{{ forloop.counter }} is what you are searching for.
For more info about this, you should read this.
First of all, if you need a table that has multiple rows you need to change the location of "For loop" as you are looping td not tr. You need to place for loop above to the tag and endfor should be below . For the Id related doubt can you please show me the context "datas".

Django textfield stretches the width of an html table? How can I prevent this?

I have a django table that's supposed to display the contents of each field of a model called Resource I wrote it like this, with results being a part of the contexts dictionary and simply containing filtered Resource objects.
<table style="width: 70%;">
<tr>
<th>Title</th>
<th>Author</th>
<th>Country</th>
<th>Description</th>
</tr>
{% for resource in results %}
<tr>
<td>{{ resource.title }}</td>
<td>{{ resource.author }}</td>
<td>{{ resource.country }}</td>
<td>{{ resource.description }}</td>
</tr>
{% endfor %}
The basic html table that created currently gets to dimensions of around 1500 x 3200. Pretty big, but that's not because my monitor is big or something like that. As a matter of fact, even if I had the css style set as width: 70% attribute or anything of that sort, the dimensions of the table do not change.
If I get rid of the following line, <td>{{ resource.description }}</td> which is supposed to display the Resource model's textfield known as "description", however, then then I can actually customize the width of the table and prevent it from being so long.
I need to be able to shorten the width of the table, and particularly this field. What can be done?
Try adding css for the description <td>.
stye="overflow-x: scroll; width: 300px;"
That way no matter how long is the description it won't stretch the table.

How to build a flask template with a list of json elements?

I'm pretty sure this should be an easy one. I am using Flask, and i am buildeing a template that gets a list of jeson elements. I wish to buil a table that lists those elements in an ordered manner, with reading specific attributes of each of the json elements in the list. the code i have been using is as follows:
<body>
<div class="container-fluid">
<h1> Users are: </h1>
<table>
<tr>
<th>user name</th>
<th>user fb_id</th>
<th>user mt_id</th>
<th>user ts_last_show_request</th>
</tr>
{% for item in users %}
<tr>
<td>item[fb_name]</td>
<td>item[fb_uid]</td>
<td>item[mt_uid]</td>
<td>item[ts_last_show_request]</td>
</tr>
{% endfor %}
</table>
</div>
</body>
But this code simply creates a nice table heading with a list of identical rows that don't interpret the 'item[mt_uid]' commands, but simply lists them.
You need to do this:
<tr>
<td>{{ item[fb_name] }}</td>
<td>{{ item[fb_uid] }}</td>
<!-- etc. -->
</tr>

Output product collection into a table along with static element in Shopify

I need to output a collection of products into a table on my index page. What is the best way to do this? I was looking in the docs and found the tablerow stuff. The problem is, that products are going to need to come out two at a time, that is there are two images in every row (two different products) and then in the next row are the names. I did things this way because it was the easiest way to keep everything lined up properly as the image sizes tend to change. Also, there's a static element that needs to be output into the table too. Any advice on this?
Here's the store:
https://hodkiewicz-zieme-and-hirthe180.myshopify.com/
Here's the relevant code:
<table>
<tr>
<td><img src="{{'carb-1.png' | asset_url}}"></td>
<td><img src="{{'carb-2.png' | asset_url}}"></td>
</tr>
<tr>
<td>1930 Speedster</td>
<td>1929-1931 Super 8</td>
</tr>
<tr>
<td><img src="{{'carb-3.png' | asset_url}}"></td>
<td><img src="{{'carb-4.png' | asset_url}}"></td>
</tr>
<tr>
<td>1932 Super 8</td>
<td>1929-1931 Standard 8</td>
</tr>
<tr>
<td><img src="{{'box.png' | asset_url}}"></td>
<td><img src="{{'carb-5.png' | asset_url}}"></td>
</tr>
<tr>
<td></td>
<td>1932 Standard 8</td>
</tr>
</table>
At the moment, I'm statically outputting all of the relevant images.
Wrap each image and the associated description in a div and output them together in a single table cell. That way you can still output everything using the tablerow instruction.
Furthermore, you can get clever with your static content and render that in the tablerow loop too. Use a combination of the row and column identifiers listed on the Shopify Wiki to find the cell you want the static content in, and render that instead of a product when you hit the correct cell.
Your code might look something like this
{% tablerow item in items cols: 3 %}
{% if tablerowloop.col_first && tablerowloop.last %}
<!-- Display static content! -->
{% else %}
<div class='table-item'>
{{item.image}}
<p>{{item.title}}</p>
</div>
{% endif %}
{% endtablerow %}