Vertikale Tabelle HTML

Der folgende Artikel enthält eine Übersicht über vertikale Tabellen-HTML. In der HTML-Tabelle wird jeder neue Datensatz als Zeilen und Spalten in die Datenbank eingefügt. Zeilen gelten in der Datenbank als horizontal und Spalten als vertikal. HTML-Tabellen werden tatsächlich verwendet, um Informationen für ein Framework wie Bootstrap darzustellen. Wir sind in der Lage, das Aussehen und die Haptik des Tisches ganz einfach zu verbessern. Tabellen werden für die meisten Apps wie Web-, Desktop- oder mobile Anwendungen verwendet; Außerdem ist es wichtig, den Endbenutzern Informationen bereitzustellen. Verwendung des Bootstrap-Frameworks und vieler anderer Funktionen zur Bereitstellung der Funktionen zum Gestalten und Optimieren der Präsentation für verschiedene Elemente wie Tabellen.

Wie erstelle ich eine vertikale Tabelle in HTML?

Im Allgemeinen müssen wir eine Tabelle mit Hilfe von

,, gibt die Zeilen an, in Zeilen gesetzt. Tag, manchmal sogar Body-Tag, wird auch nicht verwendet, und dieser Zeitwert liegt in der Mitte, sodass der blockierte Inhalt in der Zelle der äußeren HTML-Tabelle automatisch vertikal zentriert im Bereich des Webbrowsers ausgerichtet wird.

Mit Wenn die HTML-Tabellenzelle einen Inhaltsblock erstellt, der horizontal im Webbrowser-Bereich zentriert ist, ist eine innere Tabelle eine andere Art der HTML-Tabellenzelle, die ein Feld mit der angegebenen Größe bildet, wie wir im vorherigen Beispielbild erwähnt haben Wenn das Bild nur in begrenztem Umfang angezeigt wird, akzeptieren einige Browser die Bildausrichtung auf der Seite selbst nicht.

Wenn wir die innere Tabelle für HTML verwenden, ist es diejenige innerhalb der äußeren HTML-Tabellenzellen. Möglicherweise werden Höhe und Breite der Tabellen nicht festgelegt. Anschließend wird die Größe automatisch an den Inhalt angepasst, unabhängig davon, welche Abmessungen wir festlegen. Wenn Breite und Höhe groß sind, werden die Bereiche des Webbrowsers automatisch in der Mitte angezeigt.

Im obigen Beispiel wird manchmal  das Tag hervorgehoben. sodass das Bild in IE Version 3 nicht angezeigt wird. Auch wenn wir in den HTML-Tabellen auch die Browserkompatibilität eingestellt haben.

Fazit

In HTML-Tabellen haben wir die Daten organisiert und wir wissen, wie man die tabellarischen Daten innerhalb des HTML semantisch anordnet und wie man mit CSS-Stilen Initiative ergreift. Wir verwenden auch Bootstrap-Funktionen und JQuery-Bibliotheken mit Javascript zum Hervorheben und Ändern der Reihenfolge der Tabellen. Wenn wir JQuery-Plugins verwenden müssen, verfügt es über viele erweiterte Funktionen für die Tabellen. Wenn Sie beispielsweise den Cursor in den Tabellenzellen platzieren, werden die Farben automatisch hervorgehoben. Wenn wir einige fortgeschrittene Konzepte verwenden, kann es ebenfalls dazu kommen, dass die Tabellenformate variieren und die Daten ausgerichtet werden.

,

erstellen. Tags. In diesem

gibt die Tabellenköpfe an,

es gibt die Werte in HTML an. Wir haben unten einige Beispiele gesehen:

Beispiel #1

Code:

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>

Name:	Sivaraman
Mobile:	123456789

 Ausgabe:

Im obigen Beispiel haben wir zwei Überschriften auf der vertikalen Seite gesehen; Sie werden im Spaltenformat angezeigt. Es ist eines der grundlegenden Beispiele für die vertikale Datenanzeige in den HTML-Tabellen.

Beispiel #2

Code:

<style>
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #c6c7cc;
padding: 10px 15px;
}
th {
font-weight: bold;
}
table.scroll {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
border: 2px solid black;
}
table.scroll tbody,
table.scroll thead tr { display: block; }
table.scroll tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
table.scroll tbody td,
table.scroll thead th {
width: 140px;
border-right: 1px solid black;
}
table.scroll thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
thead tr th {
height: 30px;
line-height: 30px;
/*text-align: left;*/
}
tbody { border-top: 2px solid black; }
tbody td:last-child, thead th:last-child {
border-right: none !important;
}
</style>

ID	Name	Age
1	Siva	30
2	Raman	29
3	Sivaraman	31

Ausgabe:

Im obigen Beispiel verwenden wir die Scroll-Optionen. Standardmäßig ist die Option zum vertikalen Scrollen für Tabellendaten aktiviert. Bei Bedarf haben wir auch horizontale Bildlaufoptionen aktiviert.

Beispiel #3

Code:

<style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th,  td { display: block; }
</style>

Name

Number

Age

ID

 Ausgabe:

Im obigen Beispiel haben wir die Spalten mit dem Hintergrundfarbenstil hervorgehoben. Wir verwenden die Vordergrundfarbe auch, um die Teile bei Bedarf hervorzuheben.

Tabellen in verschiedenen Abschnitten

Wir haben auch eine andere Tabellenformatierung in HTML-Tabellen verwendet. In den obigen Beispielen haben wir Grundlagen für die vertikale Tabellenausrichtung verwendet; Wir haben eine andere Formatierung für hervorgehobene Tabellen:

Ränder und Regeln: Durch die Verwendung von Rändern werden die Rahmen um die Tische hervorgehoben.

IT

Name	Age	Number
Sivaraman	30	8220244056
Raman	31	123456789

Wir haben die Grenzen für die obigen Beispiele gesehen; es ist eine begrenzte Grenze; Wir verwenden auch einige andere Ränder wie gepunktete Linien usw.

Wie zentriere ich ein Bild vertikal in HTML?

Wir richten die Bilder auch vertikal für HTML aus; Bei Verwendung des CSS-Stils müssen wir die Einstellungen im Style-Tag zuweisen und wir haben das Bild im vertikalen Modus angezeigt.

Code:

<center>
<table width="100%" height="100%" bgcolor="#a3ddc4">
<tr>
<td align="center">
<table width="800" height="500" bgcolor="#ff6f6f">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- For Internet Explorer 3-->
<center>

</center>
</center>

Ausgabe:

Das obige Beispiel zeigt, dass sich das Bild im vertikalen Modus befindet; Bei Bedarf ändern wir auch die Ausrichtung. Im vertikalen Modus wird der Platz reduziert und die anderen Inhalte der Seite werden im Vergleich zum horizontalen Modus auf einer einzigen Seite angezeigt. Äußere HTML-Tabellen bilden mit Ausnahme der Ränder eine HTML-Tabelle im Webbrowserbereich, und der gesamte Bereich besteht aus HTML-Tabellenzellen.

Die äußeren und inneren HTML-Tabellenzellen erben den Standardwert für die Ausrichtung der Attribute aus den übergeordneten und untergeordneten Tabellenzeilen. Außerdem wird der Standardwert zur Verwendung der valign-Attribute in der äußeren HTML-Tabelle mit

Das obige ist der detaillierte Inhalt vonVertikale Tabelle HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!