Должна ли кнопка HTML находиться внутри таблицы или вне тегов?

Question

У меня есть два вопроса относительно макета таблицы html.

Сначала я предоставлю некоторую предысторию. Я разрабатываю веб-приложение django, в качестве части которого я выкладываю список карточек, которые есть у пользователя в файле.в таблице.Я хочу, чтобы ниже это была кнопка, позволяющая пользователю добавить карточку. Должен ли этот элемент быть в итоговой строке таблицы или только после таблицы?Я просто прошу выяснить, каков общий / стандартный способ ведения дел.

Во-вторых, позже я хочу стилизовать таблицу так, чтобы каждая строка таблицы (или карточка) имела свой собственный макет, вероятно, что-то вроде этого

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

Это все табличные данные, но я не уверен, должны ли они все еще быть в таблице или в пользовательских представлениях.

Вот мой текущий шаблон django

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

Это все еще очень грубо, но вы, вероятно, можете получить общее представление.

Answer 1

Обычно лучше держать кнопку вне стола, так как, с семантической точки зрения, кнопка работает на столе и, следовательно, должна быть отдельным элементом, принадлежащим ей.

С точки зрения отображения картыэто личное предпочтение, и я бы, вероятно, попробовал бы div, поскольку я не хотел бы создавать итеративно сотни или тысячи вложенных таблиц ... с другой стороны, и, опять-таки семантически говоря, табличные данные всегда должны быть в таблицах.