Tabelle ohne Rand in HTML

Die Tabelle ohne Rahmen ist eine Entwurfsansicht der Webseite unter Verwendung einer HTML-Tabelle. Die Verwendung der Tabelle vereinfacht die Darstellung großer Informationen in einfachster Form.

• Tabelle mit oder ohne Rahmen zum Vergleich zwischen den Elementen.
• Textliche und numerische Informationen können beide im Tabellenformat vorliegen.

In der HTML-Seite wird ein Großteil der tabellarischen Struktur ohne Rahmen erstellt. Die Verwendung des Rahmens im Tischdesign hängt von seinem Verwendungszweck ab. Ein tabellarisches Design auf der Seite kann mit dem folgenden HTML erstellt werden.

Beispiel:

<table>
<thead>
<th>S.No</th>
<th>Name</th>
<th>Date of Birth</th>
<th>Profile</th>
<th>Salary</th>
</thead>
<tbody>
<tr>
<td>1</td><td>Jeff Smith</td>
<td>35</td>
<td>Assistant Manager</td>
<td>120,000</td>
</tr>
<tr>
<td>2</td>
<td>Maria Garcia</td>
<td>42</td>
<td>Department Head</td>
<td>85,000</td>
</tr>
<tr>
<td>3</td>
<td>David Rodriguez</td>
<td>37</td>
<td>Senior Sales Executive</td>
<td>45,000</td>
</tr>
<tr>
<td>4</td>
<td>Eyon Shih</td>
<td>32</td>
<td>Sales Executive</td>
<td>35,000</td>
</tr>
</tbody>
</table>

Die oben angegebene Tabellenstruktur zeigt Daten im Tabellenformat an, wie im folgenden Screenshot angegeben.

Im oben gezeigten Screenshot ist der Rand nicht verfügbar. Standardmäßig bleibt der Rahmen im Tabellendesign nicht verfügbar. Um den Rahmen in der Tabelle zu aktivieren, müssen Sie einen Stilrahmen hinzufügen. Dieser Rahmen enthält drei Dinge wie die Größe des Rahmens (z. B. in px), den Typ des Rahmens (z. B. einfarbig, dünn, erben usw.) und drittens ist die Farbe (z. B. rot, blau, schwarz, grün, Farbcode).

table{
border : 1px solid #000000;
}

Der Tabellenrand erleichtert die Darstellung der Tabelle und die Trennung von Zeilen und Spalten.

Arten von Tischen ohne Rand

Gegeben sind die Typen einer Tabelle ohne Rahmen:

1. Satztische

Satztabellen beziehen sich auf die Tabellen innerhalb der Tabelle. Das Verschachteln von Tabellen ist keine gute Praxis, aber in manchen Fällen ist es notwendig, eine Tabelle innerhalb der Tabelle zu verwenden. Aufgrund der Zugänglichkeit und des verwirrenden Markups kann es lächerlich sein, die Verschachtelung von Tabellen zu verwenden.

Beispiel:

In der unten angegebenen Tabelle sind zwei Tabellen in den Spalten der übergeordneten Tabelle verschachtelt.

Code:

<table width="80%" cellspacing="0" cellpadding="5">
<thead>
<th>Description</th>
<th>Electricals & Electronics</th>
<th>Computers & Accessories</th>
</thead>
<tbody>
<tr>
<td class="text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</td>
<td>
<table width="400" cellspacing="0">
<tbody>
<tr>
<td>Television</td>
<td>Washing Machine</td>
<td>Fan</td>
</tr>
<tr>
<td>Induction</td>
<td>Room Heater</td>
<td>Iron</td>
</tr>
<tr>
<td>Inverter Kits</td>
<td>Circuits</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
<td>
<table width="250" cellspacing="0">
<tbody>
<tr>
<td>Laptop</td>
<td>Monitor</td>
<td>CPU</td>
</tr>
<tr>
<td>Keyboard</td>
<td>Mouse</td>
<td>Scanner</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Stil:

Der unten angegebene Stil wird verwendet, um die klarere Ansicht des verschachtelten Tabellendesigns darzustellen.

Code:

<style type="text/css">
table th{
width: 200px;
text-align: center;
}
td.text{
text-align: justify;
padding: 5px;
}
table table, table table td{
border: 1px solid #000;
}
</style>

Ausgabe:

Übergeordnete Tabelle ohne Rahmen. aber die innere Tabelle enthält den Rand darin. Zur übersichtlichen Darstellung wird in der geschachtelten Tabelle der Rahmen verwendet. Wir können den Rahmen aus der verschachtelten Tabelle entfernen, indem wir den rahmenbezogenen Stil entfernen.

2. Zebrastreifentabellen

Zebrastreifen-Tabellen beziehen sich auf Tabellen mit unterschiedlichen Farben in den abwechselnden Zeilen. Unterschiedliche Farben in den abwechselnden Reihen erleichtern die Unterscheidung der Reihen voneinander. Anhand der Farbe ist es einfacher, die jeweilige Tabellenzeile zu erkennen. Das Platzieren von Stilen auf den Tabellen-Tags kann auch mit jQuery hinzugefügt werden.

Beispiel:

Ein Beispiel ist das grundlegende; Hier erstellt die HTML-Tag-Tabelle ein tabellarisches Design und anschließend wird ein Stil hinzugefügt, um diese Tabelle als Zebra-Striping-Tabelle zu erstellen.

Code:

<table width="50%" cellspacing="0">
<thead>
<th width="100">S.No.</th>
<th width="150">Country Code</th>
<th width="200">Country</th>
<th width="150">Phone Code</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>AW</td>
<td>Aruba</td>
<td>297</td>
</tr>
<tr>
<td>2</td>
<td>AU</td>
<td>Australia</td>
<td>61</td>
</tr>
<tr>
<td>3</td>
<td>AT</td>
<td>Austria</td>
<td>43</td>
</tr>
<tr>
<td>4</td>
<td>AZ</td>
<td>Azerbaijan</td>
<td>994</td>
</tr>
<tr>
<td>5</td>
<td>BS</td>
<td>Bahamas</td>
<td>1241</td>
</tr>
<tr>
<td>6</td>
<td>BH</td>
<td>Bahrain</td>
<td>973</td>
</tr>
</tbody>
</table>

Stil:

Das unten angegebene CSS macht die HTML-Tabelle zu Zebrastreifen.

Code:

<style type="text/css">
table th, table td{
text-align: center;
}
tbody tr:nth-child(even) {
background: #e8e7e1;
}
</style>

Ausgabe:

In der unten angegebenen Ausgabe können wir sehen, wie Zeilen der Tabelle mit unterschiedlichen Farben abgewechselt werden.

Fazit

Tabelle ohne Rand ist eine der Möglichkeiten der Tabellendarstellung. Das Tabellenformat kann auch mit anderen HTML-Tags wie ul > erreicht werden. li, div usw., aber die Verwendung einer Tabelle für die tabellarische Struktur reduziert den Styling-Aufwand, während die Verwendung von div für das tabellarische Design aufgrund des responsiven Designansatzes zunimmt.

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