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

テーブル枠とスタイルシートに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; }

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

母の日