![]() |
|||
|| トップページ || HTML || Style Sheet || リファレンス || Web素材 || Contact Us || サイトマップ || 初めての方 || |
Style Sheet
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
表の作り方基本の表の作り方
では、サブタイトルの下に表を作ってみましょう。
表を作るには「テーブルタグ」を使います。 列と行の関係は以下のようになっています。
では、テーブルを作ってみましょう。 (例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に貼り付けてみましょう。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>MY HOMEPAGE</title> <style type="text/css"> .center { .blue { <body> <div class="center"> <div align="center"> </html>
ここで <div align="center"> </div>で、テーブルをはさんでいるのは、IE以外のブラウザではテーブルはクラスセレクタをつかっただけではセンタリングされないため、IE以外のブラウザにも対応するために <div
align="center"> </div>で囲んでいます。
これをブラウザで表示させると下の画像のようになります。 ブラウザによっては、セルの中が空白の場合、うまく表示されずに下の画像のようになってしまうことがあります。 セルに文字を入れる
では、この表のセルに文字を入れていきましょう。
<例題9>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>MY HOMEPAGE</title> <style type="text/css"> .center { .blue { <body> <div class="center"> <table width="350" border="1"> <tr> <td><材料>(例)18cmの丸型1個分</td> <td> </td> </tr> <tr> <td>卵</td> <td>3個</td> </tr> <tr> <td>砂糖</td> <td>90g</td> </tr> <tr> <td>小麦粉</td> <td>90g</td> </tr> <tr> <td>バター</td> <td>25g</td> </tr> </table> </div> </body> |