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

HTMLでテーブルの境界線の周りにスペースを追加する方法｜border-spacingプロパティの使い方

HTMLテーブルの境界線のまわりにスペース（セル間の間隔）を設定したい場合は、CSSのborder-spacingプロパティを使用します。このプロパティを指定することで、テーブル内の隣接するセル同士の距離を自由にコントロールできます。

HTMLでテーブルの境界線の周りにスペースを追加する方法｜border-spacingプロパティの使い方

押さえておきたいポイントとして、border-spacingはborder-collapseプロパティが「separate」（初期値）の場合にのみ有効です。「collapse」を指定して境界線を結合している場合、セル間隔は反映されないので注意しましょう。

サンプルコード

以下のコードを実行して、HTMLテーブルの境界線の周りにスペースを追加する方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, td, th {
            border: 1px solid black;
            border-spacing: 20px;
            width: 300px;
         }
      </style>
   </head>
   <body>
      <h1>Our Technologies</h1>
      <table>
         <tr>
            <th>IDE</th>
            <th>Database</th>
         </tr>
         <tr>
            <td style="text-align:center">NetBeans</td>
            <td style="text-align:center">MySQL</td>
         </tr>
     </table>
  </body>
</html>

この例では、border-spacing: 20px; を指定することで、すべてのセルの境界線から20pxの間隔が確保されます。また、「border-spacing: 10px 20px;」のように値を2つ指定すれば、水平方向と垂直方向の間隔を個別に設定することも可能です。

実行結果

HTMLでテーブルの境界線の周りにスペースを追加する方法｜border-spacingプロパティの使い方

ブラウザで表示すると、テーブルの各セルの間に20pxの余白ができ、境界線の周りに適切なスペースが追加されていることが確認できます。表を見やすくレイアウトしたいときに、ぜひ活用してみてください。

  1. HTMLでテーブルの境界線を作成するにはどうすればよいですか？

    HTMLで表（テーブル）の境界線を作成するには、かつては border 属性が使用されていました。しかし、HTML5 の登場によりこの属性は非推奨となりました。現在では、CSS の border プロパティを使って境界線を設定するのが標準的な方法です。table 要素だけでなく、<th> や <td> にも個別に境界線を指定しましょう。 サンプルコード 以下のコードを実行すると、HTML の表に境界線を表示できます。ここでは <style> タグ内で CSS を定義しています。 <!DOCTYPE html> <html> &nbs

  2. HTML Webページにオーディオプレーヤーを追加する方法

    HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg（audio/ogg）― オープンソースの