翻譯自: http://www.dummies.com/how-to/content/using-the-div-tag-to-create-tables.html
在網頁上創建表格這項工作不僅很容易出錯，並且使用舊的html標籤來完成也有相當的困難度。此外，使用舊標籤來製作表格有時也是相當缺乏使用彈性的。好在，現今我們已經有了更嶄新的技術來完成創建表格這項任務，你只需使用一連串有關連性的div標籤即可執行這項工作。
放眼過去，我們已有許多的開發者使用表格來呈現具次序性的資料。在這用途上我們只單純地用表格來呈現資料。但是，另一個表格的用途是用於版面配置，此用途是用來確保表格內的各個元素可以被預期性的排列配置。第二種使用表格的方式會混淆像是螢幕閱讀器等的軟體，因此是會存在一些問題的。而這對於一個想要具備良好網頁結構以及提供良好閱讀習慣的網頁而言，無疑產生了大大的問題。
然而，使用 div 標籤來創建表格，不管是用來呈現資料或是邏輯性的配置各種控制項位置都是同樣地得心應手。採用這樣的做法有著不會混淆螢幕閱讀器和其他軟體的好處。並且，使用div標籤來創建表格頗像是在用舊的table標籤創建表格一樣，你不用擔心需要使用一些不得人知的冷門標籤。
以下是一個div表格的範例，裡頭包含了一個標題，各欄位的欄位名稱和兩筆資料。
請注意每個div的層級都使用了可辨識的類別名稱，像是Table、Title、Heading、Row和Cell。使用如此的命名方法有助於我們去想像哪一個層級到底負責什麼事情。你或許可以在網路上找到其他的替代方案，但是這個基本的思考途徑將提供你很大的協助。至於針對這個 div 表格的 css內容，則是使用了一些特別的 css 屬性並且使用了一點小技巧。
以下是針對這個範例的css內容：
麻煩請特別多看幾眼這裡面所使用的display屬性。display屬性是這個div表格得以呈現的關鍵點，因為它告知了我們的瀏覽器應該如何去呈現我們的div表格。除了display 之外，其實我們並沒有設置些什麼特別的樣式設定。只是單純地定義了text相關屬性來協助觀看者區別出表格內容，以及在儲存格裡設置了簡單的框線來區隔資料。
以下的圖片是實際在瀏覽器上的呈現效果：
放眼過去，我們已有許多的開發者使用表格來呈現具次序性的資料。在這用途上我們只單純地用表格來呈現資料。但是，另一個表格的用途是用於版面配置，此用途是用來確保表格內的各個元素可以被預期性的排列配置。第二種使用表格的方式會混淆像是螢幕閱讀器等的軟體，因此是會存在一些問題的。而這對於一個想要具備良好網頁結構以及提供良好閱讀習慣的網頁而言，無疑產生了大大的問題。
然而，使用 div 標籤來創建表格，不管是用來呈現資料或是邏輯性的配置各種控制項位置都是同樣地得心應手。採用這樣的做法有著不會混淆螢幕閱讀器和其他軟體的好處。並且，使用div標籤來創建表格頗像是在用舊的table標籤創建表格一樣，你不用擔心需要使用一些不得人知的冷門標籤。
以下是一個div表格的範例，裡頭包含了一個標題，各欄位的欄位名稱和兩筆資料。
<div
class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>請注意每個div的層級都使用了可辨識的類別名稱，像是Table、Title、Heading、Row和Cell。使用如此的命名方法有助於我們去想像哪一個層級到底負責什麼事情。你或許可以在網路上找到其他的替代方案，但是這個基本的思考途徑將提供你很大的協助。至於針對這個 div 表格的 css內容，則是使用了一些特別的 css 屬性並且使用了一點小技巧。
以下是針對這個範例的css內容：
<style
type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>麻煩請特別多看幾眼這裡面所使用的display屬性。display屬性是這個div表格得以呈現的關鍵點，因為它告知了我們的瀏覽器應該如何去呈現我們的div表格。除了display 之外，其實我們並沒有設置些什麼特別的樣式設定。只是單純地定義了text相關屬性來協助觀看者區別出表格內容，以及在儲存格裡設置了簡單的框線來區隔資料。
以下的圖片是實際在瀏覽器上的呈現效果：
沒有留言:
張貼留言