Markieren einer Zelle - eine der Hauptfunktionen von Tabellen in HTML. Es wird normalerweise verwendet, um bestimmte Informationen hervorzuheben oder eine einfache Tabellennavigation zu erstellen. Das Anpassen der Zellenauswahl kann jedoch besonders für Anfänger schwierig sein.
In diesem ausführlichen Tutorial erfahren Sie, wie Sie die Zellenauswahl in HTML anpassen. Wir werden uns die Verwendung von Attributen genauer ansehen colspan und rowspan, mit denen Sie Zellen zu einer großen Zelle zusammenführen und Zellen Stile hinzufügen können.
Darüber hinaus werden wir Beispiele für das Anwenden von CSS auf ausgewählte Tabellenzellen untersuchen, um Hintergrundfarbe hinzuzufügen, die Schriftart und Ausrichtung des Textes zu ändern und vieles mehr.
Wenn Sie lernen möchten, professionell aussehende Tabellen mit der Zellauswahl zu erstellen, dann ist dieses detaillierte Tutorial genau das, was Sie brauchen. Lesen Sie weiter, um alle notwendigen Kenntnisse und Fähigkeiten zu erwerben.
Erste Schritte: Erstellen von Tabellen und Zellen
Um mit der Auswahl einer Zelle in einer Tabelle zu beginnen, müssen Sie die Tabelle selbst und die darin enthaltenen Zellen erstellen. In HTML werden dazu die Tags und verwendet.
Mit dem Tag wird eine Tabelle erstellt und die Position der Tabelle auf der Seite sowie andere Tabelleneigenschaften wie Breite, Rahmen und Hintergrundfarbe festgelegt. Jede Tabelle besteht aus einem oder mehreren Tags (Tabellenzeile), die wiederum ein oder mehrere Tags (Tabellenzelle) enthalten.
Beispiel zum Erstellen einer Tabelle:
| Zelle 1 | Zelle 2 |
In diesem Beispiel wird eine Tabelle mit einer Zeile und zwei Zellen erstellt. Innerhalb jeder Zelle befindet sich der Text, der in der Zelle angezeigt wird.
Personalisierung: Ändern der Farbe und Schriftart einer Zelle
Sie können das bgcolor-Attribut verwenden, um die Hintergrundfarbe einer Tabellenzelle zu ändern und die gewünschte Farbe als Titel oder Hexadezimalcode anzugeben. Zum Beispiel:
Sie können die Schriftart einer Zelle mit den Attributen color und font ändern. Mit dem color-Attribut können Sie die Farbe des Textes in einer Zelle angeben, und mit dem font-Attribut können Sie andere Schrifteinstellungen wie Größe, Schriftart oder Familie ändern.
Wenn Sie CSS verwenden, können Sie diese Stile mithilfe von Klassen anwenden, die innerhalb eines Tags oder einer externen Stildatei definiert sind.
In CSS kann eine Klasse wie folgt definiert werden:
Im obigen Beispiel haben alle Zellen mit der Klasse "highlight" einen gelben Hintergrund und eine Fettschrift.
Dadurch können Sie die Farbe und Schriftart der Tabellenzellen ändern, um die gewünschten Informationen hervorzuheben und ein einzigartiges Design zu erstellen, das die Wahrnehmung der Daten verbessert.
Gestaltung: hinzufügen von Zellgrenzen und Füllung
Um einer Zelle Grenzen hinzuzufügen, können Sie die Attribute border und border-color verwenden. Zum Beispiel:
Ячейка 1 Ячейка 2
Im obigen Beispiel haben beide Zellen einen Rahmen mit einer Dicke von 1 Pixel und eine Farbe, die im Border-color-Attribut angegeben ist, das die Farbe schwarz angibt.
Sie können das bgcolor-Attribut verwenden, um einer Zelle eine Füllung hinzuzufügen. Zum Beispiel:
Ячейка 1 Ячейка 2
In diesem Beispiel hat die erste Zelle einen roten Hintergrund und die zweite einen blauen Hintergrund.
Das Hinzufügen von Rändern und Füllungen zu Tabellenzellen ermöglicht somit eine spektakuläre Darstellung und die Hervorhebung bestimmter Teile der Tabelle.
Ausrichten: Ändert die Position des Textes in einer Zelle
Sie können das align-Attribut mit unterschiedlichen Werten verwenden, um die Ausrichtung des Textes in einer Zelle zu ändern:
- align="left" - Richtet den Text am linken Rand der Zelle aus;
- align="center" - Richtet den Text in der Mitte der Zelle aus;
- align="right" - Richtet den Text am rechten Rand der Zelle aus;
- align="justify" - Verteilt den Text über die Breite der Zelle.
Beispiel für die Verwendung des Attributs align :
Текст слева Текст по центру Текст справа Текст по ширине Sie können auch das style-Attribut mit der CSS-Eigenschaft text-align verwenden :
Текст слева Текст по центру Текст справа Текст по ширине Beide Methoden sind gleichwertig und können je nach den Vorlieben des Entwicklers verwendet werden.
Durch Ändern der Textausrichtung in einer Zelle können Sie eine besser lesbare und strukturierte Tabelle erstellen.
Datenformatierung: Hinzufügen eines numerischen und Textformats
Sie können die Daten in der Zelle nicht nur einfach mit Farbe markieren, sondern auch formatieren, indem Sie spezielle numerische oder Textformate hinzufügen.
Zahlenformat:
Um einer Tabellenzelle ein numerisches Format hinzuzufügen, können Sie die Funktion verwenden NumberFormat. Sie können die Anzahl der Dezimalstellen angeben, ein Tausendertrennzeichen hinzufügen und ein Währungs- oder Prozentsymbol angeben.
Beispiel für die Verwendung der NumberFormat-Funktion:
let cell = sheet.getCell('A1');let format = cell.numberFormat();format.format = '#,##0.00 $'; // отображение числа с двумя десятичными знаками и символом доллараcell.numberFormat(format);Textformat:
Um ein Textformat zu einer Tabellenzelle hinzuzufügen, können Sie die Funktion verwenden TextFormat. Es ermöglicht Ihnen, die Schriftart, Größe und Ausrichtung des Textes zu ändern und einen bestimmten Stil als fett oder kursiv hinzuzufügen.
Beispiel für die Verwendung der TextFormat-Funktion:
let cell = sheet.getCell('B1');let format = cell.textFormat();format.fontFamily = 'Arial'; // изменение шрифта на Arialformat.fontSize = 14; // изменение размера шрифта на 14 пунктовformat.bold = true; // сделать текст жирнымcell.textFormat(format);Durch die numerische und Textformatierung können Sie jede Zelle der Tabelle individuell anpassen, sodass sie die Daten im gewünschten Stil und Format anzeigt.
Zellen verbinden: Erstellen und Verbinden von Zeilen und Spalten
Um eine Zellenverbindung zu erstellen, können Sie die Attribute rowspan und colspan verwenden. Mit dem rowspan-Attribut können Sie mehrere Zellen in einer einzigen Zeile zusammenführen, und das Colspan-Attribut wird verwendet, um mehrere Zellen in einer einzigen Spalte zusammenzuführen.
Um Zellen zu einer Zeile zusammenzuführen, legen Sie den Wert des Rowspan-Attributs auf die Anzahl der Zellen fest, die Sie zusammenführen möchten. Wenn Sie beispielsweise zwei Zellen zu einer einzigen Zeile zusammenführen möchten, legen Sie den Wert rowspan="2" fest.
Um Zellen in einer Spalte zu kombinieren, legen Sie den Wert des Colspan-Attributs auf die Anzahl der Zellen fest, die Sie zusammenführen möchten. Wenn Sie beispielsweise drei Zellen in einer Spalte zusammenführen möchten, legen Sie den Wert colspan="3" fest.
Beispiel für das Zusammenführen von Zellen in eine Zeichenfolge:
| Ячейка 1 | Ячейка 2 | Ячейка 3 |
| Ячейка 4 | Ячейка 5 |
Beispiel für das Zusammenführen von Zellen in einer Spalte:
| Ячейка 1 | Ячейка 2 | |
| Ячейка 3 | Ячейка 4 | Ячейка 5 |
Die Verkettung von Zellen kann verwendet werden, um komplexere Tabellenstrukturen zu erstellen, z. B. das Zusammenführen von Zeilen und Spalten im Tabellenkopf, das Aufteilen der Tabelle in Abschnitte und andere Verbesserungen des Aussehens und der Funktionalität der Tabelle.
Erweiterte Einstellungen: Einfügen von Bildern und Referenzen in Zellen
Sie können diese Funktionen auch kombinieren, indem Sie Links zu Bildern oder Bildern zu Links hinzufügen. Zum Beispiel:
Mit diesen einfachen Tags können Sie den Tabellenzellen Bilder und Links hinzufügen, um Ihre Tabelle informativer und interaktiver zu gestalten.
