<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>
Components
| Component | Description |
|---|---|
Table | Table container |
Thead | Header section |
Tbody | Body section |
Tr | Table row |
Th | Header cell (bold by default) |
Td | Data cell |
Props
Table
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Thead, Tbody, Tr elements |
className | string | Tailwind classes |
width | "full" | "auto" | MeasurementValue | Table width |
Tr
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Th or Td elements |
className | string | Tailwind classes |
height | MeasurementValue | Row height |
Th / Td
| Prop | Type | Description |
|---|---|---|
children | ReactNode | Cell content |
className | string | Tailwind classes |
colSpan | number | Horizontal span |
rowSpan | number | Vertical span |
Width
// Full width (default)
<Table width="full">
// Shrink to content
<Table width="auto">
// Fixed width
<Table width="4in">
<Table width="10cm">
Borders
All borders
<Table className="border">
<Tbody>
<Tr>
<Td className="border">Cell</Td>
</Tr>
</Tbody>
</Table>
Border colors
<Td className="border border-gray-300">Light border</Td>
<Td className="border border-blue-500">Blue border</Td>
Border thickness
<Td className="border">Normal</Td>
<Td className="border-2">Thicker</Td>
<Td className="border-4">Even thicker</Td>
Individual sides
<Td className="border-b">Bottom only</Td>
<Td className="border-t border-b">Top and bottom</Td>
Padding
<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>
Background colors
<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>
Alignment
Horizontal
<Td className="text-left">Left</Td>
<Td className="text-center">Center</Td>
<Td className="text-right">Right</Td>
Vertical
<Td className="align-top">Top</Td>
<Td className="align-middle">Middle</Td>
<Td className="align-bottom">Bottom</Td>
Column span
<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>
Row span
<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>
Rich content
Cells can contain formatted text:<Td className="border p-2">
<Text className="font-bold">$1,234</Text>
<Text className="text-green-600 text-sm"> (+12%)</Text>
</Td>
Row height
<Tr height="0.5in">
<Td>Fixed height row</Td>
</Tr>
Full example
<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>
Limitations
- No individual column width control
- No floating/positioned tables
- No table rotation
- No named table styles