Heim > Artikel > Web-Frontend > Eine umfassende Einführung in HTML-Tabellenattribute

Eine umfassende Einführung in HTML-Tabellenattribute

巴扎黑Original: 2017-08-10 10:50:482482Durchsuche

[Einführung] HTML-Tabellen werden durch f5d188ed2c074f8b944552db028f98a1 dargestellt. Eine Tabelle kann in viele Zeilen (Zeilen) unterteilt werden, dargestellt durch a34de1251f0d9fe1e645927f19a896e8; jede Zeile kann in viele Zellen (Zellen) unterteilt werden, dargestellt durch b6c5a531a458a2e790c1fd6421739d1c. Diese drei Tags sind die am häufigsten verwendeten Tags zum Erstellen von Tabellen. 100db36a723c770d327fc0aef2ce13b16c04bd5ca3fcae76e30b72ad730ca86de388a4556c0f65e1904146cc1a846beeIn der Tabelle verwendetes Tag: Die gesamte Tabelle muss mit Tabelle begonnen werden. Jede

HTML-Tabelle wird durch f5d188ed2c074f8b944552db028f98a1 dargestellt. Eine Tabelle kann in viele Zeilen (Zeilen) unterteilt werden, dargestellt durch a34de1251f0d9fe1e645927f19a896e8; jede Zeile kann in viele Zellen (Zellen) unterteilt werden, dargestellt durch b6c5a531a458a2e790c1fd6421739d1c.

Diese drei Tags sind die am häufigsten verwendeten Tags zum Erstellen von Tabellen.

<html>
<body>

<p>
表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。
</p>

<h4>只有一行(Row)一列(Column)的表格</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>一行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>两行三列的表格</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

Rahmenattribut

Standardmäßig wird der Rand der Tabelle nicht angezeigt, wenn der Rand der Tabelle nicht festgelegt ist.

<html>
<body>

<h4>缺省情况下，表格没有边界。</h4>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

<h4>表格Border设为0，也不显示边界：</h4>
<table border="0">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

Um den Rand der Tabelle anzuzeigen, können Sie das Attribut border verwenden.

<html>
<body>

<h4>表格的边界值设为1：</h4>
<table border="1">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>

<h4>表格的边界值设为8，边界更粗：</h4>
<table border="8">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td>
</tr>
</table>

<h4>表格的边界值设为15，边界更粗：</h4>
<table border="15">
<tr>
<td>第一</td>
<td>行</td>
</tr>
<tr>
<td>第二</td>
<td>行</td></tr>
</table>

</body>
</html>

Kopfzeile der Tabelle

Verwenden Sie b4d429308760b6c2d20d6300079ed38e, um die Kopfzeile der Tabelle und die Wörter in der Kopfzeile anzugeben werden fett dargestellt.

<html>
<body>

<h4>有表头的表格：</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>电话</th>
<th>传真</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h4>竖直方向的表头：</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>电话</th>
<td>555 77 854</td>
</tr>
<tr>
<th>传真</th>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

Leere Zellen

Wenn sich kein Inhalt zwischen den Tabellenzellen befindet b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf, dann wird die Der Rand dieser Zelle wird nicht angezeigt, obwohl der Randwert für die gesamte Tabelle festgelegt wurde. Um die Grenzen dieser Zelle anzuzeigen, fügen Sie ein Leerzeichen ein.

<html>
<body>

<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td></td>
<td>Some text</td>
</tr>
</table>

<p>上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。</p>

<table border="1">
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td> </td>
<td>Some text</td>
</tr>
</table>

<p>
上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。</p>
<p>注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。
</p>

</body>
</html>

Weitere Beispiele

<html>
<body>

<h4>
这个表格有标题：
</h4>

<table border="6">
<caption>表格标题</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

</body>
</html>

Dieses Beispiel zeigt, wie Sie mit 63bd76834ec05ac1f4c0ebbeaafb0994 einen Titel hinzufügen.

<html>
<body>

<table border="1">
<tr>
<td>
<p>这是一段</p>
<p>这是另外一段。</p>
</td>
<td>这个单元格里包含了一个表格：
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>这个单元格里包含了一个图片：
<img src = "../images/html_tutorials/mail.gif">
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

Das obige ist der detaillierte Inhalt vonEine umfassende Einführung in HTML-Tabellenattribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5-Erklärung der Drag-Ereignisse Dragstart, Drag und DragendNächster Artikel：HTML5-Erklärung der Drag-Ereignisse Dragstart, Drag und Dragend

In Verbindung stehende Artikel

Mehr sehen