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.
Im Allgemeinen müssen wir eine Tabelle mit Hilfe von
| , | erstellen. Tags. In diesem |
|---|---|
| gibt die Tabellenköpfe an, | es gibt die Werte in HTML an. Wir haben unten einige Beispiele gesehen:
Beispiel #1Code: <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table style="width:75%">
<tr>
<th>Name:</th>
<td>Sivaraman</td>
</tr>
<tr>
<th>Mobile:</th>
<td>123456789</td>
</tr>
<tr>
</table>
</body>
</html>Nach dem Login kopieren 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 #2Code: <html>
<head>
<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>
</head>
<table class="scroll">
<thead>
<tr>
<th scope="col" colspan="1">ID</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Siva</td>
<td>30</td>
</tr>
<tr>
<td>2</td>
<td>Raman</td>
<td>29</td>
</tr>
<tr>
<td>3</td>
<td>Sivaraman</td>
<td>31</td>
</tr>
</tbody>
</table>
</html>Nach dem Login kopieren 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 #3Code: <style>
table { border-collapse: separate; line-height:25px; }
tr { display: block; float: left; width:200px;}
th, td { display: block; }
</style>
<form >
<table border="1" class="variant-table" >
<tr>
<td style="background-color: #53B3AE;">Name</td>
<td style="background-color: #53B3AE;">Number</td>
<td style="background-color: #53B3AE;">Age</td>
<td style="background-color: #53B3AE;">ID</td>
</tr>
</table>
</form>Nach dem Login kopieren 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 AbschnittenWir 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. <TABLE border="1" summary="Welcome to My Domain."> <CAPTION>IT</CAPTION> <TR> <TH>Name</TH> <TH>Age</TH> <TH>Number</TH> <TR> <TD>Sivaraman</TD> <TD>30</TD> <TD>8220244056</TD> <TR> <TD>Raman</TD> <TD>31</TD> <TD>123456789</TD> </TABLE> Nach dem Login kopieren
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: <html> <body bgcolor="#ffffff"> <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> </body> </html> Nach dem Login kopieren 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 |
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
