在Web開發中,表格是一個經常使用的組件,可以展示各種數據信息。使用HTML語言可以輕松地創建表格,但是在樣式上有點單一。利用CSS可以更加豐富我們的表格樣式,并且可以實現一些動態效果。下面我們將介紹如何使用CSS實現表格。
<div class="table-container"> <div class="table-row"> <div class="table-cell header">表頭1</div> <div class="table-cell header">表頭2</div> <div class="table-cell header">表頭3</div> </div> <div class="table-row"> <div class="table-cell">內容1-1</div> <div class="table-cell">內容1-2</div> <div class="table-cell">內容1-3</div> </div> <div class="table-row"> <div class="table-cell">內容2-1</div> <div class="table-cell">內容2-2</div> <div class="table-cell">內容2-3</div> </div> </div>
以上是我們要實現的表格的HTML代碼。表格使用一個父級div包裹,每行使用一個子div包裹。每個子div都是使用類名table-cell來實現單元格的效果。表頭使用類名header來實現特殊效果。
.table-container { display: table; width: 100%; border-collapse: collapse; border-spacing: 0; } .table-row { display: table-row; } .table-cell { display: table-cell; vertical-align: middle; padding: 10px; border: 1px solid #ccc; } .header { background-color: #eee; font-weight: bold; }
這是CSS的代碼,主要使用了display屬性來創建一個table的效果,每行的display屬性為table-row,每個單元格的display屬性為table-cell。同時,使用了邊框的屬性來實現邊框的效果,表頭使用了特殊的背景顏色和字體加粗。使用這些樣式后,我們就實現了一個簡單的表格。我們可以通過修改CSS的樣式來更改表格的樣式。
上一篇css畫線寫字
下一篇div css 布局下載