前回に引き続き、Blogger CSS関連の備忘録です。
①基本的な表を作る
基本はコレ。
<tr>が列数、<td>が行数を指定します。
<table border> <tr> <td>1×1</td> </tr></table>
1×1 |
<tr><td>それぞれの数を増やせば、表を大きくできます。
<table border> <tr> <td>2×3</td> <td>2×3</td> <td>2×3</td> </tr> <tr> <td>2×3</td> <td>2×3</td> <td>2×3</td> </tr> </table>
2×3 | 2×3 | 2×3 |
2×3 | 2×3 | 2×3 |
②文字位置の調整、結合
・文字位置の調整:align=centerを入れれば、文字が中央揃えになります。
・結合:<td rowspan=”n”><td colspan=”n”>で、それぞれ行/列の結合ができます。
(nには結合するセルの数を記載。)
例えばこんな感じ。
<table border> <tr align=center> <td>2×3</td> <td colspan="2">2×3</td> </tr> <tr> <td>2×3</td> <td>2×3</td> <td>2×3</td> </tr> </table>
2×3 | 2×3 | |
2×3 | 2×3 | 2×3 |
③表の背景色を設定
bgcolor="#xxxxxx" の指定で、色を付けることが可能です。 xxxxxx部分は、16進数での色指定が必要ですので、以下サイトあたりを参考にどうぞ。 カラーコード [WEBデザイン用]
④表の幅を自動で均等に揃える(要CSS)
CSSにて、以下文言を記述すればOK。
それぞれ、以下を指定しています。
table-layout: fixed; →均等揃え
width: 100%; →表の横幅を、画面サイズに合わせる
table {
table-layout: fixed;
width: 100%;
}