Erste Schritte mit HTML -Tischen

HTML-Formulare: Leitfaden zum Erstellen reaktionsschneller und mobilfreundlicher Formen

HTML -Tabellen werden verwendet, um Tabellendaten auf Webseiten anzuzeigen. Sie eignen sich hervorragend, um Informationen organisiert anzuzeigen, und können mit CSS mit dem Aussehen und Stil einer Website entleert werden. In diesem Tutorial werden die Grundlagen des Erstellens von HTML-Tischen und zum Hinzufügen von Stilen abgehalten, damit sie reaktionsschnell und mobilfreundlich sind.

Schlüsselpunkte

• HTML -Tabellen sind leistungsstarke Tools zum Anzeigen von Tabellendaten auf Webseiten und können Tabellen, Zeilen und Zellen mithilfe von <table>, <code><tr> und <code><td> -Tags erstellen. <li> CSS-Eigenschaften wie Grenzen, Füllungen, Hintergrundfarben und Medienabfragen für verschiedene Bildschirmgrößen können implementiert werden, um HTML-Tabellen reaktionsschnell und mobilfreundlich zu gestalten. </li> <li> Zugänglichkeit von HTML-Tabellen kann durch Hinzufügen von Titeln mit <code><caption></caption> -Tags und Zusammenfassungen mit <summary></summary> Tags, die Beschreibungen und Zusammenfassungen für nicht-visuelle Benutzer bereitstellen, erweitert werden.

HTML -Tabelle

erstellen

Um eine HTML -Tabelle zu erstellen, müssen wir das <table> -Tag verwenden. Innerhalb der <code><table> -Tags müssen wir eine oder mehrere <code><tr> -Tags erstellen, die jede Zeile der Tabelle definieren. In jedem <code><tr> -Tag können wir ein oder mehrere <code><td> Tags erstellen, die die Zellen der Tabelle definieren. Hier ist ein Beispiel für eine grundlegende HTML -Tabelle: <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;table&gt; &lt;tr&gt; &lt;td&gt;单元格1&lt;/td&gt; &lt;td&gt;单元格2&lt;/td&gt; &lt;td&gt;单元格3&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;单元格4&lt;/td&gt; &lt;td&gt;单元格5&lt;/td&gt; &lt;td&gt;单元格6&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Dies erstellt eine Tabelle mit zwei Zeilen und drei Spalten, wobei jede Zelle ihren Inhalt zeigt. </p> <p> <a href="https://www.php.cn/link/a382db0a40615cdbe363ae0b4b2eb262"> CODEPEN -Beispiel </a> (durch den tatsächlichen CodePen -Link ersetzen, falls vorhanden) </p> <h2> Zeilen und Spalten </h2> hinzufügen <p> Um der Tabelle eine neue Zeile hinzuzufügen, müssen wir nur ein neues <code><tr> Tag erstellen. Um einer Tabelle eine neue Zelle hinzuzufügen, können wir innerhalb des vorhandenen <tr> -Tags ein neues <td> Tag erstellen. Hier ist eine Beispieltabelle mit vier Zeilen und drei Spalten:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
  <tr>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>
  </tr>
</table>

Dies erstellt eine Tabelle mit vier Zeilen und drei Spalten.

HTML -Tabellenstil

setzen

Sie können CSS verwenden, um HTML -Tabellen zu stylen, um ihr Aussehen zu ändern. Einige der häufigsten CSS -Eigenschaften, die zum Stiltabellen verwendet werden, umfassen Grenzen, Füllungen und Hintergrundfarben. Hier ist ein Beispiel dafür, wie man eine Tabelle mit Grenzen und Hintergrundfarben stylen:

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}

Dies erzeugt eine Tabelle mit schwarzen Rändern und hellgrauen Hintergrundfarben, die jede Zelle mit 8 Pixel gefüllt sind.

CODEPEN -Beispiel (durch den tatsächlichen CodePen -Link ersetzen, falls vorhanden)

reaktionsschnelle und mobilfreundliche Formen erstellen

display Eine der Herausforderungen bei der Verwendung von HTML-Tabellen besteht darin, sie reaktionsschnell und mobilfreundlich zu gestalten. Eine Möglichkeit, dies zu erreichen, besteht darin, CSS zu verwenden, um das Layout der Tabelle gemäß der Bildschirmgröße anzupassen. Eine Möglichkeit besteht darin, das Attribut

zu verwenden, um das Layout der Tabelle von einem festen Layout in ein reaktionsschnelles Layout zu ändern. Dies kann Medienabfragen verwenden, um bestimmte Bildschirmgrößen zu lokalisieren. Hier ist ein Beispiel dafür, wie eine Tabelle reagiert:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

Wenn die Bildschirmbreite weniger als 600 Pixel beträgt, ändert sich das Tabellenlayout vom festen Layout zum ansprechenden Layout.



CODEPEN -Beispiel

(durch den tatsächlichen CodePen -Link ersetzen, falls vorhanden)
Titel und Zusammenfassung

hinzufügen <caption> Ein weiterer wichtiger Aspekt bei der Verwendung von HTML-Tabellen besteht darin, sie nicht-visuelle Benutzer zugänglich zu machen. Eine Möglichkeit besteht darin, der Tabelle einen Titel und eine Zusammenfassung hinzuzufügen. Mit dem

-Tag kann ein Titel zu einer Tabelle hinzugefügt werden, die den Inhalt der Tabelle beschreibt. Hier ist ein Beispiel dafür, wie man einem Tabelle einen Titel hinzufügt:

<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
  <tr>
    <td>单元格7</td>
    <td>单元格8</td>
    <td>单元格9</td>
  </tr>
  <tr>
    <td>单元格10</td>
    <td>单元格11</td>
    <td>单元格12</td>
  </tr>
</table>

<summary> Dies fügt der Tabelle einen Titel hinzu, der den Verkauf nach Monat zeigt.

Tags können verwendet werden, um die Formulare für Bildschirmleser und andere assistive Technologien zusammenzufassen. Hier ist ein Beispiel dafür, wie Sie einer Tabelle eine Zusammenfassung hinzufügen:

table {
  border: 1px solid black;
  background-color: #f2f2f2;
}
td {
  padding: 8px;
}

Dies enthält eine Zusammenfassung der Tabelle für Bildschirmleser und andere assistive Technologien, was darauf hinweist, dass sie den Verkauf nach Monat aufweist.
Ist es nicht gut, das Formular zu verwenden?
Nein! Tabellen sind ein wichtiger Bestandteil von HTML. Sie sind wichtig, um tabellarische Daten semantisch und zugänglich anzuzeigen. In den frühen Tagen des World Wide Web, bevor CSS entstand, boten die Tabellen eine Möglichkeit, Webdesign zu layout, aber dies war nicht der beabsichtigte Zweck. Zum Glück sind diese Tage lang vergangen (meistens, aber für einige E -Mail -Clients!) Und können wir uns jetzt darauf konzentrieren, wie HTML -Tabellen wirklich - und äußerst wichtig für die Anzeige von Daten - die Funktion sind.
Schlussfolgerung
HTML -Tabellen sind leistungsstarke Tools zum Anzeigen von Tabellendaten auf Webseiten. Mit CSS können Sie die Tabelle so stylen, dass sie dem Aussehen und dem Stil einer Website entspricht und sie für Benutzer auf verschiedenen Geräten reaktionsschnell und mobilfreundlich machen. Das Hinzufügen von Titeln und Zusammenfassung zu einer Tabelle kann dazu beitragen, die Zugänglichkeit für Benutzer mit Behinderungen zu verbessern. Mit diesen Techniken können wir effektive Formen erstellen, die sowohl visuell attraktiv als auch leistungsstark sind.
HTML Form FAQ (FAQ)
Wie fusioniere ich Zellen in der HTML -Tabelle?

<td colspan="2">内容</td> Zellen in HTML -Tabellen können mit den Eigenschaften "Colspan" und "Rowspan" zusammengeführt werden. Die Eigenschaft "colspan" ermöglicht es Zellen, mehrere Säulen zu sparen, und die "Rowspan" -Mobilie können Zellen mehrere Zeilen überspannen. Wenn Sie beispielsweise eine Zelle zwei Spalten erstellen möchten, können Sie den folgenden Code verwenden: <td rowspan="2">内容</td>. In ähnlicher Weise können Sie den folgenden Code verwenden:

.

Wie füge ich HTML -Tabellen Grenzen hinzu?

Sie können die Eigenschaft "Grenze" im <table> -Tag verwenden, um HTML -Tabellen Grenzen hinzuzufügen. Zum Beispiel erstellt <code><table border="1"> eine umrandete Tabelle. Diese Eigenschaft wird jedoch in HTML5 nicht unterstützt. Stattdessen können Sie mit CSS Grenzen hinzufügen. Sie können beispielsweise Grenzen mit dem folgenden Code hinzufügen: <code>table, th, td {border: 1px solid black;}.

Wie stylen Sie HTML -Tabellen mit CSS?

cs Sie können beispielsweise die Hintergrundfarbe des Tabellentitels (TH) und der Tabellendaten (TD) mit dem folgenden Code ändern: th {background-color: #f2f2f2;} td {background-color: #ffffff;}. Sie können auch Füllungen hinzufügen, Textfarben ändern und vieles mehr.

Wie kann man HTML -Tabellen reagieren?

CSS kann verwendet werden, um HTML -Tabellen reagieren zu lassen. Sie können die Eigenschaft "Überlauf" verwenden, um der Tabelle Scrollstangen hinzuzufügen, wenn die Breite der Tabelle geringer ist als die Bildschirmgröße. Sie können beispielsweise den folgenden Code verwenden, um eine Tabelle zu reagieren: table {width: 100%; overflow: auto;}.

Wie füge ich einer HTML -Tabelle einen Titel hinzu?

Sie können das Tag "Caption" verwenden, um einer HTML -Tabelle einen Titel hinzuzufügen. Das "Caption" -Tag muss nach dem

-Tag eingefügt werden. Zum Beispiel <caption>表格标题.

Wie kann ich Text in der HTML -Tabelle ausrichten?

Sie können die Eigenschaft "Text-Align" in CSS verwenden, um Text in HTML-Tabellen auszurichten. Beispielsweise können Sie den folgenden Code verwenden, um den Text zu zentrieren: th, td {text-align: center;}.

Wie füge ich der HTML -Tabelle Hintergrundfarbe hinzu?

Sie können HTML-Tabellen mit der Eigenschaft "Hintergrundfarbe" in CSS Hintergrundfarbe hinzufügen. Beispielsweise können Sie einer Tabelle mit dem folgenden Code Hintergrundfarbe hinzufügen: table {background-color: #f2f2f2;}.

Wie kann ich der HTML -Tabelle einen Schwebeffekt hinzufügen?

Sie können die Pseudoklasse ": Hover" in CSS verwenden, um HTML-Tabellen einen Schwebeffekt hinzuzufügen. Sie können beispielsweise den folgenden Code verwenden, um die Hintergrundfarbe einer Tabellenzeile zu ändern, wenn der Mauszeiger über einer Tabellenzeile schwebt: tr:hover {background-color: #f5f5f5;}.

Wie füge ich HTML -Tabellen Scrollbars hinzu?

Sie können die Eigenschaft "Überlauf" in CSS verwenden, um HTML -Tabellen Scrollbars hinzuzufügen. Beispielsweise können Sie einer Tabelle mit dem folgenden Code eine Bildlaufleiste hinzufügen: table {overflow: auto;}.

Wie füge ich HTML -Tabellen alternierende Zeilenfarben hinzu?

Sie können HTML-Tabellen mit der Pseudo-Klasse ": n-Child" in CSS alternierende Zeilenfarben hinzufügen. Beispielsweise können Sie mit dem folgenden Code alternierende Zeilenfarben hinzufügen: tr:nth-child(even) {background-color: #f2f2f2;}.

Das obige ist der detaillierte Inhalt vonErste Schritte mit HTML -Tischen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!