So verwenden Sie strukturiertes HTML-Webtabellen-Markup-HTML-Tutorial-php.cn

So verwenden Sie strukturiertes HTML-Webtabellen-Markup

php中世界最好的语言

Freigeben： 2018-01-20 09:43:40

Original

2183 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie das strukturierte Markup einer HTML-Webseitentabelle verwenden. Was sind die Vorsichtsmaßnahmen, wenn Sie das strukturierte Markup einer HTML-Webseitentabelle verwenden? sehen.

Struktur der HTML-Tabelle

Die sogenannte Strukturierung besteht darin, unsere Tabelle in drei Typen zu unterteilen: Kopfzeile, Hauptteil und Fußzeile. Wenn wir daher den Hauptteil der Tabelle in ändern, hat dies keine Auswirkungen auf die anderen beiden Teile von , wodurch unsere Anwendung entkoppelt und erleichtert wird.

Strukturiertes Format

<table>     
<thead>…</thead> --------表头区     
<tbody>…</tbody>---------表体区     
<tfoot>…</tfoot>------------表尾区     
</table>

Nach dem Login kopieren

Zusammenfassung: Durch die Aufteilung der Tabelle in drei Teile ist es für uns bequem, die Tabelle zu bearbeiten.

Titel der HTML-Tabelle

Jede Tabelle hat ihren eigenen Titel, wie im zweiten Bild oben gezeigt. Wie kann man also dafür sorgen, dass der Titel dem Inhalt folgt? Kommen Sie in Bewegung?

Der Tabellentitel

<table>     
<caption>…</caption>     
</table>

Nach dem Login kopieren

hat die folgenden Attribut--Werte:

Attributname

Attributwert

Beschreibung

ausrichten

Oben

Der Titel befindet sich über der Tabelle

Unten

Der Titel befindet sich unten die Tabelle

Zusammenfassung: Durch Festlegen des Titels der Tabelle können Sie den Titel jederzeit mit der Tabelle verschieben.
Html-Inline-Format

Was ist das Inline-Format einer Tabelle? Was wir in Excel normalerweise sehen, ist das Hinzufügen einer Hintergrundfarbe zu einer ganzen Spalte.

<html>     
<head>     
     
<li>表格嵌套的使用一</li>     
     
<table  width="500" >     
<tr>     
<td align="center">学生成绩表</td>     
</tr>     
<td>     
<table border="1" width="100%">     
<thead>           
<tr>     
<th>姓名</th>     
<th>语文</th>     
<th>数学</th>     
<th>外语</th>     
</tr>     
</thead>     
<tbody>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
</tbody>     
<tfoot>     
<tr>     
<td colspan="4">成绩汇总</td>     
</tr>     
</tfoot>     
</table>     
</td>     
</tr>     
</table>     
     
<br/>     
     
<li>表格嵌套的使用二</li>     
     
<table border="1" width="500" >     
<caption align="bottom">学生成绩</caption>     
<thead>     
<tr>     
<th>姓名</th>     
<th>语文</th>     
<th>数学</th>     
<th>外语</th>     
</tr>     
</thead>     
<tbody>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
</tbody>     
<tfoot>     
<tr>     
<td colspan="4">成绩汇总</td>     
</tr>     
</tfoot>     
</table>     
        
<br/>     
     
<li>表格嵌套的使用三</li>     
<table border="1" width="500" >     
<caption align="bottom">学生成绩</caption>     
<col ></col>     
<col bgcolor=blue></col>     
<thead>     
<tr>     
<th>姓名</th>     
<th>语文</th>     
<th>数学</th>     
<th>外语</th>     
</tr>     
</thead>     
<tbody>     
<tr >     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
<tr>     
<td>张三</td>     
<td>95</td>     
<td>95</td>     
<td>95</td>     
</tr>     
</tbody>     
<tfoot>     
</tfoot>     
</table>     
     
</body>     
</head>     
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie den SSE-Server von h5 zum Senden von EventSource-Ereignissen

Details zum lokalen Speicher und zur lokalen Datenbank von H5 Einführung

Verwendung von H5 und C3 zur Implementierung eines einfachen Takteffekts

Das obige ist der detaillierte Inhalt vonSo verwenden Sie strukturiertes HTML-Webtabellen-Markup. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!