Phoenix + DaisyUI

Table

Table Open in playground
Id Name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<.table id="table-single-table">
  <.thead>
    <.tr>
      <.th>Id</.th>
      <.th>Name</.th>
      <.th>Job</.th>
      <.th>Favourite Color</.th>
    </.tr>
  </.thead>
  <.tbody>
    <!-- row 1 -->
    <.tr>
      <.th>1</.th>
      <.td>Cy Ganderton</.td>
      <.td>Quality Control Specialist</.td>
      <.td>Blue</.td>
    </.tr>
    <!-- row 2 -->
    <.tr>
      <.th>2</.th>
      <.td>Hart Hagerty</.td>
      <.td>Desktop Support Technician</.td>
      <.td>Purple</.td>
    </.tr>
    <!-- row 3 -->
    <.tr>
      <.th>3</.th>
      <.td>Brice Swyre</.td>
      <.td>Tax Accountant</.td>
      <.td>Red</.td>
    </.tr>
  </.tbody>
</.table>
Table with column slots Open in playground
Id name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<.table
  id="table-single-table-with-column-slots"
  rows={[%{favourite_color: "Blue", id: 1, job: "Quality Control Specialist", name: "Cy Ganderton"}, %{favourite_color: "Purple", id: 2, job: "Desktop Support Technician", name: "Hart Hagerty"}, %{favourite_color: "Red", id: 3, job: "Tax Accountant", name: "Brice Swyre"}]}
>
  <:col :let={user} label="Id">
    <%= user.id %>
  </:col>
  <:col :let={user} label="name">
    <%= user.name %>
  </:col>
  <:col :let={user} label="Job">
    <%= user.job %>
  </:col>
  <:col :let={user} label="Favourite Color">
    <%= user.favourite_color %>
  </:col>
</.table>
Zebra Open in playground
Id name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<.table
  id="table-single-zebra"
  rows={[%{favourite_color: "Blue", id: 1, job: "Quality Control Specialist", name: "Cy Ganderton"}, %{favourite_color: "Purple", id: 2, job: "Desktop Support Technician", name: "Hart Hagerty"}, %{favourite_color: "Red", id: 3, job: "Tax Accountant", name: "Brice Swyre"}]}
  zebra
>
  <:col :let={user} label="Id">
    <%= user.id %>
  </:col>
  <:col :let={user} label="name">
    <%= user.name %>
  </:col>
  <:col :let={user} label="Job">
    <%= user.job %>
  </:col>
  <:col :let={user} label="Favourite Color">
    <%= user.favourite_color %>
  </:col>
</.table>
Table xs Open in playground
Id name Job Favourite Color
1 Cy Ganderton Quality Control Specialist Blue
2 Hart Hagerty Desktop Support Technician Purple
3 Brice Swyre Tax Accountant Red 
<.table
  id="table-single-table-xs"
  rows={[%{favourite_color: "Blue", id: 1, job: "Quality Control Specialist", name: "Cy Ganderton"}, %{favourite_color: "Purple", id: 2, job: "Desktop Support Technician", name: "Hart Hagerty"}, %{favourite_color: "Red", id: 3, job: "Tax Accountant", name: "Brice Swyre"}]}
  size="xs"
>
  <:col :let={user} label="Id">
    <%= user.id %>
  </:col>
  <:col :let={user} label="name">
    <%= user.name %>
  </:col>
  <:col :let={user} label="Job">
    <%= user.job %>
  </:col>
  <:col :let={user} label="Favourite Color">
    <%= user.favourite_color %>
  </:col>
</.table>
Table collapse Open in playground
Id Favourite Color
1 Blue
2 Purple
3 Red 
<.table
  id="table-single-table-collapse"
  rows={[%{favourite_color: "Blue", id: 1, job: "Quality Control Specialist", name: "Cy Ganderton"}, %{favourite_color: "Purple", id: 2, job: "Desktop Support Technician", name: "Hart Hagerty"}, %{favourite_color: "Red", id: 3, job: "Tax Accountant", name: "Brice Swyre"}]}
>
  <:col :let={user} label="Id">
    <%= user.id %>
  </:col>
  <:col :let={user} label="name" collapse_breakpoint="md">
    <%= user.name %>
  </:col>
  <:col :let={user} label="Job" collapse_breakpoint="sm">
    <%= user.job %>
  </:col>
  <:col :let={user} label="Favourite Color">
    <%= user.favourite_color %>
  </:col>
</.table>