tableタグの使い方　表を作りたい

前提・実現したいこと

勉強２ヶ月の初学者です。Ruby on rails 5 の勉強しております。
表を作成したいと思い、tableタグを使用することにしました。

<% @books.each do |book| %>
データベースからデータを取得し、表にしたいです。

発生している問題・エラーメッセージ

表の形になりません。
データが横並びに羅列されてしまう。

該当のソースコード

<h1>Books</h1> <table border="1"> <thead> <tr> <th>Title</th> <th>Body</th> <th colspan="3"></th> </tr> </thead> <tbody> <tr> <td>トップ</td> <td>三角筋テクニック</td> <td><a class="show_164267" href="/books/164267">Show</a></td> <td><a class="edit_164267" href="/books/164267/edit">Edit</a></td> <td><a data-confirm="Are you sure?" class="destroy_164267" rel="nofollow" data-method="delete" href="/books/164267">Destroy</a></td> </tr> <tr> <td>細かすぎて</td> <td>100円玉</td> <td><a class="show_164268" href="/books/164268">Show</a></td> <td><a class="edit_164268" href="/books/164268/edit">Edit</a></td> <td><a data-confirm="Are you sure?" class="destroy_164268" rel="nofollow" data-method="delete" href="/books/164268">Destroy</a></td> </tr> <tr> <td>ナノマシン</td> <td>スーパーマーケット</td> <td><a class="show_164269" href="/books/164269">Show</a></td> <td><a class="edit_164269" href="/books/164269/edit">Edit</a></td> <td><a data-confirm="Are you sure?" class="destroy_164269" rel="nofollow" data-method="delete" href="/books/164269">Destroy</a></td> </tr> <tr> <td>円運動</td> <td>白菜</td> <td><a class="show_164270" href="/books/164270">Show</a></td> <td><a class="edit_164270" href="/books/164270/edit">Edit</a></td> <td><a data-confirm="Are you sure?" class="destroy_164270" rel="nofollow" data-method="delete" href="/books/164270">Destroy</a></td> </tr> <tr> <td>共働き</td> <td>カクテル</td> <td><a class="show_164271" href="/books/164271">Show</a></td> <td><a class="edit_164271" href="/books/164271/edit">Edit</a></td> <td><a data-confirm="Are you sure?" class="destroy_164271" rel="nofollow" data-method="delete" href="/books/164271">Destroy</a></td> </tr> </tbody> </table>

  <table　border ="1">
    <thead>
  　<tr>
  　　<th>Title</th>
  　　<th>Body</th>
     <th colspan="3"></th>
  　</tr>
    </thead>

    <tbody>
  <% @books.each do |book| %>
  　<tr>
  　　<td><%= book.title %></td>
  　　<td><%= book.body %></td>
      <td><a class="show_164271" href="/books/164271">Show</a></td>
      <td><a class="edit_164271" href="/books/164271/edit">Edit</a></td>
      <td><a data-confirm="Are you sure?" class="destroy_164271" rel="nofollow" data-method="delete" href="/books/164271">Destroy</a></td>
    </tr>
    </tbody>
  </table>

  <% end %>

試したこと

HTMLで<td>を記述すると想定した表になる。
罫線上の記述が、実現したい表。
罫線下の記述が、実現するために、自分が想定した書き方。
(なぜ実現できないのかわからない)

補足情報（FW/ツールのバージョンなど）

macOS catalina 10.15
rails 5.2.3
Chrome
ruby 2.5.0

初めての質問なので不足情報、注意点があればご指摘いただけると幸いです。
文章の単語に意味はないです。

行動規範の内容に同意します

回答1件

ベストアンサー

_pathの部分は推測ですが、こんな感じで行けるかと思います。

<table border="1">
	<thead>
		<tr>
			<th>Title</th>
			<th>Body</th>
			<th colspan="3"></th>
		</tr>
	</thead>
	<tbody>
		<% @books.each do |book| %>
			<tr>
				<td><%= book.title %></td>
				<td><%= book.body %></td>
				<td><%= link_to 'Show', book_path(book.id), class:"show_#{book.id}" %></td>
				<td><%= link_to "Edit", edit_book_path(book.id), class:"edit_#{book.id}" %></td>
				<td><%= link_to 'Destroy', book_path(book.id), method: :delete, data: { confirm: "Are you sure?" }, class:"destroy_#{book.id}" %></td>
			</tr>
		<% end %>
	</tbody>
</table>

投稿2019/11/09 02:56

編集2019/11/09 02:57