表

表に関する設定を行う．

表の幅を計算する方法の変更

table-layoutプロパティ

表の幅を計算する方法を変更できる．

適用できる要素table要素
継承しない
テンプレート 
table-layout: 値;
指定できる値値の効果
fixed表全体を読み込む前に幅を決定するため，表示が高速になる．
auto通常どうり表全体を読み込み，セルの内容を調べてから幅を計算する．
CSSの例文 
table.table-layout{
table-layout: fixed;
}
XHTMLの例文 
<table class="table-layout" border="1">
<tr><td>セル1</tb><td>セル2</tb></tr>
<tr><td>セル3</tb><td>セル4</tb></tr>
</table>
出力結果
セル1セル2
セル3セル4

表のボーダーの変更

border-collapseプロパティ

表やセルの枠線を一体化する．

適用できる要素table要素
継承する
テンプレート 
border-collapse: 値;
指定できる値値の効果
collapse表とセルの枠線が一体化できる．
separate通常どおり表やセルの枠線が分離した表示になる．
CSSの例文 
table.border-collapse{
border-collapse: collapse;
}
XHTMLの例文 
<table class="border-collapse" border="1">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
出力結果
セル1セル2
セル3セル4

border-spacingプロパティ

表のセルとセルの間隔を変更できる．

適用できる要素table要素
継承する
テンプレート 
border-spacing: 値;
指定できる値値の効果
 emem単位でセルとセルの間隔を変更する．
 pxpx単位でセルとセルの間隔を変更する．
 em em em単位で左右のセル間隔と上下のセル間隔を別々に変更する．
 px px px単位で左右のセル間隔と上下のセル間隔を別々に変更する．
CSSの例文 
table.border-spacing{
border-spacing: 10px 5px;
}
XHTMLの例文 
<table class="border-spacing" border="1">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
出力結果
セル1セル2
セル3セル4

空のセルに対する枠線の有無

empty-cellsプロパティ

空のセルに対して枠線の表示を決定できる．

適用できる要素td要素・th要素
継承する
テンプレート 
empty-cells: 値;
指定できる値値の効果
show内容が空のセルにも枠線が表示される．
hide空のセルには枠線が表示されない．
CSSの例文 
td.empty-cells{
empty-cells: show;
}
XHTMLの例文 
<table border="1">
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td class="empty-cells"></td></tr>
</table>
出力結果
セル1セル2
セル3

キャプションの位置を変更

caption-sideプロパティ

表のキャプションの位置を変更できる．

適用できる要素caption要素
継承する
テンプレート 
caption-side: 値;
指定できる値値の効果
top表の上に表示する．
bottom表の下に表示する．
left表の左に表示する．
right表の右に表示する．
CSSの例文 
caption.caption-side{
caption-side: bottom;
}
XHTMLの例文 
<table border="1">
<caption>タイトル</caption>
<tr><td>セル1</td><td>セル2</td></tr>
<tr><td>セル3</td><td>セル4</td></tr>
</table>
出力結果
タイトル
セル1セル2
セル3セル4