|
|||
| || トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || |
|
HP作成
 はじめに
  HP作成に必要なもの
HTMLについて
HTML作成の基本
実際に作ってみよう！
ファイルの保存方法
タグの基本
見出しの書き方
表示位置を変える
段落・改行を入れる
画像を表示する
文字サイズと色の変更
テーブル(表)の基本
セルに文字を入れる
セルの統合
セル内の配置を変える
文字の太さを変える
リスト番号をつける
リンクって何？
リンクを張ってみよう
サーバって何？
HPを公開しよう！
ホームページ作成 |
表の作り方詳しいテーブルの説明は「リファレンス−テーブル」を参照してください。
基本の表の作り方
では、サブタイトルの下に表を作ってみましょう。
表を作るには「テーブルタグ」を使います。 列と行の関係は以下のようになっています。
では、テーブルを作ってみましょう。 （例1）基本のテーブル（列1、行1） <table width="350" border="1">
<tr> <td> </td> </tr> </table> これをブラウザで表示させると下のようになります。 このままでは表らしくないので今度は列を2、行を2にしてみます。 （例2）基本のテーブル（列2、行2） <table width="350" border="1">
<tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> これをブラウザで表示させると下のようになります。 テーブルを作るにはまずテーブルの開始タグと終了タグが必要です。 例2タグの説明
<table width="350" border="1"> ←テーブル開始タグ（幅350px、線の太さを1に指定）
<tr> ←1行目枠の開始タグ <td> </td> ←1列目セルの開始と終了タグ <td> </td> ←2列目セルの開始と終了タグ </tr> ←1行目枠の終了タグ（ここで折り返し） <tr> ←2行目枠の開始タグ <td> </td> ←2列目セルの開始と終了タグ <td> </td> ←2列目セルの開始と終了タグ </tr> ←2行目枠の終了タグ </table> ←テーブル終了タグ なんとなくわかりましたか？ では、サブタイトルの下に表を作ってみましょう。 列が2、行が5のテーブルを作ってみます。 列2、行5のテーブル <table width="350" border="1">
<tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> では、これを例題7に貼り付けてみましょう。 <html>
<head> <title>MY HOMEPAGE</title> </head> <body> <center> </html>
これをブラウザで表示させると下の画像のようになります。
ブラウザによっては、セルの中が空白の場合、うまく表示されずに下の画像のようになってしまうことがあります。
セルに文字を入れる
では、この表のセルに文字を入れていきましょう。
＜例題9＞
<html>
<head> <title>MY HOMEPAGE</title> </head> <body> <center> </body> このように <td> と </td> の間に入れた文字や画像がセルの中に表示されます。
|
