yukidarumayoのクラフト探し♪

yukidarumayoのクラフト探し♪

テンプレートの基本





7 キーボードの【Ctrl+ C でコピー】【Ctrl+ Vで貼り付け】ができます

知っておくとオークション出品時などにも役立ちますよ～







基本
文字

<table border>
<tr>
<td>文字</td>
</tr>
</table>
表を横に並べる
(ポイントは<TR>の位置)
文字1
文字2

<table border>
<tr>
<td>文字1</td>
<td>文字2</td>
</tr>
</table>
表を縦に並べる
文字1
文字2

<table border>
<tr>
<td>文字1</td>
</tr>
<tr>
<td>文字2</td>
</tr>
</table>








◆Tableタグ◆
border="-" 　ボーダーラインの太さ("0"でラインが消える）
bordercolor="#カラーコード" 　　ボーダーラインの色
width="-" 　枠の横幅("100"や"100PX"や"80%"などいろいろある)
height="-" 　枠の縦幅
background="ファイル名" 　　背景画像を指定
bgcolor="#カラーコード" 　　表全体の背景色
align="-" 　　位置（right 右寄せ・center 中央・left 左寄せ)
cellspacing="-" 　　セルとセルとの間隔（"0"で隙間がなくなる）
cellpadding="-" 　　セルの中の文章との間隔








Table border=,width=,height=枠線の太さ、横幅、縦幅を指定

文字

<table border="1" width="100" height="40">
<TR><TD>文字</TD></TR></table>
文字

<table border="5" width="100" height="40">
<TR><TD>文字</TD></TR></table>


Table bgcolor=　表全体の背景色
文字

<table border="1" width="100" height="40" bgcolor=" #ff0000 ">
<TR><TD>文字</TD></TR></table>


Table bordercolor=　枠の色

文字

<table border="1" width="100" height="40" bordercolor=" #ff0000 ">
<TR><TD>文字</TD></TR></table>


Table cellpadding=　枠と文字の間隔
文字

<table border="1" width="100" height="40" cellpadding=" 1" >
<TR><TD>文字</TD></TR></table>
文字

<table border="1" width="100" height="40" cellpadding="10" >
<TR><TD>文字</TD></TR></table>


Table cellspacing=　枠の幅
文字

<table border="1" width="100" height="40" cellspacing="1" >
<TR><TD>文字</TD></TR></table>
文字

<table border="1" width="100" height="40" cellspacing="5"
<TR><TD>文字</TD></TR></table>


Table align=　表の位置
文字
文字
文字
<table border="1" width="50" height="40" align=left> <TR><TD>文字</TD></TR></table>
<table border="1" width="50" height="40" align=center> <TR><TD>文字</TD></TR></table>
<table border="1" width="50" height="40" align=right> <TR><TD>文字</TD></TR></table>




◆TRタグ◆
background="ファイル名" 　　背景画像を指定
bgcolor="#カラーコード" 　　表全体の背景色
align="-" 　　位置（right 右寄せ・center 中央・left 左寄せ>
valign="-" 　　位置（top 上・middle 中央・bottom 下)








Tr bgcolor=　表横一列の背景色
文字1 文字2
文字3 文字4

<table border="1" width="100" height="40">
<TR bgcolor=" #ff0000 " >
<TD>文字1</TD><TD>文字2</TD> </TR>
<TR>
<TD>文字3</TD><TD>文字4</TD> </TR>
</table>








◆TDタグ◆
background="ファイル名" 　　背景画像を指定
bgcolor="#カラーコード" 　　表全体の背景色
align="-" 　　位置（right 右寄せ・center 中央・left 左寄せ>
valign="-" 　　位置（top 上・middle 中央・bottom 下)








Td bgcolor=　表一セルの背景色
文字1 文字2
文字3 文字4

<table border="1" width="100" height="40">
<TR>
<TD bgcolor=" #ff0000 " >文字1</TD><TD>文字2</TD> </TR>
<TR>
<TD>文字3</TD><TD>文字4</TD> </TR>
</table>


Td align=　表内文字横位置
　　　　　　　　（中央-center　左-left　右-right）

文字
文字
文字
<table border="1" width="100" height="40"><TR> <TD align="center" 文字</TD></TR></table>
<table border="1" width="100" height="40"><TR> <TD align="left" 文字</TD></TR></table>
<table border="1" width="100" height="40"><TR> <TD align="right" 文字</TD></TR></table>




Td valign=　表内文字縦位置

　　　　　　　　（上部-top　中央-middle　下部-bottom ）

文字
文字
文字
<table border="1" width="100" height="40"><TR> <TD valign=top 文字</TD></TR></table>
<table border="1" width="100" height="40"><TR> <TD valign=middle 文字</TD></TR></table>
<table border="1" width="100" height="40"><TR> <TD valign=bottom 文字</TD></TR></table>








下記を参考に赤字を変えてみてください

文字

<table border="1" align="center" width="100" height="100" bordercolor="#ff0000" bgcolor="#ffffff"
<TR><TD style="border: thin dotted"> 文字</TD> </TR></table>

文字

<table border="1" align="center" width="100" height="100" bordercolor="#ff0000" bgcolor="#ffffff" style="border: thin dotted"
<TR><TD>文字１</TD> </TR></table>


style="border:thin ridge"　 　　style="border:medium ridge" 　　　style="border:thick ridge"

style="border:thin groove"　　　style="border:medium groove"　　　style="border:thick groove"

style="border:thin double"　　　style="border:medium double"　　　style="border:thick double"

style="border:thin dotted"　　　style="border:medium dotted"　　　style="border:thick dotted"

style="border:thin dashed"　　　style="border:medium dashed"　　　style="border:thick dashed"


thin（細い）
medium（中間）
thick（太い）
ridge
groove
double
dotted
dashed


ridge(立体枠) groove(へこみ枠) double(二重枠) dotted(点線枠) dashed(破線枠)
文字
文字
文字
文字
文字
【thin=細い、medium=中間、thick=太い】








フィルター文字


<Table border="5" align="center" width="150" height="100"
cellspacing="0" style="filter:glow(color=#33ff00);">
<Tr><Td>
<center>フィルター文字</center>
< /Td></Tr></Table>









見出しをつける
見出し1 見出し2 見出し3
1
 2 3
4
 5 6


<Table Border>
<Tr>
<Th>見出し1</Th><Th>見出し2</Th><Th>見出し3</Th></Tr>
<Tr><Td>1</Td><Td>2</Td><Td>3</Td></Tr>
<Tr><Td>4</Td><Td>5</Td><Td>6</Td></Tr>
</Table>








横のセルと結合する
　　　Td colspan="結合するセル数"

横3セルと結合
1
2
3


<Table Border><Tr>
<Td ColSpan="3">横3セルと結合</Td></Tr>
<Tr><Td>1</Td><Td>2</Td><Td>3</Td></Tr>
</Table>








縦のセルと結合する
　　　Td rowspan="結合するセル数"

縦3セルと結合
1
2
3


<Table Border><Tr><Td RowSpan="3">縦3セルと結合</Td> <Td>1</Td></Tr>
<Tr><Td>2</Td></Tr>
<Tr><Td>3</Td></Tr>
</Table>








●コメントを付ける●

<!-- -->

<!--ここに書いた文字は表示されません-->




© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: