ここより
「初期化-*基本いじらない」の中にある、一つ目の「border:0」を「border:1」
に書き換えで表示される
Tableタグの枠線表示をテンプレートに追加してみた
<table border="1">を使わない
☆追加位置☆
]]></b:skin>.........がCSSの区切りコード(これより下はダメ)
css
#tbl-bdr table,#tbl-bdr th,#tbl-bdr td {
border-collapse: collapse;
border:1px solid #333;
}
2行目「border-collapse: collapse;」で2重になっている線を重ねて1本にする
3行目で線の太さ・種類・色を指定
テーブルのHTMLタグ
<div id="tbl-bdr">
<table>
<tr>
<td>th01</td>
<td>td01_1</td>
<td>td01_2</td>
</tr>
<tr>
<td>th02</td>
<td>td02_1</td>
<td>td02_2</td>
</tr>
<tr>
<td>th03</td>
<td>td03_1</td>
<td>td03_2</td>
</tr>
</table>
</div>
表示
th01 | td01_1 | td01_2 |
th02 | td02_1 | td02_2 |
th03 | td03_1 | td03_2 |
表示位置の指定
align属性(水平方向)
valign属性(垂直方向)が使えない
style属性を使ってみる
<div style="color: red; background: yellow">
黄色の背景色に赤い文字
</div>
黄色の背景色に赤い文字
水平方向「text-align」や直方向「vertical-align」 を使ってみる
<table style="background-color: #BADBC7;">
<tr><td style="text-align: left;">左寄せ表示</td></tr>
<tr><td style="text-align: center;">中央寄せ表示</td></tr>
<tr><td style="text-align: right;">右寄せ表示</td></tr>
</table>
左寄せ表示 |
中央寄せ表示 |
右寄せ表示 |
<table>
<tr>
<td height="100">指定なし</td>
<td style="vertical-align: top;">上揃え</td>
<td style="vertical-align: middle;">中央揃え</td>
<td style="vertical-align: bottom;">下揃え</td>
</tr>
</table>
指定なし | 上揃え | 中央揃え | 下揃え |
0 件のコメント:
コメントを投稿