Welche Funktion hat die HTML-Tabelle?

Die Rolle von HTML-Tabellen besteht darin, Daten anzuzeigen. Tabellen werden hauptsächlich zum Anzeigen und Anzeigen von Daten verwendet, da sie die Datenanzeige sehr regelmäßig und sehr gut lesbar machen können. Es ist sehr wichtig, Tabellen geschickt verwenden zu können Die Daten erscheinen organisiert.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Tabelle ist eine in der tatsächlichen Entwicklung sehr häufig verwendete Bezeichnung.

1. Die Hauptfunktion von Tabellen

Tabellen werden hauptsächlich zum Anzeigen und Anzeigen von Daten verwendet, da dadurch die Daten sehr übersichtlich angezeigt werden können und die Lesbarkeit sehr gut ist. Gerade bei der Darstellung von Daten im Hintergrund ist der geschickte Umgang mit Tabellen sehr wichtig. Eine klare und einfache Tabelle kann komplexe Daten auf organisierte Weise darstellen.

Zusammenfassung: Tabellen werden nicht zum Layouten von Seiten, sondern zum Anzeigen von Daten verwendet.

Zum Beispiel:

Melonen	Stückpreis	Menge	Menge
Wassermelone	12	10	120
Kantaloupe	14	5	70
Cantaloupe	8	15	120

2. Grundlegende Syntax von Tabellen

...

单元内得文字

• &lt ;table>& lt;/table> code> Ist die Bezeichnung, die zum Definieren der Tabelle verwendet wird. <code><table></table>是用于定义表格的标签。

• <tr></tr>标签用于定义表格中的行，必须嵌套在<table></table>标签中。

• <td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

• 字母 td 指表格数据(table data),即单元格的内容。

表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗剧中显示。

<th>标签表示HTML表格的表头部分(table head的缩写)。<p><span style="color:red">总结</span>：表头单元格也是单元格，常用于表格的第一行，突出重要性，表头单元格里面的文字会加粗居中显示。</p> <h3><strong>表格的结构标签</strong></h3> <p><span style="color:red">使用场景</span>：因为表格可能很长，为了更好的表示表格的予以语义，可以将表格分成表格头部和表格的主体两大部分。</p> <p>在表格标签中，分别使用：<code><thead>标签 表格的头部区域、<code><tbody>标签的主体区域。这样可以更好的分清表格结构。<ul style="list-style-type: disc;"> <li><p><code><thead></thead>：用于定义表格的头部。内部必须拥有标签。一般是位于第一行。

：用于定义表格的主体，主要用于放数据本体。

以上标签都是放在<table></table>

<tr></tr>-Tag wird zum Definieren von Zeilen in der Tabelle verwendet und muss im <table></table>verschachtelt werden > Mitte markieren.

<td></td> wird zum Definieren von Zellen in der Tabelle verwendet und muss im <tr></tr> verschachtelt werden Tag Mitte.

Der Buchstabe td bezieht sich auf Tabellendaten, also auf den Inhalt der Zelle.

• Beschriftung der Kopfzelle

• Im Allgemeinen befindet sich die Kopfzelle in der ersten Zeile oder Spalte der Tabelle und der Textinhalt in der Kopfzelle wird fett angezeigt.

<th>-Tag stellt den Kopfteil der HTML-Tabelle dar (Abkürzung für Tabellenkopf). <table> <thead>Zusammenfassung<tr class="firstRow">: Die Kopfzelle ist auch eine Zelle, die oft in der ersten Zeile der Tabelle verwendet wird, um die Wichtigkeit hervorzuheben. Der Text in der Kopfzelle wird fett und zentriert angezeigt. <th></th> <th>Strukturelle Tags von Tabellen</th> <th></th> </tr>Verwendungsszenarien</thead>: Da die Tabelle sehr lang sein kann, kann die Tabelle in zwei Teile unterteilt werden, um die Semantik der Tabelle besser auszudrücken: den Tabellenkopf und den Tabellenkörper . <tbody><tr>Verwenden Sie in den Tabellen-Tags das Tag <code><thead> für den Kopfbereich der Tabelle und das Tag <code><tbody> für den Textbereich. Dadurch kann die Tabellenstruktur besser unterschieden werden. <td><span style="color:red"></span></td> <code><thead></thead>: wird zum Definieren der Kopfzeile der Tabelle verwendet. Muss Tags enthalten. Befindet sich normalerweise in der ersten Zeile. : Wird zum Definieren des Tabellenkörpers verwendet und wird hauptsächlich zum Einfügen der Datenontologie verwendet. <td></td> Die oben genannten Tags werden im Tag <table></table> platziert. Beispiel:
                                                                                              

姓名	性别	年龄
刘德华	男	56
张学友	男	58
郭富城	男	51
黎明	男	57

<td></td> Tabellenattribute. Diese Attribute werden in unserer tatsächlichen Entwicklung nicht häufig verwendet und werden später über CSS festgelegt. Es gibt zwei Zwecke: Denken Sie an diese Worte CSS, CSS wird später verwendet. <td></td> Spüren Sie intuitiv das Aussehen des Tisches. Attributnamen und Attributwert Ausrichten Links, ZENTRUM, RECHTS <td></td> gibt die Ausrichtungsmethode im Vergleich zu den umgebenden Elementen an. Rand <td></td>1 oder „“<td></td> gibt an, ob die Tabellenzelle einen Rand hat. Der Standardwert ist „“, was bedeutet, dass kein Rand vorhanden ist der Rand der Zelle und ihr Inhalt Das Leerzeichen, der Standardwert ist 1 Pixel 🎜🎜Zellenabstand🎜🎜🎜Der Pixelwert🎜🎜 gibt den Leerraum zwischen Zelltabellen an, der Standardwert ist 2 Pixel. 🎜🎜🎜🎜🎜Breite🎜🎜🎜Pixelwert oder Prozentsatz🎜🎜gibt die Breite der Tabelle an🎜🎜🎜🎜

案例：小说排行榜

排名	关键词	封面
1	靠近你会掉刺
2	魔尊要抱抱
3	触碰的旋律
4	穿越成反派要如何活命

案例分析：

• 第一行里面是 th 表头单元格

• 第二行开始里面是 td 普通单元格

• 单元格里面可以放任何元素，文字链接图片等后可以

后书写表格属性属性

• 用到宽度高度边框 cellpadding 和 cellspacing

• 浏览器中对齐 align

具体代码如下：

                                                                                                                                                                                                                                                                                                                                                                                                                                         

排名	关键词	封面
1	靠近你会掉刺
2	魔尊要抱抱
3	触碰的旋律
4	穿越成反派要如何活命

合并单元格

特殊情况下，可以把多格单元格合并为一个单元格。

合并单元格方式

跨行合并： rowspan=“合并单元格的个数”。
跨列合并： colspan=“合并单元格的个数”。

目标单元格：（写合并代码）

跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码

合并单元格三部曲：

• 1.先确定是跨行还是跨列合并。

• 2.找到目标单元格，写合并方式 = 合并的单元格数量 。
  比如：<td colspan="2"></td>。

• 3.删除多余的单元格。

例子：

                     <td></td>             <td></td>                                           <td></td>             <td></td>             <td></td>                                           <td></td>             <td></td>                   



（学习视频分享：web前端）

Das obige ist der detaillierte Inhalt vonWelche Funktion hat die HTML-Tabelle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!