Sql-Daten In HTML-Tabellen Javascript Anzeigen

| | | | |

In den frühen Tagen der Webentwicklung waren HTML-Tabellen sehr einfach und es fehlten umfangreiche Styling-Optionen. Heutzutage sind die meisten Tabellen jedoch so gestaltet, dass sie den Benutzern ein ästhetischeres und funktionaleres Erlebnis bieten.

CSS bietet eine Reihe von Attributen für Tabellenstile. Mit diesen Attributen können Sie unter anderem Tabellenzellen trennen, Tabellenränder sowie Tabellenbreite und -höhe festlegen.

Dieses Tutorial erklärt anhand von Beispielen, wie Sie eine Tabelle mit CSS formatieren . Am Ende dieses Tutorials sind Sie ein Experte.

HTML-Tabellen

Der HTML-Code definiert die Struktur der Tabellen. Verwenden Sie das Tag

, um eine Tabelle zu definieren. Die Tags ,
und geben jeweils Zeilen, Tabellenüberschriften und Inhaltszellen an.

Sehen wir uns eine Beispiel-HTML-Tabelle an. Im folgenden Beispiel haben wir eine Tabelle mit den fünf besten Büchern auf der Bestsellerliste der New York Times für die Woche vom 23. März 2020:

Screenshot 2020 03 24 at 09.50.10 1

Der Code für unsere Tabelle lautet wie folgt:

Diese Tabelle hat drei Spalten und sechs Zeilen, einschließlich einer Zeile mit `on Ihre Meinung.

Tables CSS

CSS wird verwendet, um Tabellen zu formatieren. Obwohl die obige Tabelle die Daten auf organisierte Weise zeigt, ist sie in einfachem HTML geschrieben (es gibt keine Stile). Durch die Verwendung von CSS können Sie Tabellen besser aussehen lassen.

Es gibt viele CSS-Funktionen, die Sie verwenden können einen Tisch gestalten. Mit CSS können Sie:

  • Rahmen hinzufügen
  • Rahmen komprimieren
  • Rahmenabstand anpassen
  • Breite und Höhe von a anpassen Tabelle
  • Padding hinzufügen
  • Text horizontal ausrichten
  • Text vertikal ausrichten
  • Jog Mouse (Hover) Funktion hinzufügen
  • Zellenfarben festlegen
  • Legen Sie fest, wie leere Zellen angezeigt werden

Wir werden alle diese Themen in der folgenden Diskussion behandeln.

Rahmen

Angenommen, wir möchten Rahmen um das Array oder um die darin enthaltenen Elemente hinzufügen.

Um Rahmen hinzuzufügen, können wir die Eigenschaft border verwenden. Hier ist ein Beispiel, das die Border-Eigenschaft verwendet, um Rahmen zu einer Tabelle und ihren Zellen hinzuzufügen, einschließlich Header-Zellen:

In unserem Code definieren wir einen durchgezogenen schwarzen Rand, 1 Pixel breit. Hier ist das Ergebnis unseres Codes:

Screen Shot 2020 03 24 at 09.53.50

Beachten Sie, dass unsere Tabelle doppelt enthält Ränder Das liegt daran, dass wir einen Rand auf die Tabelle selbst (

), ihre Kopfzeilen (
) und ihre Zellen () angewendet haben, doppelte Ränder auf einfache Ränder, wir können die Eigenschaft border-collapse verwenden.

Die Eigenschaft border-collapse wandelt die doppelten Rahmen einer Tabelle in einfache Rahmen um. Der Standardwert der Eigenschaft border-collapse ist eingeklappt. Wenn die Eigenschaft border-collapse den Wert collapse < erhält /code>, Rahmen um ein Array werden reduziert.

Hier ist ein Beispiel für die Eigenschaft b command-collapse in Aktion:

Unser Code gibt zurück:

Screen Shot 2020 03 24 to 09.55.49

Unsere Tabelle und ihr Inhalt haben jetzt einen einzigen Rahmen.

Border Spac eng

Sie können die Eigenschaft border-spacing verwenden, um den Abstand zwischen Zellen in einer Tabelle zu definieren.Die Eigenschaft border-spacing definiert den horizontalen und vertikalen Abstand dazwischen Zellen - und zwar in dieser Reihenfolge.

Hier ist ein Beispiel, in dem die Eigenschaft border-spacing in unserer ursprünglichen Tabelle verwendet wird (diejenige ohne reduzierte Ränder):

Unser Code gibt zurück:

Screenshot 2020 03 24 at 09.58.18

Jede unserer Zellen hat einen horizontalen Abstand von 10px und vertikale Ränder.

Breite und Höhe

Mit den Attributen width und height können Sie die Breite und Höhe einer Tabelle und ihrer Eigenschaften angeben .

Angenommen, wir möchten, dass die Breite unserer Tabelle oben (diejenige mit eingeklappten Rändern) der Breite der Webseite selbst entspricht, und angenommen, wir möchten, dass die Höhe jeder Tabellenüberschrift 30 Pixel hoch sein muss unter Verwendung des folgenden CSS-Codes:

Unser Code gibt zurück:

Screen Shot 2020 03 24 at 10.00.26

Wie Sie sehen können, hat unsere Tabelle jetzt die Breite von der Webseite dar. Außerdem sind die Spaltenüberschriften in unserer Tabelle 30 Pixel hoch.

Padding

Sie können die Eigenschaft padding verwenden, um etwas Abstand zwischen den Rändern von einzufügen Zellen in einer Tabelle und den Inhalt dieser Zellen. Die Eigenschaft padding kann für die Tags

und verwendet werden.

Sup, nehmen wir an, wir möchten 10 Pixel Padding um die Zelle herum hinzufügen Inhalt unserer Tabelle einschließlich Kopfzellen. Wir können das mit diesem Code tun:

Unser Code gibt zurück:

 Screenshot 2020 03 24 to 08/10.03 1  Screenshot 2020 03 24 at 10.08.03 1

Der Inhalt der einzelnen Zeilen und unserer Header-Tabelle jetzt haben 10px Padding an allen Kanten.

Horizontale Textausrichtung

Sie können die Eigenschaft text-align verwenden, um Text auszurichten, der in einem oder

gespeichert ist ein Array. Standardmäßig sind -Elemente zentriert und -Elemente linksbündig ausgerichtet.

Die am häufigsten verwendeten Werte des Textausrichtungsattributs sind:< br>

  • links, Mitte, rechts (unterstützt von allen Browsern außer Microsoft Edge und Internet Explorer)
  • Start und Ende (unterstützt von allen Browsern außer Microsoft Edge und Internet Explorer )

Angenommen, wir möchten die

-Elemente in unserem Array zentrieren und die -Elemente links von jeder Zelle ausrichten. Wir können dies mit diesem Code tun:

Unser Code gibt zurück:

Screen Shot 2020 03 24 Bis 10.03.04

In diesem Beispiel haben wir den Text außerhalb der Zelle zentriert. Die Zelle d `Header und Header-Zelltext sind linksbündig ausgerichtet.

Vertikale Textausrichtung

CSS Die Eigenschaft vertical-align wird verwendet, um die vertikale Ausrichtung des Inhalts in der

oder . Standardmäßig ist der Wert der Eigenschaft vertikale Ausrichtung auf middle gesetzt, was bedeutet, dass der Inhalt vertikal in der Mitte der Zelle ausgerichtet wird.

Angenommen, wir möchten den Text in unseren Zellen

am unteren Rand der Zellen ausrichten. Eventuell tun wir dies mit diesem Code:

Unser Code gibt zurück:

Scre in Shot 2020 03 24 to 10.05.40

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method