ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLテーブルの境界線を作成するにはどうすればよいですか? HTMLテーブルの作成と例

HTMLテーブルの境界線を作成するにはどうすればよいですか? HTMLテーブルの作成と例

寻∝梦オリジナル: 2018-08-30 10:47:544264ブラウズ

この記事では、主に HTML テーブル table タグの境界線の使用法について説明します。通常、境界線を 1 に設定して、境界線メソッドを示します。次に、HTML のテーブル table タグでの境界線の使用についての記事を見てみましょう

まず、テーブルがどのように定義されているかを見てみましょう:

テーブルは

タグによって定義されます。各テーブルには複数の行 ( タグで定義) があり、各行は複数のセル (

タグで定義) に分割されます。文字 td はテーブルデータ、つまりデータセルの内容を指します。データセルには、テキスト、画像、リスト、段落、フォーム、水平線、表などを含めることができます。

それでは、簡単なテーブルを作成することから始めましょう:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<table border="1" width="300px" height="100">
<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>
</body>
</html>

これは、図に示すように、3 行 3 列の単純なテーブルです:

HTMLテーブルの境界線を作成するにはどうすればよいですか? HTMLテーブルの作成と例

HTML を初めて使用する多くの人にとって、table ; は最も一般的に使用されるラベルですが、多くの初心者はテーブルの境界線の制御を理解していません。

通常、テーブルを使用するときは、

のようなボーダー属性を指定します。その効果は上の図に示すとおりです。

テーブルは非常に広いようです。もちろん、ここでの「幅」はテーブルの境界線の幅ではありません。

間のギャップによって引き起こされるはずです。したがって、テーブルのセルスペース属性を変更するだけで済みます。つまり、

<table border="1px" cellspacing="0px" width="300px" height="100">
<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>

効果は次のとおりです:

HTMLテーブルの境界線を作成するにはどうすればよいですか? HTMLテーブルの作成と例

最初にテーブルに border=1 を追加した理由は、デフォルトの黒のためです。表に線が追加されました。 TD と表にはデフォルトで黒い枠線が付いています。したがって、枠線が正常に表示されるようにこの問題を完全に解決する必要がある場合は、表に色を追加します。

黒は目立たないので、赤に変更します

HTMLテーブルの境界線を作成するにはどうすればよいですか? HTMLテーブルの作成と例

概要: 図に示すように、黒い境界線が赤に変わり、コンテンツを追加して内部のサイズを調整したり、内部のテキストを調整したりすることもできます。つまり、このテーブルは非常に便利です。今回はテーブル表の枠線について紹介しましたが、もちろん実際のアプリケーションでは特殊な場合を除いて枠線を使用することはほとんどありません。通常は境界線の設定を 0 に変更して境界線をなくしますが、ここでは表示と調整に便利なように基本的に境界線を 1 に設定します。

【編集者のおすすめ】

htmlのpタグにaタグを含めることはできますか？ html pタグの機能を解説

html aタグの使い方は？ HTMLタグの使い方まとめ

以上がHTMLテーブルの境界線を作成するにはどうすればよいですか? HTMLテーブルの作成と例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML で ins タグを使用してテキストを挿入し、del タグを使用してテキストを一括削除するにはどうすればよいですか? (例付き)次の記事：HTML で ins タグを使用してテキストを挿入し、del タグを使用してテキストを一括削除するにはどうすればよいですか? (例付き)

続きを見る