Content
Table
Table
A semantic way of displaying tabular datasets.
Border
| First | Last | Handle |
|---|---|---|
| Andy | L. | @railsui_ |
| Web | Crunch | @webcrunchblog |
| justalever | @justalever | |
<table class="table-auto w-full border border-slate-300 dark:border-slate-700/80">
<thead>
<tr>
<th scope="col" class="text-left p-3 border border-slate-200 dark:border-slate-700/80">First</th>
<th scope="col" class="text-left p-3 border border-slate-200 dark:border-slate-700/80">Last</th>
<th scope="col" class="text-left p-3 border border-slate-200 dark:border-slate-700/80">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-3 border border-slate-200 dark:border-slate-700/80">Andy</td>
<td class="p-3 border border-slate-200 dark:border-slate-700/80">L.</td>
<td class="p-3 border border-slate-200 dark:border-slate-700/80">@railsui_</td>
</tr>
<tr>
<td class="p-3 border border-slate-200 dark:border-slate-700/80">Web</td>
<td class="p-3 border border-slate-200 dark:border-slate-700/80">Crunch</td>
<td class="p-3 border border-slate-200 dark:border-slate-700/80">@webcrunchblog</td>
</tr>
<tr>
<td colspan="2" class="p-3 border border-slate-200 dark:border-slate-700/80">justalever</td>
<td class="p-3 border border-slate-200 dark:border-slate-700/80">@justalever</td>
</tr>
</tbody>
</table><%= tag.table class: "table-auto w-full border border-slate-300 dark:border-slate-700/80" do %>
<%= tag.thead do %>
<%= tag.tr do %>
<%= tag.th "First", scope: "col", class: "text-left p-3 border border-slate-200 dark:border-slate-700/80" %>
<%= tag.th "Last", scope: "col", class: "text-left p-3 border border-slate-200 dark:border-slate-700/80" %>
<%= tag.th "Handle", scope: "col", class: "text-left p-3 border border-slate-200 dark:border-slate-700/80" %>
<% end %>
<% end %>
<%= tag.tbody do %>
<%= tag.tr do %>
<%= tag.td "Andy", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<%= tag.td "L.", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<%= tag.td "@railsui_", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<% end %>
<%= tag.tr do %>
<%= tag.td "Web", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<%= tag.td "Crunch", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<%= tag.td "@webcrunchblog", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<% end %>
<%= tag.tr do %>
<%= tag.td "justalever", colspan: "2", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<%= tag.td "@justalever", class: "p-3 border border-slate-200 dark:border-slate-700/80" %>
<% end %>
<% end %>
<% end %>%table.table-auto.w-full.border.border-slate-300(class="dark:border-slate-700/80")
%thead
%tr
%th.text-left.p-3.border.border-slate-200(class="dark:border-slate-700/80" scope="col") First
%th.text-left.p-3.border.border-slate-200(class="dark:border-slate-700/80" scope="col") Last
%th.text-left.p-3.border.border-slate-200(class="dark:border-slate-700/80" scope="col") Handle
%tbody
%tr
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80") Andy
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80") L.
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80") @railsui_
%tr
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80") Web
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80") Crunch
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80") @webcrunchblog
%tr
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80" colspan="2") justalever
%td.p-3.border.border-slate-200(class="dark:border-slate-700/80") @justaleverBorderless
| First | Last | Handle |
|---|---|---|
| Andy | L. | @railsui_ |
| Web | Crunch | @webcrunchblog |
| justalever | @justalever | |
<table class="table-auto w-full">
<thead>
<tr>
<th class="text-left p-3 border-b-2 border-slate-200 dark:border-slate-700/80" scope="col">First</th>
<th class="text-left p-3 border-b-2 border-slate-200 dark:border-slate-700/80" scope="col">Last</th>
<th class="text-left p-3 border-b-2 border-slate-200 dark:border-slate-700/80" scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td class="p-3 text-left">Andy</td>
<td class="p-3 text-left">L.</td>
<td class="p-3 text-left">@railsui_</td>
</tr>
<tr>
<td class="p-3 text-left">Web</td>
<td class="p-3 text-left">Crunch</td>
<td class="p-3 text-left">@webcrunchblog</td>
</tr>
<tr>
<td class="p-3 text-left" colspan="2">justalever</td>
<td class="p-3 text-left">@justalever</td>
</tr>
</tbody>
</table><%= tag.table class: "table-auto w-full" do %>
<%= tag.thead do %>
<%= tag.tr do %>
<%= tag.th "First", scope: "col", class: "text-left p-3 border-b-2 border-slate-200 dark:border-slate-700/80" %>
<%= tag.th "Last", scope: "col", class: "text-left p-3 border-b-2 border-slate-200 dark:border-slate-700/80" %>
<%= tag.th "Handle", scope: "col", class: "text-left p-3 border-b-2 border-slate-200 dark:border-slate-700/80" %>
<% end %>
<% end %>
<%= tag.tbody do %>
<%= tag.tr do %>
<%= tag.td "Andy", class: "p-3 text-left" %>
<%= tag.td "L.", class: "p-3 text-left" %>
<%= tag.td "@railsui_", class: "p-3 text-left" %>
<% end %>
<%= tag.tr do %>
<%= tag.td "Web", class: "p-3 text-left" %>
<%= tag.td "Crunch", class: "p-3 text-left" %>
<%= tag.td "@webcrunchblog", class: "p-3 text-left" %>
<% end %>
<%= tag.tr do %>
<%= tag.td "justalever", colspan: "2", class: "p-3 text-left" %>
<%= tag.td "@justalever", class: "p-3 text-left" %>
<% end %>
<% end %>
<% end %>%table.table-auto.w-full
%thead
%tr
%th.text-left.p-3.border-b-2.border-slate-200(class="dark:border-slate-700/80" scope="col") First
%th.text-left.p-3.border-b-2.border-slate-200(class="dark:border-slate-700/80" scope="col") Last
%th.text-left.p-3.border-b-2.border-slate-200(class="dark:border-slate-700/80" scope="col") Handle
%tbody
%tr
%td.p-3.text-left Andy
%td.p-3.text-left L.
%td.p-3.text-left @railsui_
%tr
%td.p-3.text-left Web
%td.p-3.text-left Crunch
%td.p-3.text-left @webcrunchblog
%tr
%td.p-3.text-left(colspan="2") justalever
%td.p-3.text-left @justalever