HTMLで簡単なテーブルの作成を開始する

HTMLテーブルは、これまでに作成された中で最も優れたHTMLステートメントの1つです。 テーブルステートメントを使用してWebページをフォーマットする機能は素晴らしいです！ '日を学び、'日を使用し、'日を愛する！

基本テーブル：

リストチュートリアルで使用した食料品リストを、今回はテーブルにまとめましょう。 最初の列にアイテムを配置し、2番目の列に価格を配置します。

これがそれを実現させたコードです。 実際のコードは左側にあり、英語の説明は右側にあります。 表ステートメントの「構造」を示すために、説明はインデントされています。

混乱している？ さて、上の表を見てみましょう。 この表は実際には非常に単純です。 本を読むのとほとんど同じ方法でテーブルを作成します。 左から右へ、上から下へ。 テーブルは<table>タグで始まり、 </table>タグで終わります。 各行は<tr>タグで始まり、 </tr>タグで終わります。 テーブルデータの各部分は、 <td>タグで始まり、 </td>タグで終わります。

しかし、それはテーブルではありません、あなたは言います！ 国境はありません！ 実はテーブルです。 これは、境界線またはBORDER =” 0”のないテーブルです。 この概念は、 TABLEステートメントを使用してWebページをフォーマットする場合に非常に重要です。 常に太い境界線が必要なわけではありません。 では、今回はBORDERでテーブルを作りましょう。

このテーブルと前のテーブルの唯一の違いは、次のような<table>ステートメントです。

<テーブルボーダー=” 7”>

とても簡単ですよね？ 境界線のサイズはピクセルで表されます。 では、もう少しCELLSPACINGを取得しましょう。 これがテーブルセル間の間隔です。 これは、テーブルセル間の壁の厚さと考えることもできます。

それははるかに良く見えます。 違いがわかりますか？ ここでも、唯一の変更は次のような<table>ステートメントにあります。

<table border =” 7” cellspacing =” 7”>

CELLSPACINGは、 BORDERと同様に、ピクセル単位で測定されます。 しかし、テキストはテーブルの壁に近すぎます、とあなたは言います！ わかりました、わかりました、それも修正できます。 それはCELLPADDINGと呼ばれています。 これは、セルの内容とセルの壁の端の間のスペースです。

ああ、今それはあなたが望んでいた方法ですか？ いいえ？ さて、私は数字を少し誇張しなければなりませんでした、しかしそれはただポイントを作ることを試みることでした。 違いがわかるといいのですが。 前のテーブルは、以下に示す<table>ステートメントを使用して作成されました。

<table border =” 7” cellspacing =” 7” cellpadding =” 7”>

フレーミング画像：

今、私たちはもっと楽しいものに入りたいと思っています。 画像のフレーミングは、写真を強調するための優れた方法です。 それは彼らをページから飛び出しているように見せます。 これが私の5秒の傑作です。

かなりクールなアートワークで、私の厄介な写真も見栄えがします。 これがそれを作ったコードです。

<table border =” 7” alt =””>
<tr>
<td> <img src =” image.gif”> </ td>
</ tr>
</ table>

必要に応じて、 <tr>タグと</tr>タグを省略できます。 それでも問題なく動作します。 HTMLの純粋主義者は、おそらくこれらのタグがそこにある必要があると主張するでしょう。 私がいつもそうしているように、そのように感じたら、それらを使用してください。

または、以下に示すように、テキストで写真をフレームに収めることもできます。

ねっと、ふ！ コードを以下に示します。

<table border =” 7” cellpadding =” 10”>
<tr>
<td> <img src =” image.gif” alt =””> </ td>
<td>なんて<br>傑作！</ td>
</ tr>
</ table>

画像のフレーミングについてもう1つ注意があります。 画像の中央揃えに問題がある場合は、次のことを試してください。

<td align =” center”> <img src =” image.gif”> </ td>

フレーミングリンク：

テーブル内にリンクを配置することもできます。 実際、必要に応じて、ページ全体を一連のテーブルコマンド内に配置できます。また、 BORDER =” 0”を使用することで、誰にもわかりません。 なぜあなたはそれをしたいのですか、あなたは尋ねますか？ ページ上で画像とテキストを一緒にフォーマットするため。 考えてみてください。 さて、リンクフレーミングに戻りましょう。

これがそれを行ったコードです。

<table border =” 7” cellpadding =” 10”>
<tr>
<td> <a href=”http://www.google.com/”> Google.com </a> </ td>
<td> <a href=”http://www.yahoo.com/”> Yahoo! </a> </ td>
</ tr>
<tr>
<td> <a href=”http://www.jjwdesign.com/”>JJWデザイン</a></ td>
<td> <a href=”http://www.iproundup.com/”>IPラウンドアップ</a></ td>
</ tr>
</ table>

さて、 <table>ステートメントのこの小さなセクションを楽しんでいただけたと思います。 <table>ステートメントを使用して実行できることは、このチュートリアルで可能なことよりもはるかに多くあります。 それでも、これがお役に立てば幸いです。

このチュートリアルへのリンク！

このチュートリアルは役に立ちましたか？ もしそうなら、それにリンクすることによって私がそれを他の人と共有するのを手伝ってください。 以下のHTMLコードを自分のWebページに配置するだけで、このチュートリアルへのリンクを作成できます。