Chevron left
RailsUI

Content

Tables

Theme

Themes/hound/logo.svg

Hound

Framework

Tailwind CSS logo

Tailwind CSS

Tables

Bordered

First Last Handle
Andy L. @railsui_
Web Crunch @webcrunchblog
justalever @justalever 
<table class="table-auto w-full border border-slate-300">
  <thead>
	  <tr>
		  <th scope="col" class="text-left p-3 border border-slate-200">First</th>
		  <th scope="col" class="text-left p-3 border border-slate-200">Last</th>
		  <th scope="col" class="text-left p-3 border border-slate-200">Handle</th>
	  </tr>
  </thead>
  <tbody>
	  <tr>
		  <td class="p-3 border border-slate-200">Andy</td>
		  <td class="p-3 border border-slate-200">L.</td>
		  <td class="p-3 border border-slate-200">@railsui_</td>
	  </tr>
	  <tr>
		  <td class="p-3 border border-slate-200">Web</td>
		  <td class="p-3 border border-slate-200">Crunch</td>
		  <td class="p-3 border border-slate-200">@webcrunchblog</td>
	  </tr>
	  <tr>
		  <td colspan="2" class="p-3 border border-slate-200">justalever</td>
		  <td class="p-3 border border-slate-200">@justalever</td>
	  </tr>
  </tbody>
</table>
<%= tag.table class: "table-auto w-full border border-slate-300" do %>
	<%= tag.thead do %>
		<%= tag.tr do %>
			<%= tag.th "First", scope: "col", class: "text-left p-3 border border-slate-200" %>
			<%= tag.th "Last", scope: "col", class: "text-left p-3 border border-slate-200" %>
			<%= tag.th "Handle", scope: "col", class: "text-left p-3 border border-slate-200" %>
		<% end %>
	<% end %>
	<%= tag.tbody do %>
		<%= tag.tr do %>
			<%= tag.td "Andy", class: "p-3 border border-slate-200" %>
			<%= tag.td "L.", class: "p-3 border border-slate-200" %>
			<%= tag.td "@railsui_", class: "p-3 border border-slate-200" %>
		<% end %>
		<%= tag.tr do %>
			<%= tag.td "Web", class: "p-3 border border-slate-200" %>
			<%= tag.td "Crunch", class: "p-3 border border-slate-200" %>
			<%= tag.td "@webcrunchblog", class: "p-3 border border-slate-200" %>
		<% end %>
		<%= tag.tr do %>
			<%= tag.td "justalever", colspan: "2", class: "p-3 border border-slate-200"" %>
			<%= tag.td "@justalever", class: "p-3 border border-slate-200"" %>
		<% end %>
	<% end %>
<% end %>
%table.table-auto.w-full.border.border-slate-300
	%thead
		%tr
			%th.text-left.p-3.border.border-slate-200{:scope => "col"} First
			%th.text-left.p-3.border.border-slate-200{:scope => "col"} Last
			%th.text-left.p-3.border.border-slate-200{:scope => "col"} Handle
	%tbody
		%tr
			%td.p-3.border.border-slate-200 Andy
			%td.p-3.border.border-slate-200 L.
			%td.p-3.border.border-slate-200 @railsui_
		%tr
			%td.p-3.border.border-slate-200 Web
			%td.p-3.border.border-slate-200 Crunch
			%td.p-3.border.border-slate-200 @webcrunchblog
		%tr
			%td.p-3.border.border-slate-200{:colspan => "2"} justalever
			%td.p-3.border.border-slate-200 @justalever

Tables

Borderless

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" scope="col">First</th>
			<th class="text-left p-3 border-b-2 border-slate-200" scope="col">Last</th>
			<th class="text-left p-3 border-b-2 border-slate-200" 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" %>
			<%= tag.th "Last", scope: "col", class: "text-left p-3 border-b-2 border-slate-200" %>
			<%= tag.th "Handle", scope: "col", class: "text-left p-3 border-b-2 border-slate-200" %>
		<% 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{:scope => "col"} First
			%th.text-left.p-3.border-b-2.border-slate-200{:scope => "col"} Last
			%th.text-left.p-3.border-b-2.border-slate-200{: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

Tables

Dark

First Last Handle
Andy L. @railsui_
Web Crunch @webcrunchblog
justalever @justalever 
<table class="table-auto w-full bg-slate-900 text-slate-100">
	<thead>
		<tr>
			<th scope="col" class="p-3 text-left border-b-2 border-slate-700">First</th>
			<th scope="col" class="p-3 text-left border-b-2 border-slate-700">Last</th>
			<th scope="col" class="p-3 text-left border-b-2 border-slate-700">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 bg-slate-900 text-slate-100" do %>
  <%= tag.thead do %>
		<%= tag.tr do %>
			<%= tag.th "First", scope: "col", class: "p-3 text-left border-b-2 border-slate-700" %>
			<%= tag.th "Last", scope: "col", class: "p-3 text-left border-b-2 border-slate-700" %>
			<%= tag.th "Handle", scope: "col", class: "p-3 text-left border-b-2 border-slate-700" %>
		<% 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.bg-slate-900.text-slate-100
	%thead
		%tr
			%th.p-3.border-b-2.text-left.border-slate-700{:scope => "col"} First
			%th.p-3.border-b-2.text-left.border-slate-700{:scope => "col"} Last
			%th.p-3.border-b-2.text-left.border-slate-700{: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

Typography

Icons