Heim > Artikel > Web-Frontend > Detaillierte Erklärung der Tabellen-Tags in HTML
Detaillierte Erklärung der Tabellen-Tags in HTML
- 迷茫Original
- 2017-03-25 11:31:461783Durchsuche
Haftungsausschluss 1: Der Text hier wurde von meinem eigenen csdn-Konto kopiert und ist das Ergebnis meiner eigenen Erkenntnisse und Zusammenfassung, also respektieren Sie bitte diese Arbeit. 2: Wenn Sie diesen Artikel erneut drucken möchten, müssen Sie die Quelle des Textes angeben. 3: Wenn etwas nicht stimmt, weisen Sie es bitte darauf hin.
Im vorherigen Artikel haben wir hauptsächlich über einige grundlegende Tags von http gesprochen, wie Link-Tags, Bild-Tags, HTML-Framework usw. Im nächsten Schritt geht es dann hauptsächlich um Tabellen-Tags und Listen-Tags. , eine detaillierte Erklärung der Formular-Tags
1: Tabellen-Tags
f5d188ed2c074f8b944552db028f98a1f16b1740fad44fb09bfe928bcc527e08 🎜 >
<!DOCTYPE html>
<html>
<head>
<!-- 原创作者：蜗牛 -->
<title>table标签</title>
</head>
<body>
<table border="1" width="360" height="240"
cellspacing="1" cellpadding="1"
align="center" bgcolor="red"> <!--这里的center表示该表格在页面的中间位置-->
<!--这里的背景色标签是bgcolor-->
<caption><h2>我的好朋友</caption>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr align="center"> <!--这里的center表示的是表格里面的字体居中-->
<td>小红</td>
<td>女</td>
<td>20</td>
<td>跳舞</td>
</tr>
<tr align="center">
<td>小舵</td>
<td>女</td>
<td>24</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>Hinweis:
a34de1251f0d9fe1e645927f19a896e8 zur Darstellung der Zeile b6c5a531a458a2e790c1fd6421739d1c b6c5a531a458a2e790c1fd6421739d1c/td>Das Gleiche, aber der Inhalt darin wird automatisch vergrößert und fett dargestelltRand Legen Sie die Breite des Tabellenrandes fest in PixelBreite Legt die Breite der Tabelle in Pixel festHöhe Legt die Höhe der Tabelle fest, die Einheit ist PixelZellenabstand Legt den Abstand zwischen den Zellen fest, der sich darauf bezieht auf den Abstand des Tabellenrandescellpadding Legen Sie den Abstand zwischen dem Text und dem Zellrand festbgcolor kann verwendet werden, um die Hintergrundfarbe der Tabelle festzulegen 🎜 >(2) Informationen zum Zusammenführen von Zellen
Hinweis
<!DOCTYPE html>
<html>
<head>
<title>table中合并单元格</title>
</head>
<body>
<table border="1" width="300" height="200"
align="center" background="first.jpg" > <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->
<tr align="center" width="100" >
<td>1</td>
<td colspan="2">占两列</td> <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
<!-- 删除掉此<td></td> -->
<td>2</td>
</tr>
<tr align="center" width="100">
<td rowspan="2">占两行</td> <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr align="center" width="100" >
<!-- 删除掉此<td></td> -->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>: Wenn Sie in jede Zelle der Tabelle unterschiedliche Inhalte eingeben, ändert sich die Länge Ihres Inhalts. Es gibt zwei Möglichkeiten, die Zellen gleich groß zu halten: 1; Die Gesamthöhe Ihrer Tabelle beträgt 400 und Sie legen 4 Zeilen fest. Fügen Sie dann das Attribut „hight=100“ zu jedem a34de1251f0d9fe1e645927f19a896e8-Tag hinzu, was einer gleichmäßigen Verteilung entspricht. 2: Es wird einfacher sein als das erste, nämlich den CSS-Stil festzulegen und die Größe von tr und td festzulegen 
2: Listen-Tag
Die Laufergebnisse sind wie folgt:
3: Form
<!DOCTYPE html>
<html>
<head>
<title>列表标签</title>
</head>
<body bgcolor="#FFFF00">
<!-- 无序列表 -->
2017年心愿
<ul type="circle"> <!--无序序列<ul> ，无序有circle：圆点，square：小方块-->
<li>父母身体健康</li>
<li>宝宝健康成长</li>
<li>媳妇健健康康</li>
</ul>
<!-- 有序列表 -->
2017年大事件
<ol type="1" start="2"> <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始-->
<li>老婆要生小孩了</li>
<li>自己换工作了</li>
<li>要卖掉一套房</li>
</ol>
<!-- 自定义列表 -->
<dl> <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项-->
<dt>时刻告诉自己</dt>
<dd>不抱怨</dd>
<dd>零负能量</dd>
<dd>该与不该</dd>
</dl>
</body>
</html> ff9c23ada1bcecdd1a0fb5d5a0f18437f5a47148e367a6035fd7a2faa965022e Form-Tag 
Die Darstellung ist wie folgt:
Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung der Tabellen-Tags in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!