在HTML中,table是用來制作表格的標簽。但是有時候,我們需要更靈活的制作表格,這時候,我們可以使用div和CSS來制作表格。
首先,我們需要創建一個div,然后通過CSS設置它的寬度和邊框樣式,來制作表格的外框。代碼如下:
<div class="table"> ... </div>
接下來,我們需要在div中添加一些子元素,作為表格的行和列。可以使用div或者其他HTML元素來充當表格的行和列,然后在CSS中設置它們的樣式,來達到制作表格的效果。代碼如下:
<div class="table"> <div class="row"> <div class="col">A1</div> <div class="col">B1</div> <div class="col">C1</div> </div> <div class="row"> <div class="col">A2</div> <div class="col">B2</div> <div class="col">C2</div> </div> <div class="row"> <div class="col">A3</div> <div class="col">B3</div> <div class="col">C3</div> </div> </div>
在CSS中,我們使用了flex布局來設置每一行的子元素排列方式,并使用了邊框和padding來設置每個單元格的樣式。
最終,我們就可以得到一個用div和CSS制作的表格了。
上一篇div右排列 css
下一篇div+css 浮動