ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）ＷｅｂＰａｇｅ発射台（初心者の、初心者による、初心者のためのＷｅｂＰａｇｅ作り講座）
表を使いレイアウトを調整してみようメモ帳でタグをうつ・・・・・これが一番確実。かも。
レイアウトを調整できるタグを集めてみました。
の背景があるタグは<body></body>の中で使って下さい。
用意するモノ
・・・・・に加えて、更に今まで作ってみたページ |
| 表（１行・１列） |
| <table border="1"> <tr> <td>中</td> </tr> </table> |
これをブラウザでみると
| 中 |
| 少し解説 | ||
| <table border="1"> | </table> | 「表全体」をこのタグで囲みます。１は表の罫線の太さを示しています。 |
| <tr> | </tr> | 「１行」をこのタグで囲みます。 |
| <td> | </td> | 「１項目・セル・細胞」をこのタグで囲みます。 |
正直言って、これは単純すぎて、かえってわかりにくいです。以下のもう少し大きな表とタグをご覧下さい。
| 表（２行・２列） |
| <table border="1"> <tr> <td>上左</td> <td>上右</td> </tr> <tr> <td>下左</td> <td>下右</td> </tr> </table> |
これをブラウザでみると
| 上左 | 上右 |
| 下左 | 下右 |
| 少し解説 | ||
| <table border="1"> | </table> | 「表全体」をこのタグで囲みます。１は表の罫線の太さを示しています。 |
| <tr> | </tr> | 「１行」をこのタグで囲みます。 上記の表のタグの中に<tr>−</tr>が２組あります。２行あるからです。 |
| <td> | </td> | 「１項目・セル・細胞」をこのタグで囲みます。 上記の行のタグの中に<td>−</td>が２組あります。２列あるからです。 |
| 表（３行・３列） |
| <table border="1"> <tr> <td>上左</td> <td>上幹</td> <td>上右</td> </tr> <tr> <td>中左</td> <td>中幹</td> <td>中右</td> </tr> <tr> <td>下左</td> <td>下幹</td> <td>下右</td> </tr> </table> |
これをブラウザでみると
| 上左 | 上幹 | 上右 |
| 中左 | 中幹 | 中右 |
| 下左 | 下幹 | 下右 |
| 少し解説 | ||
| <table border="1"> | </table> | 「表全体」をこのタグで囲みます。１は表の罫線の太さを示しています。 |
| <tr> | </tr> | 「１行」をこのタグで囲みます。 上記の表のタグの中に<tr>−</tr>が３組あります。３行あるからです。 |
| <td> | </td> | 「１項目・セル・細胞」をこのタグで囲みます。 上記の行のタグの中に<td>−</td>が３組あります。３列あるからです。 |
| 表（４行・３列） |
| <table border="1"> <tr> <td>春１</td> <td>春２</td> <td>春３</td> </tr> <tr> <td>夏４</td> <td>夏５</td> <td>夏６</td> </tr> <tr> <td>秋７</td> <td>秋８</td> <td>秋９</td> </tr> <tr> <td>冬１０</td> <td>冬１１</td> <td>冬１２</td> </tr> </table> |
これをブラウザでみると
| 春１ | 春２ | 春３ |
| 夏４ | 夏５ | 夏６ |
| 秋７ | 秋８ | 秋９ |
| 冬１０ | 冬１１ | 冬１２ |
| 少し解説 | ||
| <table border="1"> | </table> | 「表全体」をこのタグで囲みます。１は表の罫線の太さを示しています。 |
| <tr> | </tr> | 「１行」をこのタグで囲みます。 上記の表のタグの中に<tr>−</tr>が４組あります。４行あるからです。 |
| <td> | </td> | 「１項目・セル・細胞」をこのタグで囲みます。 上記の行のタグの中に<td>−</td>が３組あります。３列あるからです。 |
| 表（４行・３列）罫線の太さがゼロ |
| <table border="0"> <tr> <td>花１</td> <td>花２</td> <td>花３</td> </tr> <tr> <td>鳥４</td> <td>鳥５</td> <td>鳥６</td> </tr> <tr> <td>風７</td> <td>風８</td> <td>風９</td> </tr> <tr> <td>月１０</td> <td>月１１</td> <td>月１２</td> </tr> </table> |
これをブラウザでみると
| 花１ | 花２ | 花３ |
| 鳥４ | 鳥５ | 鳥６ |
| 風７ | 風８ | 風９ |
| 月１０ | 月１１ | 月１２ |
| 少し解説 | ||
| <table border="0"> | </table> | 「表全体」をこのタグで囲みます。0は表の罫線の太さを示しています。 太さゼロすなわち罫線は見えません。 自分の好みの配置に文字や画像をならべるのに便利です。 |
| <tr> | </tr> | 「１行」をこのタグで囲みます。 上記の表のタグの中に<tr>−</tr>が４組あります。４行あるからです。 |
| <td> | </td> | 「１項目・セル・細胞」をこのタグで囲みます。 上記の行のタグの中に<td>−</td>が３組あります。３列あるからです。 |
Last update Jun.16,2002