Tabellen sind eine großartige Möglichkeit, Daten auf einer Webseite zu organisieren und anzuzeigen. Sie können uns helfen, Informationen in einem klaren und geordneten Format zu präsentieren. Manchmal möchten wir jedoch bestimmte Elemente einer Tabelle hervorheben, damit sie die Aufmerksamkeit des Lesers auf sich ziehen. Eine Möglichkeit, dies zu erreichen, ist die Verwendung von Fettdruck.
Die Fettschrift eignet sich hervorragend zum Hervorheben von Spaltenüberschriften oder Zeilen, insbesondere wenn sie wichtige Informationen enthalten. Es ist wichtig zu beachten, dass das Anwenden von Fett auf eine Tabelle mit HTML-Code implementiert werden kann. In diesem Artikel werden wir uns einfache Anweisungen ansehen, die Ihnen helfen, die Tabelle einer Webseite mit Fettdruck ausdrucksvoller zu gestalten.
Geben Sie zunächst ein Tag ein table in HTML-Code, um eine Tabelle auf Ihrer Webseite zu erstellen. Definieren Sie dann die Spaltenüberschriften und Tabellenzeilen mithilfe von Tags th und td entsprechend. Wenn Sie die gewünschten Überschriften gefunden haben, beginnen Sie mit der Verwendung einer Fettschrift.
Eine einfache Möglichkeit, eine Tabelle fett zu machen
Um dies zu tun, fügen Sie Ihrer Tabelle zuerst einen Stil mit dem style-Attribut hinzu. Zum Beispiel:
Wenn Sie beispielsweise den Stil nur auf den Tabellenkopf und nicht auf die gesamte Tabelle anwenden möchten, sieht der Code folgendermaßen aus:
| Заголовок 1 | Заголовок 2 |
|---|---|
| Содержимое 1 | Содержимое 2 |
Jetzt wird Ihre Tabelle mit Fettdruck ausdrucksvoller aussehen.
Sie müssen die folgende Struktur verwenden, um eine Tabelle zu erstellen:
| Titelzelle | Titelzelle |
|---|---|
| Datenzelle | Datenzelle |
Das Ergebnis wird wie folgt aussehen:
| Titelzelle | Titelzelle |
|---|---|
| Datenzelle | Datenzelle |
Hinzufügen von Tabellenstilen mithilfe von Attributen
Sie können eine Tabelle mit HTML-Tag-Attributen formatieren table. Sie können das Attribut verwenden, um Text in Tabellenzellen fett zu formatieren style.
Betrachten Sie zum Beispiel eine Tabelle mit zwei Spalten und zwei Zeilen:
Столбец 1 Столбец 2 Значение 1 Значение 2
In diesem Beispiel wird das Attribut style gibt die Fettschrift für den Text in jeder Zelle in der Tabelle an. Daher werden alle Textwerte in der Tabelle in Fettdruck angezeigt.
Sie können auch andere Stilattribute angeben, z. B. Textfarbe, Hintergrundfarbe und andere, um komplexere Stile für die Tabelle zu erstellen. Auf diese Weise können Sie das Aussehen der Tabelle steuern und ihre Bedeutung auf der Webseite unterstreichen.
Verwenden von Klassen zum Formatieren einer Tabelle
Standard-HTML-Tools ermöglichen es uns, eine Tabelle zu erstellen, aber wenn wir ihre visuelle Darstellung ändern möchten, können wir CSS-Klassen verwenden.
Um eine Klasse auf eine Tabelle anzuwenden, müssen wir diese Klasse zuerst in unserer CSS-Tabelle definieren. So können Sie dies tun:
Hier haben wir eine Klasse mit dem Namen "bold" erstellt und die font-weight-Eigenschaft mit dem Wert "bold" festgelegt, wodurch der Text fett wird.
Um diese Klasse nun auf bestimmte Tabellenzellen anzuwenden, müssen Sie ein class-Attribut hinzufügen und den Klassennamen in Anführungszeichen angeben. Zum Beispiel:
| Student | Bewertung |
| Ivanov | 5 |
| Petrov | 4 |
In diesem Beispiel haben wir die Klasse "bold" für zwei Tabellenzellen festgelegt, die die Namen der Studenten enthalten. Diese Zellen werden nun in Fettdruck angezeigt.
Die Verwendung von Klassen zum Formatieren einer Tabelle ermöglicht es uns, die gleichen Stilisierungsregeln einfach auf verschiedene Tabellenelemente anzuwenden, ohne den Code wiederholen zu müssen. Darüber hinaus wird es unseren HTML-Code lesbarer und benutzerfreundlicher machen.
Formatieren von Tabellentext mit CSS
Sie können die folgenden Eigenschaften verwenden, um Text in Tabellenzellen mit CSS zu formatieren:
- font-weight - legt den Fettgehalt der Schriftart fest. Der Wert "bold" macht den Text fett.
- font-style - legt den Schriftstil fest. Der Wert "italic" macht den Text kursiv.
- text-decoration - legt die dekorative Gestaltung des Textes fest. Der Wert "underline" fügt einen Unterstrich hinzu, während "line-through" durchgestrichen wird.
- text-align - legt die Ausrichtung des Textes in einer Tabellenzelle fest. Die Werte "links", "Mitte" und "rechts" legen die Ausrichtung jeweils am linken Rand, an der Mitte und am rechten Rand fest.
- color - legt die Farbe des Textes fest.
Sie können diese Eigenschaften auf den Tabellentext anwenden, indem Sie die entsprechenden CSS-Stile über das "style" -Attribut jeder Zelle festlegen:
Текст 1 Текст 2 Текст 3 Текст 4 Текст 5
Im folgenden Beispiel wird die folgende Formatierung für den Text in einer Tabelle festgelegt:
- Die erste Zelle ist fett gedruckt.
- Die zweite Zelle hat eine Kursivschrift.
- Die dritte Zelle hat unterstrichenen Text.
- Die vierte Zelle hat eine zentrierte Textausrichtung.
- Die fünfte Zelle hat eine rote Textfarbe.
So können Sie mithilfe von CSS-Stilen den Text in der Tabelle unterschiedlich formatieren, um bestimmte Elemente hervorzuheben oder deren Erscheinungsbild entsprechend den Designanforderungen der Seite zu ändern.
