Table

<Table className="border">
  <Thead>
    <Tr>
      <Th className="border p-2">Name</Th>
      <Th className="border p-2">Price</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$10</Td>
    </Tr>
  </Tbody>
</Table>

// Full width (default)
<Table width="full">

// Shrink to content
<Table width="auto">

// Fixed width
<Table width="4in">
<Table width="10cm">

<Table className="border">
  <Tbody>
    <Tr>
      <Td className="border">Cell</Td>
    </Tr>
  </Tbody>
</Table>

<Td className="border border-gray-300">Light border</Td>
<Td className="border border-blue-500">Blue border</Td>

<Td className="border">Normal</Td>
<Td className="border-2">Thicker</Td>
<Td className="border-4">Even thicker</Td>

<Td className="border-b">Bottom only</Td>
<Td className="border-t border-b">Top and bottom</Td>

<Td className="p-2">All sides</Td>
<Td className="px-4 py-2">Horizontal and vertical</Td>
<Td className="pt-2 pb-4 pl-2 pr-2">Individual sides</Td>

<Th className="bg-gray-100">Header</Th>
<Td className="bg-green-50">Highlighted cell</Td>
<Tr className="bg-yellow-50">
  <Td>Entire row highlighted</Td>
</Tr>

<Td className="text-left">Left</Td>
<Td className="text-center">Center</Td>
<Td className="text-right">Right</Td>

<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>

<Table className="border">
  <Thead>
    <Tr>
      <Th colSpan={2} className="border p-2 text-center">
        Sales Report
      </Th>
    </Tr>
    <Tr>
      <Th className="border p-2">Product</Th>
      <Th className="border p-2">Revenue</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2">Widget</Td>
      <Td className="border p-2">$1,000</Td>
    </Tr>
  </Tbody>
</Table>

<Table className="border">
  <Tbody>
    <Tr>
      <Td rowSpan={3} className="border p-2 align-middle">
        Electronics
      </Td>
      <Td className="border p-2">Laptop</Td>
      <Td className="border p-2">$999</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Tablet</Td>
      <Td className="border p-2">$499</Td>
    </Tr>
    <Tr>
      <Td className="border p-2">Phone</Td>
      <Td className="border p-2">$799</Td>
    </Tr>
  </Tbody>
</Table>

<Td className="border p-2">
  <Text className="font-bold">$1,234</Text>
  <Text className="text-green-600 text-sm"> (+12%)</Text>
</Td>

<Tr height="0.5in">
  <Td>Fixed height row</Td>
</Tr>

<Table className="border" width="full">
  <Thead>
    <Tr className="bg-gray-100">
      <Th className="border p-2">Product</Th>
      <Th className="border p-2 text-right">Q1</Th>
      <Th className="border p-2 text-right">Q2</Th>
      <Th className="border p-2 text-right">Total</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td className="border p-2 font-bold">Widget A</Td>
      <Td className="border p-2 text-right">$12,000</Td>
      <Td className="border p-2 text-right">$15,000</Td>
      <Td className="border p-2 text-right font-bold">$27,000</Td>
    </Tr>
    <Tr>
      <Td className="border p-2 font-bold">Widget B</Td>
      <Td className="border p-2 text-right">$8,500</Td>
      <Td className="border p-2 text-right">$9,200</Td>
      <Td className="border p-2 text-right font-bold">$17,700</Td>
    </Tr>
    <Tr className="bg-gray-50">
      <Td className="border p-2 font-bold">Total</Td>
      <Td className="border p-2 text-right font-bold">$20,500</Td>
      <Td className="border p-2 text-right font-bold">$24,200</Td>
      <Td className="border p-2 text-right font-bold text-green-600">$44,700</Td>
    </Tr>
  </Tbody>
</Table>