たんタグ　テーブルタグ サンプル

テーブル枠とスタイルシートに1行以上選択行を追加するとテーブルが作成できます。
5種類の行を用意しました。

テーブルタグ枠のみ（HTML）※必要
<table class="t100i"> ここに追加行を上書きしてください </table>


・サンプル

画像１	画像２	画像３
名前１	名前２	名前３

行追加用テーブルタグ※１つ以上選択
（<table>〜</table>の中に追加してください。）
<tr> <td class="t33i"> 画像１ </td> <td class="t33i"> 画像２ </td> <td class="t33i"> 画像３ </td> </tr> <tr> <td class="t33d"> 名前１ </td> <td class="t33d"> 名前２ </td> <td class="t33d"> 名前３ </td> </tr>


・サンプル

画像１	画像２	説明文
名前１	名前２

行追加用テーブルタグ※１つ以上選択
（<table>〜</table>の中に追加してください。）
<tr> <td class="t33i"> 画像１ </td> <td class="t33i"> 画像２ </td> <td class="t33m" rowspan="2"> 説明文 </td> </tr> <tr> <td class="t33d"> 名前１ </td> <td class="t33d"> 名前２ </td> </tr>


・サンプル

説明文	画像１	画像２
	名前１	名前２

行追加用テーブルタグ※１つ以上選択
（<table>〜</table>の中に追加してください。）
<tr> <td class="t33m" rowspan="2"> 説明文 </td> <td class="t33i"> 画像１ </td> <td class="t33i"> 画像２ </td> </tr> <tr> <td class="t33d"> 名前１ </td> <td class="t33d"> 名前２ </td> </tr>


・サンプル

画像１	説明文
名前１

行追加用テーブルタグ※１つ以上選択
（<table>〜</table>の中に追加してください。）
<tr> <td class="t33i"> 画像１ </td> <td class="t66a" rowspan="2"> 説明文 </td> </tr> <tr> <td class="t33d"> 名前１ </td> </tr>


・サンプル

説明文	画像１
	名前１

行追加用テーブルタグ※１つ以上選択
（<table>〜</table>の中に追加してください。）
<tr> <td class="t66a" rowspan="2"> 説明文 </td> <td class="t33i"> 画像１ </td> </tr> <tr> <td class="t33d"> 名前１ </td> </tr>


・サンプル

説明文

行追加用テーブルタグ※１つ以上選択
（<table>〜</table>の中に追加してください。）
<tr> <td class="t100u"> 説明文 </td> </tr>

使用スタイルシート（CSS）※必要
スタイルシート使用方法（スタイルシートの設定・基本スタイルシート１）
枠線の変更は、追加スタイルシート１を参照
/*外枠・画像枠ありテーブルタグ（行選択・基本３列）*/ /*外枠部分*/ .t100i { width: 100%; border: 1px #000000 solid; text-align: center; } /*画像部分*/ .t33i { width: 33%; border: 1px #000000 solid; padding: 5px; text-align: center; } /*名前部分*/ .t100u { width: 100%; border: 1px #000000 solid; padding: 5px; text-align: left; } .t66a { width: 66%; border: 1px #000000 solid; padding: 5px; text-align: left; } .t33d { width: 33%; padding: 5px; text-align: center; vertical-align: top; } .t33m { width: 33%; border: 1px #000000 solid; padding: 5px; text-align: left; }

外枠・画像枠ありテーブルタグ（行選択・基本３列）

母の日

−サンプル−
	Ｏ型自分の説明書 (単行本) 説明文
	A型自分の説明書 (単行本) 説明文

テーブルタグ（HTML）
<table class="t100c"> <tr> <th colspan="2"> タイトル </th> </tr> <tr> <td class="t33c"> 画像 </td> <td class="t66l"> 名前 <br><br> 説明 </td> </tr> </table>
行追加用テーブルタグ（</table>の前に追加してください。）
<tr> <td colspan="2"> <hr> </td> </tr> <tr> <td class="t33c"> 画像 </td> <td class="t66l"> 名前 <br><br> 説明 </td> </tr>

使用スタイルシート（CSS）
/*枠なしテーブルタグ（左側：画像、右側：名前・説明文）*/ /*外枠部分*/ .t100c { width: 100%; text-align: center; } /*画像部分*/ .t33c { width: 33%; padding: 5px; text-align: center; } /*名前部分*/ .t66l { width: 66%; padding: 5px; text-align: left; }

枠なしテーブルタグ（左側：画像、右側：名前・説明文）

上段に画像を３行、下段に名前を３行表示するテーブルです。
（スタイルシートの設定ができない場合のみ、ご利用ください。）

・サンプル

ペルソナ	戦国BASARA バトルヒーローズ	とらドラ・ポータブル! 超弩級プレミアムBOX

テーブルタグ（HTML）
<table style="width:100%;border:1px #d2b48c solid;background-color:#ffe5cc;text-align:center"> <tr> <td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像１</td> <td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像２</td> <td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像３</td> </tr> <tr> <td style="width:33%;padding:5px;vertical-align:top;text-align:center;">名前１</td> <td style="width:33%;padding:5px;vertical-align:top;text-align:center;">名前２</td> <td style="width:33%;padding:5px;vertical-align:top;text-align:center;">名前３</td> </tr> </table>
行追加用テーブルタグ（</table>の前に追加してください。）
<tr> <td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像１</td> <td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像２</td> <td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像３</td> </tr> <tr> <td style="width:33%;padding:5px;vertical-align:top;text-align:center;">名前１</td> <td style="width:33%;padding:5px;vertical-align:top;text-align:center;">名前２</td> <td style="width:33%;padding:5px;vertical-align:top;text-align:center;">名前３</td> </tr>
外枠・画像破線枠ありテーブルタグ（上段：画像×３、下段：名前×３、背景色）　インラインスタイルシート

父の日

画像を３行表示するテーブルです。
（スタイルシートの設定ができない場合のみ、ご利用ください。）

・サンプル

テーブルタグ（HTML）
<table style="width:100%;border:1px #d2b48c solid;background-color:#ffe5cc;text-align:center"><tr><td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像１</td><td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像２</td><td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像３</td></tr></table>
行追加用テーブルタグ（</table>の前に追加してください。）
<tr><td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像１</td><td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像２</td><td style="width:33%;border:1px #d2b48c dashed;background-color:#FFFFFF;padding:5px;text-align:center">画像３</td></tr>
外枠・画像破線枠ありテーブルタグ（画像×３、背景色）

入学祝

・サンプル（ライトブルー）

レゴ シティ アドベントカレンダー	炎神戦隊ゴーオンジャー 炎神合体シリーズ10~12 炎神合体DXキョウレツオー	くもんのNEW日本地図パズル

テーブルタグ（HTML）
<table class="t100x"> <tr> <td class="t33b"> 画像１ </td> <td class="t33b"> 画像２ </td> <td class="t33b"> 画像３ </td> </tr> <tr> <td class="t33u"> 名前１ </td> <td class="t33u"> 名前２ </td> <td class="t33u"> 名前３ </td> </tr> </table>
行追加用テーブルタグ（</table>の前に追加してください。）
<tr> <td class="t33b"> 画像１ </td> <td class="t33b"> 画像２ </td> <td class="t33b"> 画像３ </td> </tr> <tr> <td class="t33u"> 名前１ </td> <td class="t33u"> 名前２ </td> <td class="t33u"> 名前３ </td> </tr>

使用スタイルシート（CSS）枠線の変更は、追加スタイルシート１を参照
/*外枠・画像枠ありテーブルタグ（上段：画像×３、下段：名前×３、枠色違い、背景色、凸）*/ /*外枠部分*/ .t100x { width: 100%; border-width: 1px; border-style: solid; background-color: #add8e6; border-color: #0000ff #e0ffff #e0ffff #0000ff; text-align: center; } /*画像部分*/ .t33b { width: 33%; border-width: 1px; border-style: solid; background-color: #FFFFFF; border-color: #e0ffff #0000ff #0000ff #e0ffff; padding: 5px; text-align: center; } /*名前部分*/ .t33u { width: 33%; border-width: 1px; border-style: solid; background-color: #add8e6; border-color: #e0ffff #0000ff #0000ff #e0ffff; padding: 5px; text-align: center; vertical-align: top; }

外枠・画像枠ありテーブルタグ（上段：画像×３、下段：名前×３、枠色違い、背景色、凸）

卒業祝