CSS方塊表格是Web開發中常用的一種排版方式,可以讓數據以表格的形式呈現出來,這篇文章將介紹如何用CSS創建方塊表格。
HTML代碼: <div class="table"> <div class="row"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> </div> <div class="row"> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> </div> CSS代碼: .table { display: table; border-collapse: collapse; width: 100%; } .row { display: table-row; height: 30px; } .cell { display: table-cell; border: 1px solid #ccc; text-align: center; vertical-align: middle; width: 33.33%; }
上面的HTML代碼創建了一個class為table的div,其中包含兩個class為row的div,每個row包含三個class為cell的div。這種方式可以輕松實現任何大小的表格,并支持動態增加或刪除內容。
通過CSS代碼,我們將table div設置為表格展示模式,并同時設置了表格的邊框為合并模式。row div被定義為表格行,每行的高度為30像素。cell div被設置為表格單元格,寬度為表格的三分之一。此外,還可以定義文本對齊方式和垂直對齊方式。
總的來說,CSS方塊表格是一種易于實現的方式來呈現數據。借助CSS的靈活性,可以輕松地自定義表格的外觀和行為,并將表格集成到網站和應用程序中。
上一篇css方塊旋轉
下一篇css方塊中間空白效果