tableタグを使わずにulやdlを使って表組みをする

基本的に表やテーブルをコーディングするときはtableタグを使用することが多いと思います。

ところが昨今では、表やテーブルをコーディングするときにtableタグ以外のタグを使うことが多くなってきています。

tableタグ以外でコーディングするメリットとサンプルを交えて紹介していきたいと思います。

tableタグ以外を使うメリット

tableタグを使うとcssを使わなくても簡単に表組みを作ることができます。

ひと昔前のサイトだとtableタグをガチガチに使ってレイアウトをコーディングするケースも多かったです。

ところがtableタグだと実際にソースも長くなってしまい他の人が見たときに修正しづらいという点が挙げられます。

table以外（ulやdl）を使うことで構造もシンプルになりソースも見やすくなるのでコーディングを担当する人が修正しやすく見やすいソースになるのでメリットは大きいと思います。

table以外で表組みを作る方法

ulタグを使った4列の縦表組み

ulタグを使った表組のコーディング例を紹介します。

html

<ul class="ul_tbl">
        <li>
                <div class="row tbl_head">
                        <div class="col">項目1</div>
                        <div class="col">項目2</div>
                        <div class="col">項目3</div>
                        <div class="col">項目4</div>
                </div>
        </li>
        <li>
                <div class="row">
                        <div class="col">項目詳細a</div>
                        <div class="col">項目詳細の長いテキストの場合です。項目詳細の長いテキストの場合です。項目詳細の長いテキストの場合です。項目詳細の長いテキストの場合です。</div>
                        <div class="col">項目詳細c</div>
                        <div class="col">項目詳細d</div>
                </div>                                          
        </li>   
        <li>
                <div class="row">
                        <div class="col">項目詳細a</div>
                        <div class="col">項目詳細の長いテキストの場合です。項目詳細の長いテキストの場合です。項目詳細の長いテキストの場合です。項目詳細の長いテキストの場合です。</div>
                        <div class="col">項目詳細c</div>
                        <div class="col">項目詳細d</div>
                </div>                                          
        </li>   
</ul>

css

ul,
li{
        list-style: none;
        margin: 0;
        padding: 0;
}

ul.ul_tbl{border: 1px solid #ccc;}
ul.ul_tbl li{border-bottom: solid 1px #ccc;}
ul.ul_tbl li:last-child {border-bottom: none;}
ul.ul_tbl .row.tbl_head .col {
    background-color: #eee;
    border-right: solid 1px #ccc;
        font-size: 13px;
    line-height: 100%;
    text-align: left;
    padding: 12px 10px;
    border-right: solid 1px #ccc;       
}
        
ul.ul_tbl .row.tbl_head .col:last-child{border-right: none;}    
ul.ul_tbl .row {
    display: table;
    table-layout: auto;
    width: 100%;
}
        
ul.ul_tbl .col{
        display: table-cell;
        vertical-align: middle;
        font-size: 13px;
        padding: 12px 10px;     
}
        
ul.ul_tbl li .row > div:nth-child(1){width: 100px;}
ul.ul_tbl li .row > div:nth-child(2){width: 400px;}
ul.ul_tbl li .row > div:nth-child(3){width: 40px;}      
ul.ul_tbl li .row > div:nth-child(4){width: 60px;} 

dlタグを使った横2列の表組み

dlタグを使った表組のコーディング例を紹介します。

html

<dl class="dl_tbl">
        <dt>
                <p>項目1</p>
        </dt>
        <dd>
                <p>項目1のテキストです。</p>
        </dd>
        <dt>
                <p>項目2</p>
        </dt>
        <dd>
                <p>項目2のテキストです。</p>
        </dd>
</dl>

css

dl,
dt,
dd,
p{
        margin: 0;
        padding: 0;
}
        
dl.dl_tbl {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ccc;
    background-color: #eee;
}

dl.dl_tbl dt,
dl.dl_tbl dd{
    padding: 10px;
    box-sizing: border-box;
    font-size: 13px;
}       
        
dl.dl_tbl dt {
        width: 40%;
        border-right: solid 1px #ccc;
}

dl.dl_tbl dd {
    width: 60%;
    background-color: #fff;
}
        
dl.dl_tbl dd ~ dt,
dl.dl_tbl dd ~ dd {border-top: 1px solid #ccc;}