Question

I have two questions regarding to html table layout.

First I will provide some background I am designing a django web application as part of it I am laying out a list of cards that a user has on file in a table. I want bellow this to be a button allowing the user to add a card – Should this element be inside a final table row or should it just be after the table? I am merely asking to find what is the common/standard way of doing things.

Secondly, I later want to stylize the table so that each table row (or card) has its own layout probably something like this

************************
Card Name
***********************
Number:#####      Date:#####
other details blah, blah, blah
Manage Buttons (Edit/Delete/Etc..)
***********************

This is all tabular data but I am unsure if it should still be in a table or if it should be in custom views.

Here is my current django template

{% include "base.html" %}
<p>Credit Cards</p>
{% if credit_cards %}
    <table border="1">
        <tr>
            <th>Name On Card</th>
            <th>Card Number</th>
        <th>Contact Number On Card</th>
        <th>Lost Button</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
    {% for card in credit_cards %}
    <tr>
        <td>{{ card.name_on_card }}</td>
        <td>{{ card.card_number }}</td>
        <td>{{ card.contact_number_on_card }}</td>
        <td>
            <form action="" method="post"> {% csrf_token %}
                {% if card.is_lost %}
                    <p><input type="submit" value="I Found My Card"></p>
                {% else %}
                    <p><input type="submit" value="I Lost My Card"></p>
                {% endif %}
            </form>
        </td>
        <td>
            <form action="" method="post"> {% csrf_token %}
                <p><input type="submit" value="Edit"></p>
            </form>
        </td>
        <td>
            <form action="" method="post"> {% csrf_token %}
                <p><input type="submit" value="Delete"></p>
            </form>
        </td>
    </tr>
    {% endfor %}
    <tr><td colspan="6">Test</td></tr>
</table>
{% else %}
<p>No Credit Cards inserted yet.</p>
{% endif %}
<hr>
<p>ID Cards</p>
{% if id_cards %}
<table border="1">
    <tr>
        <th>Name On Card</th>
        <th>Card Number</th>
        <th>Issue Date</th>
        <th>Country</th>
        <th>Address</th>
    </tr>
    {% for card in id_cards %}
    <tr>
        <td>{{ card.name_on_card }}</td>
        <td>{{ card.card_number }}</td>
        <td>{{ card.issue_date }}</td>
        <td>{{ card.country }}</td>
        <td>{{ card.address }}</td>
    </tr>
    {% endfor %}
</table>    
{% else %}
    <p>No ID Cards inserted yet.</p>
 {% endif %}

<ul>
<li><a href="{% url crds_newCredit %}">Add Credit Card</a></li>
<li><a href="{% url crds_newID %}">Add ID Card</a></li>
</ul>

This is still very rough but you can probably get the general idea.

Answer 1

Its usually best to keep the button outside of the table as, semantically speaking, the button is operating on the table and therefore should be a separate element all to it’s own.

In terms of displaying the card view, that’s a personal preference and I would probably try divs as I wouldn’t want to be iteratively creating hundreds or thousands of nested tables.. on the other hand and, again semantically speaking, tabular data should always be in tables.