Detaillierte Erklärung der Tabellen-Tags in HTML-HTML-Tutorial-php.cn

Detaillierte Erklärung der Tabellen-Tags in HTML

迷茫

Freigeben： 2017-03-25 11:31:46

Original

1823 Leute haben es durchsucht

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

🎜 >

 <!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>

Nach dem Login kopieren

Hinweis:

zur Darstellung der Zeile

/td>Das Gleiche, aber der Inhalt darin wird automatisch vergrößert und fett dargestellt

Rand Legen Sie die Breite des Tabellenrandes fest in Pixel

Breite Legt die Breite der Tabelle in Pixel fest

Höhe Legt die Höhe der Tabelle fest, die Einheit ist Pixel

Zellenabstand Legt den Abstand zwischen den Zellen fest, der sich darauf bezieht auf den Abstand des Tabellenrandes

cellpadding Legen Sie den Abstand zwischen dem Text und dem Zellrand fest

bgcolor 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>

Nach dem Login kopieren

: 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 -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>

Nach dem Login kopieren

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!