tableタグを使わず簡単なテーブルを実装

Mayu

tableタグを使わず、テーブルっぽいものを実装する方法を学んだので、自分用メモとして書きます。

今取り組んでいる課題で、商品名が左端、値段が右端によっていて、点線の下線が付いた表を作りました。

<html>

<dl class="tabel-container">
<dt class="product">アイライナー</dt>
<dd class="price">300円</dd>
</dl>

<dl class="tabel-container">
<dt class="product">アイシャドウ</dt>
<dd class="price">300円</dd>
</dl>

<dl class="tabel-container">
<dt class="product">マスカラ</dt>
<dd class="price">300円</dd>
</dl>

<css>

.tabel-container {
width: 354px;
display: flex;
justify-content: space-between;
border: none;
border-bottom: 1px dotted black;
}

これでテーブルっぽいものが実装できました。こちらの良い点は、レスポンシブに対応させやすいところです！table-containerのwidthを変えれば良いだけ。

先日注文したJQueryの入門書が届いたので、今日から取り組みます。

この記事が気に入ったらサポートをしてみませんか？