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

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

HTMLのテーブル列をマージするには、タグのcolspan属性を使用します。これで、セルを互いにマージします。たとえば、テーブルに4行4列の場合、colspan属性を使用すると、2つまたは3つのテーブルセルを簡単にマージできます。

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

例

次のコードを実行して、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属性を使用して列をマージしましょう。最初の2列がマージされます

<!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 colspan="2"></td>
            <td></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

出力

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


  1. HTML<col>タグ

    HTMLのcolタグは、各列の列プロパティを設定するために使用されます。これらの列は、要素内にある必要があります。 以下は属性です- スパン ：要素がまたがる列の数 ここで、HTMLでcolタグを実装する例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> table, th, td {    border: 2px solid black; } </style> </head> <body&

  2. HTMLcolspan属性

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