表格（英語：table）是一種在頁面中非常常見的內容形式，用於呈現以二維形式組織的數據。表格有專門的HTML語法，在MediaWiki中，wikitext也可以用來產生表格。在編輯源代碼時，編輯工具欄中的
表格按鈕可以很方便地創建表格，你也可以手動輸入wikitext語法來創建表格。可視化編輯器也可以創建表格，並且能夠很方便地合併單元格、插入或刪除行列。本頁主要介紹表格的wikitext語法，不多介紹在可視化編輯器中的用法。
需要注意的是，不要濫用表格。表格一般不應當用來排版，更不應該添加花里胡哨的樣式。在求聞百科中使用表格時，須遵守Qiuwen:無障礙訪問方針。
基本語法
一個表格的基本語法如下：
{| class="wikitable"
|+ 標題文本
|-
! 標題文本 !! 標題文本 !! 標題文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
效果如下：
| 標題文本 | 標題文本 | 標題文本 |
|---|---|---|
| 示例 | 示例 | 示例 |
| 示例 | 示例 | 示例 |
在這個例子中，{|表示一個表格的開始，必須位於一行的開頭。每個wikitext表格都是以這個符號開頭的，其後接表格的基本屬性。大多數表格都需要wikitable類以實現基本的格式化，因此添加class="wikitable"。
其後以|+開頭的是表格標題（英語：caption），標題會顯示在表格的最頂部，寬度不會超過表格自身的寬度。標題是可選的，通常包含對這個表格的基本描述。
|-將表格分成了多行。每一行則是由相等數量的單元格組成。在上面的例子中，以|開頭的是普通的單元格（英語：table cell）；以!開頭的是表頭（英語：table heading），從屏幕顯示中可以看出表頭的背景顏色比普通的單元格略深一些，且默認會顯示為居中、加粗。表頭也是可選的，但通常情況下一個表格應該要有一個表頭。單元格按照先分行（英語：row）後分列（英語：column）的順序排列。
在代碼的同一行內，多個單元格可以使用!!和||分開，如果每個單元格一行，則單元格可以直接以!或|開頭。
跨列與跨行
rowspan和colspan屬性分別用來表示表格的跨行和跨列。這裡所說的屬性應該添加在單元格的開始處，並與內容用一個「|」分開。
{| class="wikitable"
|+ 標題文本
|-
! 標題文本 !! 標題文本 !! 標題文本
|-
| rowspan="2" | 跨行文本 || 示例 || 示例
|-
| colspan=2" | 跨列文本
|}
效果如下：
| 標題文本 | 標題文本 | 標題文本 |
|---|---|---|
| 跨行文本 | 示例 | 示例 |
| 跨列文本 |
這個跨行文本占了它下方的一行，因此在書寫第二行的時候，忽略了第一列，直接開始寫第二列。由於第二行的第二列跨了兩列，因此第二行沒有第三列。
當然，一個單元格可以同時跨列和跨行。例如：
{| class="wikitable"
|+ 標題文本
|-
! 標題文本 !! 標題文本 !! 標題文本
|-
| colspan="2" rowspan="2" | 橫跨兩行兩列 || 示例
|-
| 示例
|-
| 示例 || 示例 || 示例
|}
效果如下：
| 標題文本 | 標題文本 | 標題文本 |
|---|---|---|
| 橫跨兩行兩列 | 示例 | |
| 示例 | ||
| 示例 | 示例 | 示例 |
屬性
你可以為表格的各個元素添加屬性（英語：attribute），這些屬性包括表格屬性、單元格屬性、行屬性和表格標題屬性。屬性通常用來設置表格的樣式，有時也可以使用其他的屬性。
表格屬性
表格屬性添加在表格最開頭的{|後面，將應用於整個表格。我們通常所添加的class="wikitable"就是應用於整個表格的。下面這個例子中，我們不添加wikitable類，而是為整個表格設置文本顏色，並添加邊框。在這個例子中，整個表格都是綠色文字、藍色邊框的。
{| class="wikitable" style="color:green; border:2px dashed blue"
|-
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
單元格屬性
單元格屬性應用於單個單元格。單元格屬性應用在單元格內容與單元格分隔符之間，並用|隔開。例如，在這個例子中，將左下角的單元格設置文本顏色並添加邊框，而不影響其他的單元格：
{| class="wikitable"
|-
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| style="color:green; border:2px dashed blue" | 示例 || 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
行屬性
你可以為表格的特定的行添加屬性，這些屬性將應用於整個行上。行屬性直接添加在行分隔符|-之後。在本例中，為標題行後面的一行應用樣式。
{| class="wikitable"
|-
! 標題文本 !! 標題文本
|- style="color:green; border:2px dashed blue"
| 示例 || 示例
|-
| 示例 || 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
表格標題屬性
屬性也可以應用於表格的標題。例如，CSS樣式caption-side可以設置表格標題應用在表格的什麼位置。
{| class="wikitable"
|+ style="color:green; border:2px dashed blue; caption-side:bottom" | 標題文本
|-
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
樣式
樣式（英語：style）是表格內容最常見的一種屬性，它主要包括了表格的各種顯示方式。例如，表格如何排版布局，顯示為什麼顏色，這些都屬性樣式。定義表格樣式所使用的是CSS。
寬度和高度
CSS的width和height屬性可以設置表格的寬度和高度。寬度和高度的類型都屬於長度，其值可以是相對值，也可以是絕對值。除非值為0，否則必須要有單位。
寬度和高度可以應用於整個表格，也可以應用於單個單元格。當應用於單元格時，其同一行或同一列的單元格的相應尺寸也會受到影響。
簡單的寬度和高度
下面這個表格的寬度為80%，這是一個相對值，意味着表格將占用容器寬度的80%。其中，第一列的寬度為2em，這是一個絕對值，無論容器的大小是多少，第1列的寬度都是3em。不難推斷出，第2列將占用表格的剩餘的空間。
{| class="wikitable" style="width: 80%"
! 標題1
! 標題2
|-
| style="width:3em" | 1行1列
| 1行2列
|-
| 2行1列
| 2行2列
|}
| 標題1 | 標題2 |
|---|---|
| 1行1列 | 1行2列 |
| 2行1列 | 2行2列 |
此外，寬度也可以用來指定單元格的大小分配。在下面這個例子中，三個列所占的寬度分別為整個表格的寬度的20%、20%、60%。儘管第1列的文本比其他列的文本多，但是由於指定了寬度，因此內容的數量不會影響寬度。
{| class="wikitable"
! 標題1
! 標題2
! 標題3
|-
| style="width:20%" | 1行1列
| style="width:20%" | 1行2列
| style="width:60%" | 1行3列
|-
| 2行1列有很多很多文本
| 2行2列
| 2行3列
|}
| 標題1 | 標題2 | 標題3 |
|---|---|---|
| 1行1列 | 1行2列 | 1行3列 |
| 2行1列有很多很多文本 | 2行2列 | 2行3列 |
style中的width和heightCSS屬性，如style="width=80%"而不是直接設置像width="80%"這樣的節點屬性。複雜的寬度與高度
在一些情況下，絕對寬度和相對寬度或高度可能都沒有辦法滿足需求。在這種情況下，可以使用複雜的表格寬度和高度。這裡僅作參考，事實上並不推薦使用過於複雜的寬度和高度。
下面這個表格的寬度為min(max(70%, 20em), 100%)。意思是，當20em的長度小於容器寬度的70%時，這個表格的寬度是20em，否則為容器寬度的70%。但是，如果容器寬度本身小比較小，以至於小於20em，那麼表格的寬度就是容器寬度的100%，以免超出容器寬度。
{| class="wikitable" style="width: min(max(70%, 20em), 100%)"
|+ 標題文本
|-
! 標題文本 !! 標題文本 !! 標題文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
| 標題文本 | 標題文本 | 標題文本 |
|---|---|---|
| 示例 | 示例 | 示例 |
| 示例 | 示例 | 示例 |
下面這個表格的寬度為calc(100% - 2em)。這個很好理解，這個寬度是相對寬度和絕對寬度的混合，其寬度是容器寬度減去2em。
{| class="wikitable" style="width: calc(100% - 2em)"
|+ 標題文本
|-
! 標題文本 !! 標題文本 !! 標題文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
| 標題文本 | 標題文本 | 標題文本 |
|---|---|---|
| 示例 | 示例 | 示例 |
| 示例 | 示例 | 示例 |
表格內容的自動排版
一般情況下，如果不指定寬度，那麼表格的寬度以及各單元格的寬度是自動調整的，會根據內容來進行分配。如果指定了整個表格的寬度和高度，但是沒有指定單元格的寬度和高度，那麼這個單元格的寬度和高度也會自動分配。
在下面這個例子中，表格的寬度不會超過40個字符的寬度，字符多的單元格會分配更寬的寬度。
{| class="wikitable" style="width: min(40em, 100%)"
|+ 自動排版的表格
|-
! 標題1 !! 標題2 !! 標題3
|-
| 這是一個很多文本的單元格，內容非常非常多，需要占用比較多的空間，以便呈現其內容。
| 內容很少的單元格
| 這個單元格的內容也比較少。
|-
| 這個內容很少。
| 內容很少的單元格。
| 這個單元格的內容也是比較少的。
|}
| 標題1 | 標題2 | 標題3 |
|---|---|---|
| 這是一個很多文本的單元格，內容非常非常多，需要占用比較多的空間，以便呈現其內容。 | 內容很少的單元格 | 這個單元格的內容也比較少。 |
| 這個內容很少。 | 內容很少的單元格。 | 這個單元格的內容也是比較少的。 |
表格對齊
一般來說，表格對齊的方式取決於皮膚默認設置，表格內部文本對齊的方式取決於其外部元素。你也可以手動定義。
表格相對外部的對齊
表格相對外部元素的對齊的方式是不確定的，會取決於不同的皮膚。margin樣式可以指定表格在頁面中應該如何對齊，例如下面這個例子中，表格是右對齊的：
{| class="wikitable" style="margin-left: auto; margin-right: 0"
|+ 右對齊的表格
! 標題1 !! 標題2 !! 標題3
|-
| 內容1 || 內容2 || 內容3
|-
| 內容4 || 內容5 || 內容6
|}
| 標題1 | 標題2 | 標題3 |
|---|---|---|
| 內容1 | 內容2 | 內容3 |
| 內容4 | 內容5 | 內容6 |
如果指定margin-left: 0、margin-right: 0，或者直接指定margin: 0，那麼表格會向居中對齊：
{| class="wikitable" style="margin: auto"
|+ 右對齊的表格
! 標題1 !! 標題2 !! 標題3
|-
| 內容1 || 內容2 || 內容3
|-
| 內容4 || 內容5 || 內容6
|}
| 標題1 | 標題2 | 標題3 |
|---|---|---|
| 內容1 | 內容2 | 內容3 |
| 內容4 | 內容5 | 內容6 |
表格內的文本的對齊
text-align樣式可以指定表格內部的文本應該如何對齊。它的值通常是left、center和right。例如：
{| class="wikitable" style="min-width: min(15em, 100%)"
|-
! 表格水平對齊演示
|-
| style="text-align:left" | 左對齊
|-
| style="text-align:center" | 居中
|-
| style="text-align:right" | 右對齊
|}
| 表格水平對齊演示 |
|---|
| 左對齊 |
| 居中 |
| 右對齊 |
text-align也支持一些特殊的值，例如start和end，意思是文本書寫方向的開始方向和結束方向。在中文環境下，它們分別相當於left和right，而在一些從右往左書寫的文本中，則是相反的。
vertical-align屬性可以設置單元格的垂直對齊：
{| class="wikitable"
! colspan="3" | 表格垂直對齊演示
|- style="height:5em"
| style="vertical-align:top" | 頂端對齊
| style="vertical-align:middle" | 中間對齊
| style="vertical-align:bottom" | 底端對齊
|}
| 表格垂直對齊演示 | ||
|---|---|---|
| 頂端對齊 | 中間對齊 | 底端對齊 |
align="left"或valign="top"這樣的屬性。表格浮動
float屬性可以讓表格與文字浮動。例如，將屬性float: right應用於整個表格，就會有下面這樣的效果：
擁有 float: right樣式的表格標題 標題 標題 單元格 單元格 單元格 求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。
需要注意的是，表格浮動有個很明顯的負面效果，如果屏幕本身就是比較窄的，那麼浮動後留下給正方的空間就不多了，甚至沒有留下空間，導致排版的問題。可以使用floatleft和floatright類，擁有此類的元素默認是會浮動的，但是如果屏幕空間比較小，則也不會浮動，從而避免影響對內容的顯示。使用桌面版瀏覽器的讀者可以嘗試調整窗口大小以檢查在不同大小下的顯示情況。
擁有 floatright類的表格標題 標題 標題 單元格 單元格 單元格 求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。求聞百科，共筆求聞。
float: right的屬性，使其也是顯示為非浮動的形式。單元格襯距
padding屬性可以設置單元格內容與其邊界的距離。例如：
{| class="wikitable"
! colspan=2 | 單元格襯距演示
|-
| style="padding:2em" | 距離四周2em
| style="padding-top:3em" | 距離頂部3em
|-
| style="padding:0" | 與四周沒有距離
| style="padding:1em 2em 3em 4em" | 與四周距離各不相同
|}
| 單元格襯距演示 | |
|---|---|
| 距離四周2em | 距離頂部3em |
| 與四周沒有距離 | 與四周距離各不相同 |
注意襯距與間距的區別：間距是單元格之間的距離，單元格本身不會占用任何間距的位置，而襯距是單元格內部的文字與單元格邊距的距離，其仍屬於單元格自身所占的位置。也就是說，間距在邊框之外，邊框在襯距之外，而襯距則在內容之外。
padding:1em 2em 3em 4em是padding-top:1em; padding-right:2em; padding-bottom:3em; padding-left:4em的縮寫，顯然，將四個方向的襯距寫在一個屬性裡面更簡潔。記住這個順序：上、右、下、左。若只有三個值，則分別表示上、左右、下；兩個值則分別表示上下和左右。若只有一個值，例如上面的例子中的padding:2em，則表示上下左右四個方向均應用相同大小的襯距。cellpadding。邊框
CSS的border屬性可以設置表格的邊框。定義邊框的時候，需要設置邊框的類型、顏色和寬度。
wikitable類的表格的每個單元格都會自動擁有灰色的邊框。簡單邊框用法
下面這個是一個最簡單的用法，它給整個表格添加了一個紅色的、2像素寬的實線邊框：
{| class="wikitable" style="border: 2px red solid"
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
在這個例子中，border: 2px red solid相當於border-width: 2px; border-color: red; border-style: solid。
此外，你也可以給單個單元格添加邊框，例如在這個例子中，只給最後一個單元格添加了綠色、虛線的邊框：
{| class="wikitable"
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| 示例 || style="border: 2px green dashed" | 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
移除邊框
使用border: none可以給一個已經有邊框的單元格移除邊框。默認情況下，表格是沒有邊框的，但是wikitable類會自動給每個單元格添加邊框。如果我們使用border: none，就可以移除掉單元格的邊框。
{| class="wikitable"
! 標題文本 !! 標題文本
|-
| style="border: none" | 示例 || style="border: none" | 示例
|-
| style="border: none" | 示例 || style="border: none" | 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
為不同方向設置邊框
表格和單元格的邊框並非只能為各個方向同時設置，可以為不同的方向設置邊框，甚至可以為不同的方向的邊框設置屬性。
border-left表示左側的邊框，它包括了border-left-color、border-left-width、border-left-style等屬性。同樣地，還有border-top、border-right和border-bottom，分別表示上側、右側和下側的邊框。
此外，也可以使用border-block（包含border-block-start和border-block-end）和border-inline（包含border-inline-start、border-inline-end），表示當前書寫方向的塊狀或者行內元素的開始或者結束方向的邊框。在默認的書寫模式下，塊狀元素是從上到下，行內元素是從左到右，因此border-block-start相當於border-top，border-block-end相當於border-bottom，border-inline-start相當於border-left，border-inline-end相當於border-right。
這個例子分別為表格定義了四個方向上的邊框，上、右、下、左方向的邊框分別為紅色、綠色、藍色和黑色，粗細和邊框類似各不相同。
{| class="wikitable" style="border-top: 2px red solid; border-right: 3px green dashed; border-bottom: 4px blue double; border-left: 5px black inset"
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
下面這個例子類似，但是使用的是border-block和border-inline，因此在不同的書寫模式下，其邊框所應用的方向也是不同的。
{| class="wikitable" style="border-block-start: 2px red solid; border-inline-end: 3px green dashed; border-block-end: 4px blue double; border-inline-start: 5px black inset"
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}
為了便於演示，這裡以水平文本（默認情況）和垂直文本的形式分別展示這個表格：
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
你還可以指定不同方向的邊框的同一種屬性。和大多數CSS屬性一樣，遵循「上、右、下、左」的順序。在下面這個例子中，表格的所有方向的邊框都是2px寬的實線，但是各個方向的顏色均不相同：
{| class="wikitable" style="border: 2px solid; border-color: orange greenyellow navy magenta"
! 標題文本 !! 標題文本
|-
| 示例 || 示例
|-
| 示例 || 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
留意邊框與寬度
通常情況下，表格等塊狀元素的寬度和高度可能不包括邊框，因此如果添加了邊框，其實際的寬度和高度可能會超過指定的值。如果塊狀元素的寬度和高度超過的指定的值，可以設置box-sizing屬性，以指定其寬度和高度是否包括了邊框。
背景
background-color樣式可以設置表格的填充，background是一系列樣式的簡寫。有兩個單元格添加了背景顏色，分別是淺綠色和青色。
{| class="wikitable"
|-
! 標題文本 !! 標題文本
|-
| style="background-color: lime" | 示例 || 示例
|-
| 示例 || style="background-color: cyan" | 示例
|}
| 標題文本 | 標題文本 |
|---|---|
| 示例 | 示例 |
| 示例 | 示例 |
- 不要濫用這個功能。一般來說，
wikitext類已經可以完成基本的格式化，無需再單獨設置邊框和填充。 - 使用邊框和填充時，必須考慮無障礙，確保色覺不佳、使用黑白輸出或辨別能力不強的閱讀者也能閱讀表格內容。
- 不要使用
bgcolor等HTML屬性來為表格設置背景顏色。
無障礙考慮
在使用表格時，須考慮表格的無障礙（英語：accessibility），確保表格在不同的顯示設備上也能夠正常地顯示，同時在輔助技術（例如盲文）中也可以正常地呈現。
良好的表格標題語義
表示表格標題時，應該使用專門的表格標題（以!開頭的內容），而不是使用手動加粗的方式來使它看上去像個標題。這是因為，表格標題除了具有顯示樣式之外，還能夠表示這是一個表格標題，從樣式上能夠做到形式統一，同時也有助於輔助技術對表格的解析。
錯誤使用表格標題的例子：
{| class="wikitable"
|- style="text-align: center"
| '''標題文本''' || '''標題文本''' || '''標題文本'''
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
正確使用表格標題的例子：
{| class="wikitable"
|-
! 標題文本 !! 標題文本 !! 標題文本
|-
| 示例 || 示例 || 示例
|-
| 示例 || 示例 || 示例
|}
此外，還可以添加scope="col"或scope="row"屬性來表示這是一個列標題或者行標題，這樣輔助技術在使用表格時，能夠更好的理解。
{| class="wikitable"
|-
!
! scope=col | 列標題1
! scope=col | 列標題2
|-
! scope=row | 行標題1
| 示例
| 示例
|-
! scope=row | 行標題2
| 示例
| 示例
|}
| 列標題1 | 列標題2 | |
|---|---|---|
| 行標題1 | 示例 | 示例 |
| 行標題2 | 示例 | 示例 |
合適的內容
表格通常是用來呈現數據的，並不適合用來去呈現大量的內容。如果需要呈現大量內容的，最好的辦法是直接使用文字來表述。而且，如果表格的列數比較多，而單元格的內容也比較多的話，那麼每個單元格需要顯示大量的內容但又分配了很少的空間，這對於內容的顯示也是不利的。
表格並非用來排版的
很多人可能會喜歡使用表格來對內容進行排版。例如，如果要顯示左右兩側的內容，那麼他可能會這麼寫：
{|
| 左邊的內容。左邊的內容。左邊的內容。左邊的內容。
| 右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。
|}
| 左邊的內容。左邊的內容。左邊的內容。左邊的內容。 | 右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。 |
這樣做的缺點就是：表格自身已經預設有邊距、襯距等屬性，這會對內容的排版造成不利的影響。此外，表格會對輔助工具呈現為表格，對於使用輔助工具的用戶來說，這就有可能造成困惑。對內容進行排版的最好的方式，是使用CSS的flex和grid布局，這兩種布局都非常強大且非常靈活。使用CSS來模擬表格也是一種選擇，但是這樣子也存在一些限制。
<div style="display: flex"> <div style="flex: 1">左邊的內容。左邊的內容。左邊的內容。左邊的內容。</div> <div style="flex: 1">右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。</div> </div>
<div style="display: grid; grid-auto-flow: column"> <div>左邊的內容。左邊的內容。左邊的內容。左邊的內容。</div> <div>右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。</div> </div>
<div style="display: table-row"> <div style="display: table-cell">左邊的內容。左邊的內容。左邊的內容。左邊的內容。</div> <div style="display: table-cell">右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。</div> </div>
如果確實需要用來排版，請給表格元素添加role="presentation"，使得輔助工具將其識別為普通的內容，而非將其作為表格看待。從外觀上，這個和前面的例子沒有區別，但是如果啟用輔助工具，例如屏幕閱讀器，那麼這些內容就會被直接閱讀，而非作為表格閱讀。
{| role="presentation"
| 左邊的內容。左邊的內容。左邊的內容。左邊的內容。
| 右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。
|}
| 左邊的內容。左邊的內容。左邊的內容。左邊的內容。 | 右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。右邊的內容。 |
不使用過時的屬性
在舊版本的HTML中，表格支持一些HTML屬性，以支持控制內容的格式。在當前版本的HTML規範中，這種方式雖然仍支持，但是已經是過時了。因此，請不要再使用任何過時的語法。所有的樣式都應該使用style屬性來控制。請看這個示例：
{| class="wikitable"
! 標題文本 !! width="250" 標題文本
|- bgcolor="red"
| align="center" valign="top" | 示例 || 示例
|-
| 示例 || border="2" bordercolor="navy" bgcolor="cyan" | 示例
|}
{| class="wikitable"
! 標題文本 !! style="width:250px" 標題文本
|- style="background-color: red"
| style="text-align: center; vertical-align: top" | 示例 || 示例
|-
| 示例 || border: 2px navy solid; background-color: cyan | 示例
|}
以下表格列舉了各過時HTML屬性與CSS屬性之間的關係，請在編輯時，將表格中的過時屬性替換為符合HTML規範的CSS屬性（有點屬性雖然有效，但事實上是沒有必要使用的，可以直接移除）。
| 過時的HTML屬性 | 規範的CSS屬性 | 過時HTML屬性示例 | 規範CSS屬性示例 | 說明 |
|---|---|---|---|---|
widthheight
|
widthheight
|
width="200" height="80"
|
style="width: 200px; height: 80px
|
[注 1] |
alignvalign
|
text-alignvertical-align
|
align="left" valign="top"
|
style="text-align: left; vertical-align: top"
|
|
bgcolor
|
background-color
|
bgcolor="red"bgcolor="FF0000"
|
style="background-color: red"style="background-color: #FF0000"
|
[注 2] |
borderbordercolor
|
border-widthborder-color
|
border="1" bordercolor="red"
|
style="border: 1px red solid"
|
[注 1][注 2][注 3] |
cellspacing
|
border-spacing
|
cellspacing="3"
|
style="border-spacing: 3px
|
[注 1] |
cellpadding
|
padding
|
cellpadding="3"
|
style="padding: 3px"
|
[注 1][注 3] |
frame
|
border-style和border-width
|
|||
rules
|
border-style和border-width
|