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!