http://tanntag.blog33.fc2.com/ 今すぐ使えるテーブルタグサンプルを紹介！スタイルシート（CSS）使用 ja http://tanntag.blog33.fc2.com/blog-entry-21.html 基本タグ①&lt;table&gt;～②&lt;/table&gt;：表全体③&lt;tr&gt;～④&lt;/tr&gt;：行⑤&lt;th&gt;～⑥&lt;/th&gt;：見出しセル⑤&lt;td&gt;～⑥&lt;/td&gt;：セル基本テーブルタグ１①&lt;table&gt;③&lt;tr&gt;⑤&lt;td&gt;１行２列の⑥&lt;/td&gt;⑤&lt;td&gt;表ができます。⑥&lt;/td&gt;④&lt;/tr&gt;②&lt;/table&gt;表示１行２列の表ができます。基本テーブルタグ２①&lt;table&gt;③&lt;tr&gt;⑤&lt;th&gt;見出しは太字⑥&lt;/th&gt;④&lt;/tr&g ①<table>～②</table>：表全体
③<tr>～④</tr>：行
⑤<th>～⑥</th>：見出しセル
⑤<td>～⑥</td>：セル

基本テーブルタグ１
①<table>
③<tr>
⑤<td>
１行２列の
⑥</td>
⑤<td>
表ができます。
⑥</td>
④</tr>
②</table>

表示

１行２列の

表ができます。

基本テーブルタグ２
①<table>
③<tr>
⑤<th>
見出しは太字
⑥</th>
④</tr>
③<tr>
⑤<td>
２行１列の表ができます。
⑥</td>
④</tr>
②</table>

表示

見出しは太字
２行１列の表ができます。

]]> テーブルタグの説明 2009-08-30T08:41:33+09:00 tann FC2-BLOG http://tanntag.blog33.fc2.com/blog-entry-31.html テーブル枠とスタイルシートに1行以上選択行を追加するとテーブルが作成できます。 5種類の行を用意しました。 テーブルタグ枠のみ（HTML）※必要 ここに追加行を上書きしてください ・サンプル 画像１ 画像２ 画像３ 名前１ 名前２ 名前３ 行追加用テーブルタグ※１つ以上選択（&lt;table&gt;～&lt;/table&gt;の中に追加してください。） 画像１ 画像 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; }

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

母の日
]]> 外枠・画像枠ありテーブルタグ 2009-07-05T08:39:10+09:00 tann FC2-BLOG http://tanntag.blog33.fc2.com/blog-entry-2.html －サンプル－ Ｏ型自分の説明書 (単行本) 説明文 A型自分の説明書 (単行本) 説明文 テーブルタグ（HTML） タイトル 画像 名前 説明 行追加用テーブルタグ（&lt;/table&gt;の前に追加してください。） 画像 名前 説明 使用スタイルシート（CSS） /*枠なしテーブルタグ（左側：画像、右側 －サンプル－ Ｏ型自分の説明書 (単行本)

説明文

---

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; }

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

]]> 枠なしテーブルタグ 2009-06-05T19:52:09+09:00 tann FC2-BLOG http://tanntag.blog33.fc2.com/blog-entry-35.html 上段に画像を３行、下段に名前を３行表示するテーブルです。 （スタイルシートの設定ができない場合のみ、ご利用ください。） ・サンプル ペルソナ戦国BASARA バトルヒーローズとらドラ・ポータブル! 超弩級プレミアムBOX テーブルタグ（HTML） 画像１ 画像２ 画像３ 名前１ 名前２ 名前３ 行追加用テーブルタグ（&lt;/table&gt;の前に追加してください。） 画像１ 画像２ 画像３ （スタイルシートの設定ができない場合のみ、ご利用ください。）

・サンプル

ペルソナ	戦国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>
外枠・画像破線枠ありテーブルタグ（上段：画像×３、下段：名前×３、背景色）　インラインスタイルシート

父の日
]]> インラインスタイルシート テーブルタグ 2009-03-30T22:47:01+09:00 tann FC2-BLOG http://tanntag.blog33.fc2.com/blog-entry-34.html 画像を３行表示するテーブルです。 （スタイルシートの設定ができない場合のみ、ご利用ください。） ・サンプル テーブルタグ（HTML） 画像１画像２画像３ 行追加用テーブルタグ（&lt;/table&gt;の前に追加してください。） 画像１画像２画像３ 外枠・画像破線枠ありテーブルタグ（画像×３、背景色） 入学祝 （スタイルシートの設定ができない場合のみ、ご利用ください。）

・サンプル

テーブルタグ（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>
外枠・画像破線枠ありテーブルタグ（画像×３、背景色）

入学祝
]]> インラインスタイルシート テーブルタグ 2009-02-04T02:13:28+09:00 tann FC2-BLOG