HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでテーブルセルをマージする方法は？

HTMLのセルを結合するには、colspanおよびrowspan属性を使用します。 rowspan属性は、セルがまたがる必要のある行数を表し、colspan属性は、セルがまたがる必要のある列の数を表します。

両方の属性はタグ内にあります。数値は数値になります。たとえば、行スパンの場合は2行の場合は2、列スパンの場合は2列の場合は2です。

HTMLでテーブルセルをマージする方法は？

例

最初に、3行3列のHTMLでテーブルを作成する方法を説明します

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th></th>
            <th></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           <td></td>
           <td></td>
           <td></td>
         </tr>
      </table>
   </body>
</html>

出力

HTMLでテーブルセルをマージする方法は？

例 colspan属性とrowspan属性を使用してセルを結合しましょう

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th colspan="2"></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

出力

HTMLでテーブルセルをマージする方法は？


  1. HTMLcolspan属性

    HTMLのcolspan属性は、セルがテーブル内でまたがる列の数を設定するために使用されます。 または要素でcolspan属性を使用します。 要素のcolspan属性 HTMLの要素のcolspan属性は、セルがまたがる列の数を定義します 以下は構文です- <td colspan="num"> 上記のnumは、セルがまたがる列の数です。 要素-のcolspan属性を実装する例を見てみましょう。 例 <!DOCTYPE html> <html> <head> <style> table, th, td { &n

  2. HTML<center>タグ

    HTMLのcenterタグは、テキストを中央揃えにするために使用されます。 注 ：タグはHTML5ではサポートされていません。 CSSの使用をお勧めします。 ここで、HTMLでcenterタグを実装する例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px solid blue; } </style> </head> <body> <table>   &nbs