HTMLのtableタグについて詳しく解説-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLのtableタグについて詳しく解説

迷茫

Mar 25, 2017 am 11:31 AM

免責事項 1: ここにあるテキストは私自身の csdn アカウントからコピーされたものであり、私自身の学習と要約の結果であるため、この作品を尊重してください。 2: この記事を転載する場合は、出典を明記してください。３：何か間違っている点がありましたら、ご指摘ください。

前回の記事では、リンクタグ、イメージタグ、HTMLフレームワークなど、httpの基本的なタグを中心に説明しました。次回は、テーブルタグ、リストタグ、フォームタグを中心に詳しく説明していきますタグ。

テーブルラベル

注:

gt; タグは次の目的で使用されます。行を表します

ラベルは列を表すために使用されますラベルはテーブルのタイトルを表すために使用されます。 ; 内部のコンテンツは自動的に拡大され、太字になります

border 表の境界線の幅をピクセル単位で設定します

width 表の幅をピクセル単位で設定します

height 表の高さをピクセル単位で設定します

cellspacing Distance のセル間の間隔は、表の境界線間の間隔を指します

cellpadding テキストとセルの境界線の間の距離を設定します

bgcolor 表の背景色を設定します

align 中央、左などの配置を設定するために使用されます、右

テーブルヘッダー名はテーブルのヘッダーを表すために使用されます

(2) セルの結合について

注意

: テーブルの各セルにいるときセルに異なるコンテンツを入力すると、コンテンツは異なる長さで変化します。各セルのサイズを同じにするには、次の 2 つの方法があります。テーブルの合計の高さは 400 で、4 行を設定し、各セルに属性 hight=100 を各タグに追加することは均等分布と同等であり、同じ幅に対して同じ方法が使用されます。 2: CSS スタイルの設定と tr と td のサイズを固定する最初の方法よりも簡単になります

2: リストラベル

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

ログイン後にコピー

実行結果は以下の通りです:

3: フォーム

フォームタグ

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

ログイン後にコピー