✨
tebleタグについて
チーム開発フェーズに入り、なんだかんだで作成中に一番時間がかかっているのがレイアウトだと気づいてしまったので、tebleタグの使い方について復習しようと思います。
tebleタグとは
HTMLで表形式のデータを表現するために使用されるマークアップ要素です。票の開始と終了を示すタグで、<table>と</table>に挟まれた文字列を表として認識する。
表は以下のようなイメージとなります。
上記のブロック要素の内容は下記の通りになります。
| ブロック要素 | 説明 |
|---|---|
| tr | 「table row」の略で、横の行を指す |
| th | 「table header」の略で、表の中の見出し部分を指す |
| td | 「table data」の略で、表の中の内容を指す |
ブロック要素を囲む子要素は下記の通りになります。
| tableの子要素 | 説明 |
|---|---|
| thead | テーブルの行（水平方向）をグループ化するタグ。このタグに囲まれた内容は表のヘッダ部分としてグループ化される。 |
| tbody | テーブルの行（水平方向）をグループ化するタグ。このタグに囲まれた内容は表のヘッダ部分としてグループ化される。 |
| tfoot | テーブルの行（水平方向）をグループ化するタグ。このタグに囲まれた内容は表のフッタ部分としてグループ化される。 |
記述例
横並び
<table class="table col-9 border border-2 mt-2">
<thead>
<tr bgcolor="#ffefd5" border="1" style="border-collapse: collapse">
<th>商品名</th>
<th>単価（税込）</th>
<th>数量</th>
<th>小計</th>
</tr>
</thead>
<tbody>
<% @cart_items.each do |cart| %>
<tr>
<td>
<%= image_tag cart.item.image, size: "100x80" %>
<%= cart.item.name %>
</td>
<td><%= cart.item.item_price.to_s(:delimited) %></td>
<td><%= cart.amount %></td>
<td><%= cart.subtotal.to_s(:delimited) %></td>
</tr>
<% @total += cart.subtotal %>
<% end %>
</tbody>
</table>
完成図
縦並び
<table class="table col-2 border border-2 mt-2">
<tr><th bgcolor="#ffefd5">送料</th><td><%= @order.shipping_cost %></td></tr>
<tr><th bgcolor="#ffefd5">商品合計</th><td><%= @total.to_s(:delimited) %></td></tr>
<tr><th bgcolor="#ffefd5">請求金額</th><td><%= (@order.shipping_cost + @total).to_s(:delimited) %></td></tr>
</table>
完成図
最後に
記述例のようにtableタグのなかに文字の太さやセルの背景色、表のデザインなどを指定することやclass属性をつけてBootstrapと組み合わせることも可能です。自分の作りたいようにいろいろな記事を参考に作成してみるのもおすすめです。
参考
Discussion