テーブル(表)
| HTML4 | スタイルシート | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 文章や画像の回りこみ | <table align="位置">
▼回り込んだテキストとの余白 Netscapeのみ <table align="位置" vspace="上下の余白" hspace="左右の余白"> |
table { float: left } (左右のみ) ▼回り込んだテキストとの余白 table { float: left; margin: 20px 10px (上下に20px、左右に10pxの余白) } |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| セルとセルの間隔 | <table cellspacing="20"> | Netscape Navigator 6のみ table { border-spacing: 20px }(上下左右) table { border-spacing: 20px 10px }(左右20px 上下10px) |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| セルとセルの間隔をなくす | <table cellspacing="0"> | Internet Explore 5以降のみ table { border-collapse: collapse } |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| セル内の余白 | <table cellpadding="10"> | Netscape Navigator 4.xでは不完全 td, th { padding: 10px }( tableではなく、td, th要素に設定する) |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 罫線の色 | <table bordercolor="#b22222"> | table { border-color: #b22222 } border-top-color、border-bottom-color、border-left-color、border-right-colorで、上、下、左、右の枠線をそれぞれ指定できる。 {border-color: #b22222 #ffff00}と２つの色を指定すると、上下と左右の色、 {border-color: #b22222 #ffff00 #006400}と3つの色を指定すると、上、左右、下、 同様に４つの色を指定すると、上、右、下、左の順に指定できる。 |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 背景の色・背景画像 | <table bgcolor="#b22222"> <table background="画像のURL"> (table, tr, td, th要素に指定) |
table { background-color: #b22222 } table { background-image: url('back.gif') } (table, tr, td, th, col, colgroup, thead, tfoot, tbodyなどに指定) |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 外枠の表示方法 | <table frame="表示形式">
|
table { border-top: 太さ 線種 色指定 } 同様に、border-bottom、border-left、border-rightごとに指定、またはborderで四辺一度に指定できる。
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 内枠の表示方法 | <table rules="表示形式">
|
現状ではこれと同じ設定をスタイルシートで行うことは困難。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| データの表示位置 | ▼対象となるタグ td, th, tr, col, colgroup, thead, tfoot, tbody <td align="横位置"> <td valign="縦位置">
|
text-align: 行揃え[ブロックレベル要素(p, h, td, th要素)に指定できる] vertical-align: 上下位置 [インライン要素または表のセル(td, th要素)に指定できる]
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 幅・高さ | ▼表の幅を指定 <table width="80%"> ("80%"または"100"など) ▼列の幅を指定 (colgroup, col, td, th) <table width="100"> ▼行の高さは原則として指定しない |
▼表の幅を指定 table { width: 80% } ("80%"または"100px"など) ▼列の幅を指定 (colgroup, col, td, th) td { width: 100px } ▼行の高さを指定 (tr) tr { height: 50px } |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| セル内で文字を折り返さない |
<td nowrap>〜</td> <th nowrap>〜</th> |
td {white-space: nowrap} |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 表タイトルの位置 |
<caption align="表示位置">〜</caption>
|
caption{ caption-side: bottom; (表タイトルを下部に配置) text-align: left (表タイトルを左揃え) } |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 表を行ごとにグループ化 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 表を列ごとにグループ化 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 横方向にセルを結合 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 縦方向にセルを結合 |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||