2011-11-10 50 views
0

我有兩個關於html表格佈局的問題。HTML按鈕應該放在表格還是外部標籤內?

首先我將提供一些背景我正在設計一個django web應用程序作爲它的一部分,我列出了用戶在表中存儲的卡片列表。我想讓它成爲一個允許用戶添加卡片的按鈕 - 這個元素是否應該放在最終的表格行中,還是應該放在表格之後?我只是要求找出通用/標準的做事方式。

其次,我以後要風格化的表,每個錶行(或卡)都有自己的佈局大概是這樣的

************************ 
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> 

這仍然是很粗糙,但你也許可以得到的總體思路。

回答

3

它通常最好將按鈕保持在表外,因爲從語義上來說,按鈕在表上操作,因此應該是一個獨立的元素。

就顯示卡片視圖而言,這是個人偏好,我可能會嘗試div,因爲我不想迭代地創建數百或數千個嵌套表格......另一方面,從語義上講,表格數據應始終在表格中。

相關問題