簡単テーブル３

BACK TOP NEXT



リボン テーブルのつくりかた　３ リボン

ｩ テーブルの大きさを指定する ｩ

テーブルの大きさを設定するときは
テーブルのヨコ幅を『width』
テーブルのタテ幅を『height』
で指定します。

【『width』を300にした場合】

★ ☆
◇ ◆


<table border="1" width="ヨコ幅" bordercolor="#枠の色"><tr><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>


【『height』を100にした場合】

★ ☆
◇ ◆


<table border="1" width="ヨコ幅" height="タテ幅" bordercolor="#枠の色"><tr><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>




ｩ テーブルの位置を指定する ｩ

テーブルの位置を変えるときは『align="指定する位置"』を使います。

左：left
中央：center
右：right

【left：左】

★ ☆
◇ ◆


【center：中央】

★ ☆
◇ ◆


【right：右】

★ ☆
◇ ◆


<table border="1" bordercolor="#枠の色" align="指定する位置"><tr><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>




ｩ テーブルを並べる応用編 ｩ

★
☆
◆
◇
■
□
●
○


組み合わせれば、
オリジナルのレイアウトやデザインが作れます♪

<table><tr><td><table border="1" bordercolor="#枠の色"><tr><td>★</td><td>☆</td></tr></table></td><td><table border="1" bordercolor="#枠の色"><tr><td>◆</td><td>◇</td></tr></table></td></tr><tr><td><table border="1" bordercolor="#枠の色"><tr><td>■</td><td>□</td></tr></table></td><td><table border="1" bordercolor="#枠の色"><tr><td>●</td><td>○</td></tr></table></td></tr></table>




ｩ マス目をヨコにつなげる ｩ

マス目をヨコにつなげるときは『colspan』を使うと
テーブルレイアウトの自由度が広がります。

【なにも指定しない場合】
★ ☆ ★
◇ ◆ ◇

<table border="1" bordercolor="#枠の色"><tr><td>★</td><td>☆</td><td>★</td></tr><tr><td>◇</td><td>◆</td><td>◇</td></tr></table>


【<colspan="2">と入力した場合】
★
★
◇
◆
◇

<table border="1" bordercolor="#枠の色"><tr><td colspan="2">★</td><td>★</td></tr><tr><td>◇</td><td>◆</td><td>◇</td></tr></table>


【<colspan="3">と入力した場合】
★
◇
◆
◇

<table border="1" bordercolor="#枠の色"><tr><td colspan="3">★</td></tr><tr><td>◇</td><td>◆</td><td>◇</td></tr></table>


【<colspan="5">　<colspan="2">と入力した場合】
★
◇
◆
◇
◆
◇
◆
◇
◆
◇

<table border="1" bordercolor="#枠の色"><tr><td colspan="5">★</td></tr><tr><td>◇</td><td>◆</td><td>◇</td><td>◆</td><td>◇</td></tr><tr><td colspan="2">◆</td><td colspan="2">◇</td><td>◆</td></tr><tr><td colspan="5">◇</td></tr></table>



template- yamato

© Rakuten Group, Inc.
X

Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: