HTML 横棒
HTML バーは、数値データを表すために使用される非常に一般的なツールです。 数値データをグラフィカルに表示します。
HTML バーには次の 2 種類があります。
- 横棒
- 縦棒
しかし、この記事は HTML の水平バーに関するものであり、プレーンな HTML で水平バーを生成する方法を見ていきます。
MS Office、プレーン HTML、Web オフィス コンポーネントなどのあらゆるテクノロジを使用できますが、プレーン HTML を使用するのが最も簡単です。 ここでは、効果的な HTML 水平バーを作成するために必要な手順を見ていきます。
HTML で水平バーを生成する
いくつかの簡単な手順に従って、HTML 水平バーを生成します。 HTML 水平バーの基本的な構成要素は、HTML テーブル、<p> および <div> タグです。
これは、HTML テーブル <tr> の <td> タグ内に配置された <p> タグと <div> タグのセットです。
HTML 水平バーを生成する手順。
-
HTML テーブルを取得する
<table></table> -
テーブルに必要な行数を決定します。 表の各行は、HTML の水平バーを表します。
-
各行に 2つの列を追加します。 コードは次のようになります。
<table> <tr> <td></td> <td></td> </tr> </table>
-
最初の列に、Y 軸のラベルを付けた
<div>または<p>タグを追加します。 -
<tr>タグの 2 列目に、<div>タグを追加します。<div>は、異なるbackground-colorとwidthを持つstyleプロパティを取ります。 コードは次のようになります。<table> <tr> <td> <div> HTML Horizontal Bar </div> </td> <td> <div style= 'background-color: blue; width: 300px'> HTML Horizontal Bar </div> </td> </tr> </table>
完全なコード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML: The strong and em tags</title>
</head>
<body>
<table>
<tr>
<td>
<div>
HTML Horizontal Bar1
</div>
</td>
<td>
<div style= 'background-color: blue; width: 300px'>
HTML Horizontal Bar1
</div>
</td>
</tr>
<table>
<tr>
<td>
<div>
HTML Horizontal Bar2
</div>
</td>
<td>
<div style= 'background-color: black; width: 400px'>
HTML Horizontal Bar2
</div>
</td>
</tr>
</table>
</table>
</body>
</html>
まとめ
この記事を要約すると、水平バーとは何か、その種類、およびプレーン HTML で水平バーを作成する方法について説明しました。 さらに、HTML 水平バーを作成するために必要な手順と、プレーン HTML で水平バーを生成するために使用されるタグについて説明しました。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn