<div> + CSS 表格
<div> 元素是 HTML 中一個常用的容器標簽，它的作用是將文檔中的內容劃分成不同的塊，并提供了豐富的樣式和布局選項。在實際開發過程中，我們經常會使用 <div> 和 CSS 結合創建各種布局效果，其中包括表格。本文將通過幾個代碼案例詳細解釋如何使用 <div> 和 CSS 創建表格。
在開始之前，讓我們先復習一下 CSS 布局的一些基本概念。CSS 用于控制 HTML 元素的樣式和布局。在布局方面，我們可以通過控制元素的位置、大小、間距等屬性來實現不同的布局效果。使用 <div> 元素可以將文檔劃分為不同的區域，然后通過 CSS 來控制這些區域的樣式和布局。接下來，我們將通過幾個實例來詳細說明如何創建表格布局。
，我們來看一個簡單的表格布局案例。假設我們需要創建一個包含三列的表格，每個單元格內顯示不同的內容。下面是一個示例代碼：

<style>
.table {
display: table;
width: 100%;
table-layout: fixed;
}
<br>
    .row {
display: table-row;
}
<br>
    .cell {
display: table-cell;
border: 1px solid black;
padding: 10px;
}
</style>
<br>
<div class="table">
<div class="row">
<div class="cell">Cell 1</div>
<div class="cell">Cell 2</div>
<div class="cell">Cell 3</div>
</div>
</div>

在上面的例子中，我們使用了三個 <div> 元素分別代表表格的每一列。使用 CSS 樣式來實現表格的外觀效果。其中，.table 類設置了表格的一些基本屬性，如寬度、邊框等。.row 類用于表示表格中的一行，.cell 類用于表示每個單元格，并設置了單元格的邊框和內邊距。
下面我們來看一個稍微復雜點的表格布局案例。假設我們需要創建一個帶有標題行和多行數據的表格。下面是一個示例代碼：

<style>
.table {
display: table;
width: 100%;
table-layout: fixed;
}
<br>
    .row {
display: table-row;
}
<br>
    .header {
display: table-header-group;
font-weight: bold;
}
<br>
    .cell {
display: table-cell;
border: 1px solid black;
padding: 10px;
}
</style>
<br>
<div class="table">
<div class="row header">
<div class="cell">Header 1</div>
<div class="cell">Header 2</div>
<div class="cell">Header 3</div>
</div>
<br>
    <div class="row">
<div class="cell">Data 1</div>
<div class="cell">Data 2</div>
<div class="cell">Data 3</div>
</div>
<br>
    <div class="row">
<div class="cell">Data 4</div>
<div class="cell">Data 5</div>
<div class="cell">Data 6</div>
</div>
</div>

在上面的例子中，我們使用了兩個 ‘div’ 元素分別代表表格的標題行和數據行。同時，我們還給標題行加上了 ‘.header’ 類，以實現標題行的特殊樣式。通過這種方式，我們可以實現更多復雜的表格布局。
本文通過兩個實例展示了如何使用 <div> 和 CSS 創建表格布局。通過借助 CSS 的樣式和布局屬性，我們可以輕松地實現各種表格樣式，并且更加靈活地控制表格的樣式和布局。希望本文能對你理解 <div> + CSS 表格布局有所幫助！