Technologieaustausch

[Einführung in HTML] Lektion 10 – Tabelle, also Tabellen-Tag

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

In diesem Abschnitt sprechen wir über Tabellen in HTML. Beispielsweise sehen wir oft Zeugnisse von Schülern, z. B. Excel, Zelle für Zelle. Dies sind alles Tabellen.

Der Labelname der Tabelle lautet Tisch 。

Inhaltsverzeichnis

1 Einige Untertags in der Tabelle

1.1 Kopfbereich

1.2 Tabelleninhaltsbereich

1.3 Zeilen und Spalten

2 Ein wenig Übung

2.1 Erstellen Sie ein einfaches Transkript

2.2 Grenzlinien hinzufügen

2.3 Reihenübergreifend

2.4 Kreuzspalten

1 Einige Untertags in der Tabelle

1.1 Kopfbereich

Auf einem Transkript muss beispielsweise oben eine Überschrift stehenStudenten ID、Name des Studenten、Thema、Punktzahl、GesamtergebnisDiese Felder, richtig.

Diese Felder werden im Tabellenkopf platziert, wofür ein thead-Tag erforderlich ist.

1.2 Tabelleninhaltsbereich

Dann benötigt der Inhaltsbereich der Tabelle detailliertere Daten. Beispielsweise ist die Schülernummer 001, der Name ist Zhang San, das Fach ist Mathematik und die Punktzahl ist 80. Wenn keine anderen Fächer vorhanden sind, ist die Gesamtpunktzahl ist 80. Wenn es andere Fächer gibt, addieren Sie diese, oder?

Diese Inhalte werden im Tabelleninhaltsbereich platziert, wofür ein tbody-Tag erforderlich ist.

1.3 Zeilen und Spalten

Die Tabellen werden in Reihen und Reihen unterteilt und dann in Spalten und Spalten geschnitten. Nach Abschluss des Schnitts wird jedes Stück zu einer Zelle, einem kleinen Quadrat und einem kleinen Quadrat.

Beachten Sie außerdem:Zeilen enthalten Spalten, dies sollte beachtet werden。

Der Name der Zeilenbeschriftung lautet tr  。

Die Zellenbezeichnung in der Kopfzeile lautet th , die Zellenbezeichnung des Tabellenkörperbereichs lautettd 。

2 Ein wenig Übung

2.1 Erstellen Sie ein einfaches Transkript

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table>
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.2 Grenzlinien hinzufügen

Diese Anzeige ist etwas chaotisch, daher sieht die Tabelle durch das Hinzufügen von Randlinien besser aus.Sie können einen hinzufügenGrenze="1" Schauen Sie sich für Attributeinstellungen den Code unten an und aktualisieren Sie dann die Webseite, um zu sehen, ob sie viel besser aussieht.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>姓名</th>
  16.                     <th>语文成绩</th>
  17.                     <th>数学成绩</th>
  18.                     <th>HTML成绩</th>
  19.                     <th>总成绩</th>
  20.                 </tr>
  21.             </thead>
  22.             <tbody>
  23.                 <tr>
  24.                     <td>1</td>
  25.                     <td>张三</td>
  26.                     <td>80</td>
  27.                     <td>90</td>
  28.                     <td>96</td>
  29.                     <td>266</td>
  30.                 </tr>
  31.                 <tr>
  32.                     <td>2</td>
  33.                     <td>李四</td>
  34.                     <td>71</td>
  35.                     <td>80</td>
  36.                     <td>100</td>
  37.                     <td>251</td>
  38.                 </tr>
  39.             </tbody>
  40.         </table>
  41.     </body>
  42. </html>

2.3 Reihenübergreifend

Natürlich können wir auch eine zeilenübergreifende Darstellung erstellen. Zhang San und Li Si stammen beispielsweise aus der 1. Klasse. Platzieren Sie sie in derselben Reihe, und die Schüler aus der 1. Klasse belegen dann 2 Reihen.

Fügen Sie dann eine Klasse 2 hinzu, mit Wang Wu und Zhao Liu in der Klasse, und lassen Sie sie eine große Reihe belegen, sodass Klasse 2 zwei kleine Reihen hat.

Was muss hier eingestellt werden? Zeilenspanne Attribute.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                 </tr>
  18.             </thead>
  19.             <tbody>
  20.                 <tr>
  21.                     <td>1</td>
  22.                     <td rowspan="2">1班</td>
  23.                     <td>张三</td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td>2</td>
  27.                     <td>李四</td>
  28.                 </tr>
  29.                 <tr>
  30.                     <td>3</td>
  31.                     <td rowspan="2">2班</td>
  32.                     <td>王五</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>4</td>
  36.                     <td>赵六</td>
  37.                 </tr>
  38.             </tbody>
  39.         </table>
  40.     </body>
  41. </html>

Wenn wir uns den obigen Code ansehen, legen wir das Rowspan-Attribut für die td-Zelle fest, und dann ist es auch die zweite Zelle der Klasse 1, sodass nicht derselbe td-Code hinzugefügt werden muss.

2.4 Kreuzspalten

Spaltenübergreifend bezieht sich auf mehrere Spalten mit denselben Merkmalen. Daher reicht es aus, Informationen in einer Spalte anzuzeigen. Genau wie beim Kreuzen der Zeilen gerade jetzt besteht der Zweck nicht darin, dass sowohl Zhang San als auch Li Si in Klasse 1 sind. Um eine redundante Anzeige zu vermeiden, sind sie beide sozusagen Klasse 1, da sie alle die gleichen Informationsattribute haben Zeigen Sie Klasse 1 an, kreuzen Sie einfach die Reihe.

Beim Kreuzen von Spalten werden mehrere Spalten zusammengeführt. Nehmen wir ein Beispiel.

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>我的第一个网页</title>
  6.         <style type="text/css">
  7.             
  8.         </style>
  9.     </head>
  10.     <body>
  11.         <table border="1">
  12.             <thead>
  13.                 <tr>
  14.                     <th>学号</th>
  15.                     <th>班级</th>
  16.                     <th>姓名</th>
  17.                     <th>成绩</th>
  18.                 </tr>
  19.             </thead>
  20.             <tbody>
  21.                 <tr>
  22.                     <td>1</td>
  23.                     <td rowspan="2">1班</td>
  24.                     <td>张三</td>
  25.                     <td>90</td>
  26.                 </tr>
  27.                 <tr>
  28.                     <td>2</td>
  29.                     <td>李四</td>
  30.                     <td>80</td>
  31.                 </tr>
  32.                 <tr>
  33.                     <td colspan="4">1班总人数：2，总成绩：170</td>
  34.                 </tr>
  35.                 <tr>
  36.                     <td>3</td>
  37.                     <td rowspan="2">2班</td>
  38.                     <td>王五</td>
  39.                     <td>70</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>4</td>
  43.                     <td>赵六</td>
  44.                     <td>100</td>
  45.                 </tr>
  46.                 <tr>
  47.                     <td>4</td>
  48.                     <td>冯七</td>
  49.                     <td>75</td>
  50.                 </tr>
  51.                 <tr>
  52.                     <td colspan="4">2班总人数：3，总成绩：245</td>
  53.                 </tr>
  54.             </tbody>
  55.         </table>
  56.     </body>
  57. </html>

Haha, der obige Code,Eigentlich kann ich den Effekt dieses Screenshots nicht nachvollziehen.Wenn Sie den Code erhalten und feststellen, dass ein Problem vorliegt, denken Sie daranSag mirOh.

Persönliches Profil

Er widmet sich seit mehr als 30 Jahren der Technologieforschung und beherrscht verschiedene Sprachen wie Java, Linux, Javascript, PHP, CSS usw. Er hat viele Beiträge im Open-Source-Bereich geleistet Entwicklerdokumentationsstation, um einige Themen in der Technologieentwicklung als zukünftige Referenz zu teilen

meine Kontaktdaten

Post