簡単テーブル５
テーブルのつくりかた ５
ｩ テーブル内のヨコ位置を変える ｩ
テーブル内の位置を変えるときは『align』と『valign』を使います。
今回はヨコの位置を変える『align』を使ってみます。
※属性値には『left』『center』『right』をいれます。
【align="left" としたとき】
| ★ |
| ■ |
| ◆ |
<table border="1" bordercolor="#66CCFF" width="100" height="200"><tr><td align="left">★</td></tr><tr><td align="left">■</td></tr><tr><td align="left">◆</td></tr></table>
【align="center" としたとき】
| ★ |
| ■ |
| ◆ |
<table border="1" bordercolor="#66CCFF" width="100" height="200"><tr><td align="center">★</td></tr><tr><td align="center">■</td></tr><tr><td align="center">◆</td></tr></table>
【align="right" としたとき】
| ★ |
| ■ |
| ◆ |
<table border="1" bordercolor="#66CCFF" width="100" height="200"><tr><td align="right">★</td></tr><tr><td align="right">■</td></tr><tr><td align="right">◆</td></tr></table>
【別々の位置にしたとき】
| ★ |
| ■ |
| ◆ |
<table border="1" bordercolor="#66CCFF" width="100" height="200"><tr><td align="left">★</td></tr><tr><td align="center">■</td></tr><tr><td align="right">◆</td></tr></table>
解りやすいようにテーブルの幅を変えています。
ｩ テーブルの色を変える ｩ
テーブルに色をつけるときは『bgcolor』をつかいます。
この属性は「table」はもちろん『tr』『td』にも設定できます。
【table に色を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="1" bgcolor="#FFFF66"><tr><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>
【tr に色を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="1" bgcolor="#FFFF66"><tr bgcolor="#D7F1F8"><td>★</td><td>☆</td></tr><tr><td>◇</td><td>◆</td></tr></table>
【td に色を設定】
| ★ | ☆ |
| ◇ | ◆ |
<table border="1" bgcolor="#FFFF66"><tr bgcolor="#D7F1F8"><td>★</td><td>☆</td></tr><tr><td bgcolor="#E0FAAC">◇</td><td>◆</td></tr></table>
このように好きな部分に色をつけていくことができます。
たとえば、マス目のなかの色を全部変えて、枠だけ目立たせるとか。
いろいろ応用ができますne
© Rakuten Group, Inc.
