<div>和<span>是HTML中常用的標簽之一，可以用來創建網頁中的表格，并實現樣式上的定制。本文將詳細介紹如何使用<div>和<span>標簽來制作表格，并通過一些代碼案例來進行說明。
<div>標簽用于定義HTML文檔中的一個區域或者一個塊級元素。它可以用來劃分網頁的不同部分，使頁面的結構更加清晰明了。在表格制作中，我們可以使用<div>來創建一個表格的容器，并將表格中的不同部分放置在不同的<div>元素中，以方便我們對表格進行樣式上的控制。
<span>標簽用于定義HTML文檔中的一個行內元素，并可以用于組織和樣式化文本。在表格制作中，我們可以使用<span>標簽來設置表格中的文本內容的樣式，例如對于某一行或某一列的標題我們可以使用<span>來設置其樣式，以突出顯示。
下面我們將通過一些代碼案例來詳細說明如何使用<div>和<span>來制作表格。

代碼案例一：

<code>
<div>
<span style="font-weight: bold">姓名</span>
<span style="font-weight: bold">年齡</span>
<span style="font-weight: bold">性別</span>
</div>
<div>
<span>小明</span>
<span>20</span>
<span>男</span>
</div>
<div>
<span>小紅</span>
<span>22</span>
<span>女</span>
</div>
</code>

在上述代碼中，我們使用<div>和<span>標簽來制作了一個簡單的表格。通過<div>標簽來包裹每一行的內容，然后使用<span>標簽來設置每一行內的各個單元格的樣式。其中，通過設置"font-weight: bold"屬性使得第一行的標題文字加粗顯示，從而突出顯示表格的標題。

代碼案例二：

<code>
<div style="display: table">
<div style="display: table-row">
<span style="display: table-cell; font-weight: bold">姓名</span>
<span style="display: table-cell; font-weight: bold">年齡</span>
<span style="display: table-cell; font-weight: bold">性別</span>
</div>
<div style="display: table-row">
<span style="display: table-cell">小明</span>
<span style="display: table-cell">20</span>
<span style="display: table-cell">男</span>
</div>
<div style="display: table-row">
<span style="display: table-cell">小紅</span>
<span style="display: table-cell">22</span>
<span style="display: table-cell">女</span>
</div>
</div>
</code>

在上述代碼中，我們使用<div>和<span>標簽來制作了一個更加復雜的表格。通過設置"display: table"屬性，我們將<div>元素變為一個表格容器；通過設置"display: table-row"屬性，我們將<div>元素變為一個表格的行；通過設置"display: table-cell"屬性，我們將<span>元素變為表格的單元格。通過這樣的設置，我們可以更加靈活地控制表格的結構和樣式。

綜上所述，通過使用<div>和<span>標簽來制作表格，我們可以更加靈活地控制表格的結構和樣式，使其更加符合我們的需求。在實際的網頁制作過程中，我們可以根據具體的需求和設計要求，靈活運用<div>和<span>標簽來創建出符合我們預期的表格效果。
參考文章： - W3Schools. (n.d.). HTML div Tag. Retrieved from https://www.w3schools.com/tags/tag_div.asp - MDN Web Docs. (n.d.). HTML div element. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div - W3Schools. (n.d.). HTML span Tag. Retrieved from https://www.w3schools.com/tags/tag_span.asp - MDN Web Docs. (n.d.). HTML span element. Retrieved from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span