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

HTML DOMのemptyCellsプロパティとは？使い方とサンプルコードを解説

HTML DOMのemptyCellsプロパティは、テーブル内の空セル（中身が入っていないセル）をどのように表示するかを指定するために使用されます。デフォルトでは、このプロパティは「show」に設定されており、空セルにも枠線が表示されるようになっています。

emptyCellsプロパティの構文

emptyCellsプロパティを設定する際の基本的な構文は以下の通りです。

empty-cells: show|hide|initial|inherit;

各値の意味は次のようになります。

  • show：空セルにも境界線（枠線）を表示します。
  • hide：空セルの境界線を非表示にします。
  • initial：このプロパティをデフォルト値に戻します。
  • inherit：親要素からプロパティの値を継承します。

それでは、emptyCellsプロパティの具体的な使用例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    #TABLE1 {
        font-style: italic;
        empty-cells: hide;
    }
    table,td {
        margin: 5px;
        padding: 3px;
        border: 1px solid black;
    }
</style>
<script>
    function showEmptyCells() {
        document.getElementById("TABLE1").style.emptyCells="show"
        document.getElementById("Sample").innerHTML="テーブルの空セルが表示されるようになりました";
    }
</script>
</head>
<body>
    <table id="TABLE1">
        <tr>
            <td>demo</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>demo</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>demo</td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <p>下のボタンをクリックすると、上のテーブルで非表示になっていたセルが表示されます</p>
    <button onclick="showEmptyCells()">Show cells</button>
    <p id="Sample"></p>
</body>
</html>

実行結果

このサンプルでは、初期状態としてCSSでempty-cells: hide;が指定されているため、テーブルの空セルには枠線が表示されません。

HTML DOMのemptyCellsプロパティとは？使い方とサンプルコードを解説

そして、「Show cells」ボタンをクリックすると、JavaScriptによってemptyCellsプロパティが「show」に変更され、空セルにも枠線が表示されるようになります。

HTML DOMのemptyCellsプロパティとは？使い方とサンプルコードを解説

このように、emptyCellsプロパティを使えば、JavaScriptから動的にテーブルの空セルの表示・非表示を切り替えることができます。表組みのデザインを柔軟にコントロールしたい場合にぜひ活用してみてください。

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOMのemptyCellsプロパティとは？使い方とサンプルコードを解説

    HTML DOMのemptyCellsプロパティは、テーブル内の空セル（中身が入っていないセル）をどのように表示するかを指定するために使用されます。デフォルトでは、このプロパティは「show」に設定されており、空セルにも枠線が表示されるようになっています。 emptyCellsプロパティの構文 emptyCellsプロパティを設定する際の基本的な構文は以下の通りです。 empty-cells: show|hide|initial|inherit; 各値の意味は次のようになります。 show：空セルにも境界線（枠線）を表示します。 hide：空セルの境界線を非表示にします。 initial：こ