div 改 table
<div>和<table>是HTML中常用的兩個標簽，分別用于創建和布局網頁中的不同元素。在過去的一段時間里，使用<table>標簽來布局頁面是很常見的做法。然而，隨著Web技術的發展，<div>標簽的使用已經變得越來越流行。本文將詳細介紹如何使用<div>標簽替代<table>標簽，并提供幾個代碼案例來展示其使用方法。

<div>標簽是一個通用的容器，可以用于包含各種內容，例如文本、圖像、表單等。相比之下，<table>標簽則是專門用于創建和布局表格的元素。在過去，由于缺乏更好的替代方案，使用<table>標簽來布局整個頁面是一種常見的做法。然而，隨著Web標準的發展和CSS技術的成熟，使用<div>標簽取代<table>標簽成為了更加流行的趨勢。

<div>標簽可以通過CSS進行樣式和布局的控制，使得頁面的設計更加靈活和創造性。相比之下，<table>標簽則有一些局限性，例如難以實現復雜的布局、改變單元格大小的困難等。<div>標簽的布局可以通過使用CSS中的flexbox、grid等屬性來實現，靈活性和自由度都更高。

代碼案例1: 使用<div>標簽替代簡單的表格布局

<style>
.container {
display: flex;
flex-wrap: wrap;
}
<br>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 10px;
}
</style>
<br>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>

上面的代碼案例中，我們使用了一個容器<div class="container">來包含三個框<div class="box">。通過設置容器的display屬性為flex，我們可以實現這三個框的水平布局。我們還通過設置框的寬度、高度、邊框和外邊距等屬性來調整它們的樣式。整個布局使用<div>標簽來實現，而不是使用<table>標簽和<tr>/<td>來創建表格。

代碼案例2: 使用<div>標簽替代復雜的表格布局

<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
<br>
.box {
border: 1px solid black;
padding: 10px;
}
</style>
<br>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
</div>

上面的代碼案例展示了使用<div>標簽和CSS的grid屬性來實現復雜布局。通過設置容器的display屬性為grid，我們可以創建一個具有網格結構的布局。其中，grid-template-columns屬性定義了每列的寬度，grid-gap屬性定義了網格之間的間隔。通過在容器中添加多個框<div class="box">，我們可以在網格布局中放置更多的內容，實現更復雜的頁面布局。

：
<div>標簽作為一個通用容器，可以靈活地替代<table>標簽來創建和布局網頁中的各種元素。通過使用CSS的flexbox、grid等屬性，我們可以實現更靈活、自由的頁面布局。在實際開發中，我們應該根據具體情況選擇合適的標簽和布局方式，以達到更好的用戶體驗和代碼可維護性。