スクロールテーブル/HTMLタグ素材集

スクロールテーブル

管理人お勧めのポイントを本当に現金に出来たサイト＆アプリ
モッピー	トリマ

テンプレTOP

インラインフレームよりも表示が速く同じように使えます
内容部分には画像なども表示可能

枠無しです↓

内容部分

テーブルの背景色[bgcolor="カラーコード"]

[div]のwidth:横幅;heigth:縦幅;は数字を大きくすると広く、数字を小さくすると狭く
スクロールバーを表示している枠そのものの大きさを変更可能

[table]のwidth:横幅;heigth:縦幅;は数字を大きくすると広く、数字を小さくすると狭く
枠内に表示されているテーブルの大きさを変更可能

スクロールバーのカラーは[scrollbar-3dlight-color]～[scrollbar-track-color]までを
[装飾スクロールバー]より選んで入れ替えることで簡単に変更可能

<div style="border:NONE;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff">
<Tr><Td align="center" valign="top">
内容部分
</Td></Tr>
</Table></div>

内容部分

別カラーバージョンはこちら

[border:thick solid カラーコード;]
枠の太さ[thick=太い]/[medium=中間]/[thin=細い]

枠の形状[solid=実践]/[double=二重線]/[dotted=点線]
　　　　[dashed=破線]/[groove=へこみ線]/[ridge=立体線]

テーブルの背景色[bgcolor="カラーコード"]

[div]のwidth:横幅;heigth:縦幅;は数字を大きくすると広く、数字を小さくすると狭く
スクロールバーを表示している枠そのものの大きさを変更可能

[table]のwidth:横幅;heigth:縦幅;は数字を大きくすると広く、数字を小さくすると狭く
枠内に表示されているテーブルの大きさを変更可能

スクロールバーのカラーは[scrollbar-3dlight-color]～[scrollbar-track-color]までを
[装飾スクロールバー]より選んで入れ替えることで簡単に変更可能

<div style="border:thick solid #0080ff;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff">
<Tr><Td align="center" valign="top">
内容部分
</Td></Tr>
</Table></div>

タイトル部分

内容部分

別カラーバージョンはこちら

[div]のwidth:横幅;heigth:縦幅;は数字を大きくすると広く、数字を小さくすると狭く
スクロールバーを表示している枠そのものの大きさを変更可能

[table]のwidth:横幅;heigth:縦幅;は数字を大きくすると広く、数字を小さくすると狭く
枠内に表示されているテーブルの大きさを変更可能

スクロールバーのカラーは[scrollbar-3dlight-color]～[scrollbar-track-color]までを
[装飾スクロールバー]より選んで入れ替えることで簡単に変更可能

<div style="width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="1" width="320" height="300" cellspacing="0" bordercolor="#004a95">
<Tr><Td height="30" bgcolor="#004a95" align="left">
<font size="3" color="#ffffff" face="ＭＳ ゴシック">
タイトル部分</font>
</Td></Tr>
<Tr><Td bgcolor="#ffffff" align="center" valign="top">
内容部分
</Td></Tr>
</Table></div>

内容部分

別カラーバージョンはこちら

<div style="border:thick ridge maroon;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="0" width="307" height="300" cellspacing="0" bgcolor="#006a00">
<Tr><Td align="center" valign="top">
<font color="#ffffff" face="富士ポップ">
内容部分
</font>
</Td></Tr>
</Table></div>

内容部分

別カラーバージョンはこちら

<div style="border:thick dotted #ff80c0;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="0" width="307" height="300" cellspacing="0" bgcolor="#bfffbf">
<Tr><Td align="center" valign="top">
<font color="#ff80c0" face="HGP創英角ﾎﾟｯﾌﾟ体">
内容部分
</font>
</Td></Tr>
</Table></div>

内容部分

別カラーバージョンはこちら

<div style="border:thick dashed #bfdfff;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="0" width="307" height="300" cellspacing="0" bgcolor="#bfdfff">
<Tr><Td align="center" valign="top">
<font color="#0080ff" face="ＭＳ ゴシック">
内容部分
</font>
</Td></Tr>
</Table></div>

内容部分

別カラーバージョンはこちら

<div style="border:thick double orange;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="0" width="307" height="300" cellspacing="0" bgcolor="#ffff80">
<Tr><Td align="center" valign="top">
<font color="orange" face="麗流隷書">
内容部分
</font>
</Td></Tr>
</Table></div>

内容部分

別カラーバージョンはこちら

<div style="border:thick ridge #7a6045;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;
">
<Table border="0" width="307" height="300" cellspacing="0" bgcolor="#537a45">
<Tr><Td align="right">
<Table border="0" height="300" width="306" align="left">
<Tr><Td>
<div style="writing-mode:tb-rl;height:300;font-family:江戸勘亭流;color:#000000;">
内容部分
</div></Td></Tr></Table>
</Td></Tr>
</Table></div>

タイトル部分

内容部分１

内容部分２

内容部分３

内容部分４

<div style="border:thick ridge maroon;width:337;height:200;overflow:auto;
scrollbar-3dlight-color:#ff00ff;
scrollbar-arrow-color:#ff00ff;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#ff00ff;
scrollbar-track-color:#ffffff;">
<Table border="0" width="307" height="150" cellspacing="0" bgcolor="#6a6a00">
<Tr><Td align="center" valign="middle">

<Table border="0" bgcolor="#ffffff" width="300" heigth="300">
<Tr><Td align="center">
<font face="富士ポップ">
タイトル部分</font><Br>
<Table border="1" width="280" height="280" bgcolor="#ffffff" bordercolor="#7f7f7f" cellspacing="0" frame="below">
<Tr><Td valign="bottom">
内容部分１
</Td></Tr>
<Tr><Td valign="bottom">
内容部分２
</Td></Tr>
<Tr><Td valign="bottom">
内容部分３
</Td></Tr>
<Tr><Td valign="bottom">
内容部分４
</Td></Tr>
</Table><Br>
</Table></Td></Tr></Table></div>

ページトップへ