Horizontale HTML-Leiste

Zeeshan Afridi 20 Juni 2023

HTML HTML Bar

Generieren Sie einen horizontalen Balken in HTML
Abschluss

HTML-Leisten sind sehr verbreitete Werkzeuge, die verwendet werden, um numerische Daten darzustellen. Es gibt eine grafische Darstellung numerischer Daten.

Es gibt zwei Arten von HTML-Leisten:

Horizontaler Balken
Senkrechter Balken

Aber dieser Artikel handelt von horizontalen HTML-Balken, und wir werden sehen, wie wir einen horizontalen Balken in einfachem HTML erzeugen können.

Wir können mit jeder Technologie wie MS Office, einfachem HTML und Weboffice-Komponenten arbeiten, aber die Verwendung von einfachem HTML ist die einfachste von allen. Hier sehen wir uns also die Schritte an, die zum Erstellen einer effektiven horizontalen HTML-Leiste erforderlich sind.

Generieren Sie einen horizontalen Balken in HTML

Wir werden einige einfache Schritte befolgen, um eine horizontale HTML-Leiste zu generieren. Die Grundbausteine einer horizontalen HTML-Leiste sind eine HTML-Tabelle, <p>- und <div>-Tags.

Es handelt sich um eine Reihe von <p>- und <div>-Tags, die innerhalb der <td>-Tags einer HTML-Tabelle <tr> platziert werden.

Schritte zum Generieren einer horizontalen HTML-Leiste.

Nehmen Sie eine HTML-Tabelle
```
<table></table>
```
Bestimmen Sie die Anzahl der Zeilen, die Sie in der Tabelle benötigen. Jede Zeile in der Tabelle repräsentiert einen horizontalen HTML-Balken.

Fügen Sie in jeder Zeile zwei Spalten hinzu. Der Code sollte so aussehen:

<table>
   <tr>
	   <td></td>
	   <td></td>
   </tr>
</table>

Fügen Sie in der ersten Spalte das Tag <div> oder <p> mit einer Bezeichnung für die Y-Achse hinzu.

Fügen Sie in der zweiten Spalte des Tags <tr> ein Tag <div> hinzu. Das <div> übernimmt die Eigenschaft style mit unterschiedlicher background-color und width. Der Code wird wie folgt aussehen:

<table>
   <tr>
	   <td>
		   <div>
			   HTML Horizontal Bar
		   </div>
	   </td>
	   <td>
		   <div style= 'background-color: blue; width: 300px'>
			   HTML Horizontal Bar
		   </div>
	   </td>
   </tr>
</table>

Vollständiger Code:

<!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>

Abschluss

Um den Artikel zusammenzufassen, haben wir besprochen, was ein horizontaler Balken ist, welche Typen er hat und wie man ihn in einfachem HTML erstellt. Darüber hinaus haben wir die Schritte besprochen, die zum Erstellen einer horizontalen HTML-Leiste erforderlich sind, und die Tags, die zum Generieren einer horizontalen Leiste in einfachem HTML verwendet werden.

Autor: Zeeshan Afridi

Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.