在網頁設計中,表格和表單都是常用的頁面元素之一。而使用div和CSS樣式來創建表格和表單,可以更加靈活地控制樣式和布局。
對于表格,可以使用多個div來創建:
<div class="table">
<div class="row">
<div class="cell">第一列</div>
<div class="cell">第二列</div>
<div class="cell">第三列</div>
</div>
<div class="row">
<div class="cell">第一列</div>
<div class="cell">第二列</div>
<div class="cell">第三列</div>
</div>
</div>
其中,table為整個表格的容器,row為行容器,cell為單元格容器。樣式可以使用CSS進行控制。
而對于表單,可以使用類似的結構:
<div class="form">
<div class="field">
<label for="name">姓名</label>
<input type="text" id="name" name="name">
</div>
<div class="field">
<label for="email">郵箱</label>
<input type="email" id="email" name="email">
</div>
<div class="field">
<label for="phone">電話</label>
<input type="tel" id="phone" name="phone">
</div>
</div>
其中,form為整個表單的容器,field為每個表單項的容器,包括一個label標簽和一個input標簽。同樣可以使用CSS進行樣式控制。
使用div和CSS樣式來創建表格和表單,可以避免使用傳統的table和form標簽,使頁面更加靈活和易于維護。