rowspan 属性の使用方法

不言
リリース: 2019-02-12 13:19:12
オリジナル
17606 人が閲覧しました

HTML の rowspan 属性は、セルがまたがる行数を指定します。つまり、1 つの行が 2 行にまたがる場合、テーブル内で 2 行分のスペースが占有されることを意味します。これにより、単一の表セルが複数のセルまたは行の高さにまたがることができます。 rowspan 属性には、Excel のスプレッドシートの「セルの結合」と同じ機能があります。

rowspan 属性の使用方法

rowspan 属性HTML テーブルの

要素および とともに使用できます。 rowspan 属性は、 タグとともに使用する場合にまたがる標準セルの数を決定します。

rowspan 属性が タグとともに使用される場合、rowspan 属性によって範囲が必要なヘッダー セルの数が決まります。

具体的な例を見てみましょう

タグとともに使用しますコードは次のとおりです

<!DOCTYPE rowspan 属性の使用方法>  
<rowspan 属性の使用方法>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
    <body style = "text-align:center">  
  
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <!-- This cell will take up space on  
                    two rows -->
                <td rowspan="2">24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
            </tr> 
        </table> 
    </body>  
</rowspan 属性の使用方法>
ログイン後にコピー

効果は次のとおりです

rowspan 属性の使用方法## タグと一緒に使用すると

##コードは次のとおりです

<!DOCTYPE rowspan 属性の使用方法>  
<rowspan 属性の使用方法>  
    <head>  
        <title>HTML rowspan</title>  
        <style> 
            table, th, td { 
                border: 1px solid black; 
                border-collapse: collapse; 
                padding: 6px; 
            } 
        </style> 
    </head>  
      
    <body style = "text-align:center"> 
          
        <table> 
            <tr> 
                <th>Name</th> 
                <th>Age</th> 
                <!-- This cell will take up space  
                    in 3 rows -->
                <th rowspan="3">php中文网</th> 
            </tr> 
            <tr> 
                <td>Tom</td> 
                <td>24</td> 
            </tr> 
            <tr> 
                <td>Marry</td> 
                <td>25</td> 
            </tr> 
        </table> 
    </body>  
</rowspan 属性の使用方法>
ログイン後にコピー
効果は次のとおりです


この記事はここで終了します。さらにフロントエンドのエキサイティングなコンテンツをご覧になるには、料金を支払うことができます。 PHP 中国語 Web サイトにある関連するコラムのチュートリアルに注目してください。 ! !

rowspan 属性の使用方法

以上がrowspan 属性の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート