areas.html

{% for area in areas %}
<h1>{{ area.name }}</h1>

<ul>
{% for computer in area.computers.all %}
<li>{{ computer.name }}</li>
{% endfor %}
</ul>
{% endfor %

models.py

class Area(models.Model):
    name = models.CharField(max_length=255)

class Computer(models.Model):
    name = models.CharField(max_length=255)
    area = models.ForeignKey(Area, related_name="computers")

views.py

def areas(request):
    queryset = Area.objects.select_related("computers").all()

    return render_to_response(request, {"areas": queryset}, "areas.html")

So taking this one step further would look like.

---

models.py

class Building(models.Model):
    name = models.CharField(max_length=255)

class Area(models.Model):
    name = models.CharField(max_length=255)
    building = models.ForeignKey(Building, related_name="areas")

class Computer(models.Model):
    name = models.CharField(max_length=255)
    area = models.ForeignKey(Area, related_name="computers")

---

areas.html

{% for building in buildings%}
<h1> {{building.BuildingName}} </h1>

{% for area in building.area.all %}
<h2>{{ area.name }}</h2>

<ul>
{% for computer in area.computers.all %}
<li>{{ computer.name }}</li>
{% endfor %}
</ul>
{% endfor %}

---

views.py

def buildings(request):
    queryset = Building.objects.select_related("areas", "areas__computers").objects.all()
    return render_to_response(request, {"buildings": queryset}, "areas.html")

---