# tables


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## Table Display Utilities

Display utilities for creating and styling table elements:

------------------------------------------------------------------------

### TableDisplayFactory

``` python

def TableDisplayFactory(
    
):

```

*Factory for table display utilities.*

------------------------------------------------------------------------

### test_tables_display_examples

``` python

def test_tables_display_examples(
    
):

```

*Test table display utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
# Create the table display factory
table_display = TableDisplayFactory() # The table display factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_display_examples():
    """Test table display utilities."""
    # Basic table display
    assert str(table_display) == "table"
    assert table_display.inline == "inline-table"
    
    # Table element display types
    assert table_display.caption == "table-caption"
    assert table_display.cell == "table-cell"
    assert table_display.column == "table-column"
    assert table_display.column_group == "table-column-group"
    assert table_display.footer_group == "table-footer-group"
    assert table_display.header_group == "table-header-group"
    assert table_display.row_group == "table-row-group"
    assert table_display.row == "table-row"
    
    # Test with modifiers
    assert str(table_display.hover) == "hover:table"
    assert str(table_display.md) == "md:table"

# Run the tests
test_tables_display_examples()
```

</details>

## Border Collapse

Control whether table borders should collapse or be separated:

------------------------------------------------------------------------

### test_tables_border_collapse_examples

``` python

def test_tables_border_collapse_examples(
    
):

```

*Test border collapse utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
border_collapse = SimpleFactory(
    {
        "collapse": "border-collapse",
        "separate": "border-separate"
    },
    "Border collapse utilities for controlling whether table borders should collapse or be separated"
) # Border collapse factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_border_collapse_examples():
    """Test border collapse utilities."""
    assert str(border_collapse.collapse) == "border-collapse"
    assert str(border_collapse.separate) == "border-separate"

# Run the tests
test_tables_border_collapse_examples()
```

</details>

## Border Spacing

Control the spacing between table borders when using `border-separate`:

------------------------------------------------------------------------

### BorderSpacingFactory

``` python

def BorderSpacingFactory(
    
):

```

*Factory for border-spacing utilities with directional support.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
border_spacing = BorderSpacingFactory() # The border spacing factory
```

</details>

### Basic Border Spacing

Apply equal spacing to all sides:

------------------------------------------------------------------------

### test_tables_border_spacing_basic_examples

``` python

def test_tables_border_spacing_basic_examples(
    
):

```

*Test basic border spacing utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_border_spacing_basic_examples():
    """Test basic border spacing utilities."""
    # Numeric scales
    assert str(border_spacing(0)) == "border-spacing-0"
    assert str(border_spacing(4)) == "border-spacing-4"
    assert str(border_spacing(8)) == "border-spacing-8"
    assert str(border_spacing(2.5)) == "border-spacing-2.5"
    
    # Special values
    assert str(border_spacing.px) == "border-spacing-px"

# Run the tests
test_tables_border_spacing_basic_examples()
```

</details>

### Directional Border Spacing

Apply different spacing to horizontal and vertical borders:

------------------------------------------------------------------------

### test_tables_border_spacing_directional_examples

``` python

def test_tables_border_spacing_directional_examples(
    
):

```

*Test directional border spacing utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_border_spacing_directional_examples():
    """Test directional border spacing utilities."""
    # Horizontal spacing
    assert str(border_spacing.x(4)) == "border-spacing-x-4"
    assert str(border_spacing.x(8)) == "border-spacing-x-8"
    assert str(border_spacing.x.px) == "border-spacing-x-px"
    
    # Vertical spacing
    assert str(border_spacing.y(2)) == "border-spacing-y-2"
    assert str(border_spacing.y(6)) == "border-spacing-y-6"
    assert str(border_spacing.y.px) == "border-spacing-y-px"

# Run the tests
test_tables_border_spacing_directional_examples()
```

</details>

### Arbitrary Border Spacing Values

Use custom values when needed:

------------------------------------------------------------------------

### test_tables_border_spacing_arbitrary_examples

``` python

def test_tables_border_spacing_arbitrary_examples(
    
):

```

*Test border spacing utilities with arbitrary values.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_border_spacing_arbitrary_examples():
    """Test border spacing utilities with arbitrary values."""
    # Arbitrary values
    assert str(border_spacing("5px")) == "border-spacing-[5px]"
    assert str(border_spacing("0.125rem")) == "border-spacing-[0.125rem]"
    assert str(border_spacing.x("10px")) == "border-spacing-x-[10px]"
    assert str(border_spacing.y("0.5em")) == "border-spacing-y-[0.5em]"
    
    # Custom properties
    assert str(border_spacing("--table-spacing")) == "border-spacing-(--table-spacing)"
    assert str(border_spacing.x("--horizontal-gap")) == "border-spacing-x-(--horizontal-gap)"

# Run the tests
test_tables_border_spacing_arbitrary_examples()
```

</details>

## Table Layout

Control the table layout algorithm:

------------------------------------------------------------------------

### test_tables_layout_examples

``` python

def test_tables_layout_examples(
    
):

```

*Test table layout utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
table_layout = SimpleFactory(
    {
        "auto": "table-auto",
        "fixed": "table-fixed"
    },
    "Table layout utilities for controlling the table layout algorithm"
) # Table layout factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_layout_examples():
    """Test table layout utilities."""
    assert str(table_layout.auto) == "table-auto"
    assert str(table_layout.fixed) == "table-fixed"

# Run the tests
test_tables_layout_examples()
```

</details>

## Caption Side

Control the alignment of a caption element inside of a table:

------------------------------------------------------------------------

### test_tables_caption_side_examples

``` python

def test_tables_caption_side_examples(
    
):

```

*Test caption side utilities.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
caption_side = SimpleFactory(
    {
        "top": "caption-top",
        "bottom": "caption-bottom"
    },
    "Caption side utilities for controlling the alignment of a caption element inside of a table"
) # Caption side factory
```

</details>

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_caption_side_examples():
    """Test caption side utilities."""
    assert str(caption_side.top) == "caption-top"
    assert str(caption_side.bottom) == "caption-bottom"

# Run the tests
test_tables_caption_side_examples()
```

</details>

## Comprehensive Test Functions

Test all table utilities to ensure they work correctly:

------------------------------------------------------------------------

### test_tables_all_utilities

``` python

def test_tables_all_utilities(
    
):

```

*Comprehensive test of all table utilities.*

## Practical Examples

Let’s see how to use these table utilities in real FastHTML components:

------------------------------------------------------------------------

### test_tables_fasthtml_examples

``` python

def test_tables_fasthtml_examples(
    
):

```

*Test table utilities in practical FastHTML component examples.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_fasthtml_examples():
    """Test table utilities in practical FastHTML component examples."""
    from fasthtml.common import Table, Thead, Tbody, Tr, Th, Td, Caption, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w, min_w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    
    # Basic table with collapsed borders
    basic_table = Table(
        Thead(
            Tr(
                Th("Name"),
                Th("Email"),
                Th("Role")
            )
        ),
        Tbody(
            Tr(
                Td("John Doe"),
                Td("john@example.com"),
                Td("Admin")
            ),
            Tr(
                Td("Jane Smith"),
                Td("jane@example.com"),
                Td("User")
            )
        ),
        cls=combine_classes(
            border_collapse.collapse,
            w.full
        )
    )
    assert "border-collapse" in basic_table.attrs['class']
    
    # Table with separated borders and spacing
    spaced_table = Table(
        Tbody(
            Tr(Td("Cell 1"), Td("Cell 2")),
            Tr(Td("Cell 3"), Td("Cell 4"))
        ),
        cls=combine_classes(
            border_collapse.separate,
            border_spacing(2),
            w.full
        )
    )
    assert "border-separate" in spaced_table.attrs['class']
    assert "border-spacing-2" in spaced_table.attrs['class']
    
    # Table with different horizontal and vertical spacing
    custom_spaced_table = Table(
        Tbody(
            Tr(Td("A"), Td("B"), Td("C")),
            Tr(Td("D"), Td("E"), Td("F"))
        ),
        cls=combine_classes(
            border_collapse.separate,
            border_spacing.x(4),
            border_spacing.y(2),
            w.full
        )
    )
    assert "border-spacing-x-4" in custom_spaced_table.attrs['class']
    assert "border-spacing-y-2" in custom_spaced_table.attrs['class']
    
    # Fixed layout table with caption
    fixed_table = Table(
        Caption("User Information", cls=str(caption_side.top)),
        Thead(
            Tr(
                Th("ID", cls=str(w(20))),
                Th("Name", cls=str(w(40))),
                Th("Description")
            )
        ),
        Tbody(
            Tr(
                Td("001"),
                Td("Product A"),
                Td("A detailed description of Product A that might be quite long")
            )
        ),
        cls=combine_classes(
            table_layout.fixed,
            border_collapse.collapse,
            w.full
        )
    )
    assert "table-fixed" in fixed_table.attrs['class']
    assert "caption-top" in fixed_table.children[0].attrs['class']
    
    # Auto layout table (default behavior)
    auto_table = Table(
        Caption("Sales Data", cls=str(caption_side.bottom)),
        Thead(
            Tr(Th("Month"), Th("Revenue"), Th("Growth"))
        ),
        Tbody(
            Tr(Td("January"), Td("$10,000"), Td("+5%")),
            Tr(Td("February"), Td("$12,000"), Td("+20%"))
        ),
        cls=combine_classes(
            table_layout.auto,
            border_collapse.separate,
            border_spacing.px,
            min_w.full
        )
    )
    assert "table-auto" in auto_table.attrs['class']
    assert "caption-bottom" in auto_table.children[0].attrs['class']
    assert "border-spacing-px" in auto_table.attrs['class']
    
    # Return all examples in a grid layout
    return Div(
        basic_table,
        spaced_table,
        custom_spaced_table,
        fixed_table,
        auto_table,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the tests
test_tables_fasthtml_examples()
```

</details>

``` html
<div class="grid gap-5">
  <table class="border-collapse w-full">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Doe</td>
        <td>john@example.com</td>
        <td>Admin</td>
      </tr>
      <tr>
        <td>Jane Smith</td>
        <td>jane@example.com</td>
        <td>User</td>
      </tr>
    </tbody>
  </table>
  <table class="border-separate border-spacing-2 w-full">
    <tbody>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
    </tbody>
  </table>
  <table class="border-separate border-spacing-x-4 border-spacing-y-2 w-full">
    <tbody>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
      </tr>
      <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
      </tr>
    </tbody>
  </table>
  <table class="table-fixed border-collapse w-full">
<caption class="caption-top">User Information</caption>    <thead>
      <tr>
        <th class="w-20">ID</th>
        <th class="w-40">Name</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>001</td>
        <td>Product A</td>
        <td>A detailed description of Product A that might be quite long</td>
      </tr>
    </tbody>
  </table>
  <table class="table-auto border-separate border-spacing-px min-w-full">
<caption class="caption-bottom">Sales Data</caption>    <thead>
      <tr>
        <th>Month</th>
        <th>Revenue</th>
        <th>Growth</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>January</td>
        <td>$10,000</td>
        <td>+5%</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$12,000</td>
        <td>+20%</td>
      </tr>
    </tbody>
  </table>
</div>
```

``` python
test_func = test_tables_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()
```

### Complex Table Example

A more complex example combining multiple table utilities:

------------------------------------------------------------------------

### test_tables_complex_fasthtml_examples

``` python

def test_tables_complex_fasthtml_examples(
    
):

```

*Test a complex table example with various styling.*

<details open class="code-fold">
<summary>Exported source</summary>

``` python
def test_tables_complex_fasthtml_examples():
    """Test a complex table example with various styling."""
    from fasthtml.common import Table, Thead, Tbody, Tr, Th, Td, Caption, Div
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.backgrounds import bg
    from cjm_fasthtml_tailwind.utilities.borders import border, border_color, rounded
    from cjm_fasthtml_tailwind.utilities.typography import font_size, font_family, font_weight, text_color, text_align
    from cjm_fasthtml_tailwind.utilities.spacing import p, m
    from cjm_fasthtml_tailwind.utilities.layout import overflow
    from cjm_fasthtml_tailwind.utilities.effects import shadow
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import gap, grid_display
    
    # Create a styled data table
    data_table = Div(
        Table(
            Caption(
                "Quarterly Sales Report",
                cls=combine_classes(
                    caption_side.top,
                    font_size.lg,
                    font_weight.semibold,
                    text_color.gray._700,
                    m.b(2)
                )
            ),
            Thead(
                Tr(
                    Th("Quarter", cls=combine_classes(text_align.left, p(4), bg.gray._100)),
                    Th("Product", cls=combine_classes(text_align.left, p(4), bg.gray._100)),
                    Th("Units Sold", cls=combine_classes(text_align.right, p(4), bg.gray._100)),
                    Th("Revenue", cls=combine_classes(text_align.right, p(4), bg.gray._100)),
                    cls=combine_classes(border.b._2, border_color.gray._300)
                )
            ),
            Tbody(
                Tr(
                    Td("Q1 2024", cls=str(p(4))),
                    Td("Widget A", cls=str(p(4))),
                    Td("1,234", cls=combine_classes(text_align.right, p(4))),
                    Td("$12,340", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                ),
                Tr(
                    Td("Q1 2024", cls=str(p(4))),
                    Td("Widget B", cls=str(p(4))),
                    Td("567", cls=combine_classes(text_align.right, p(4))),
                    Td("$8,505", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                ),
                Tr(
                    Td("Q2 2024", cls=str(p(4))),
                    Td("Widget A", cls=str(p(4))),
                    Td("1,567", cls=combine_classes(text_align.right, p(4))),
                    Td("$15,670", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                ),
                Tr(
                    Td("Q2 2024", cls=str(p(4))),
                    Td("Widget B", cls=str(p(4))),
                    Td("890", cls=combine_classes(text_align.right, p(4))),
                    Td("$13,350", cls=combine_classes(text_align.right, p(4))),
                    cls=combine_classes(border.b(), border_color.gray._200)
                )
            ),
            cls=combine_classes(
                table_layout.fixed,
                border_collapse.separate,
                border_spacing(0),
                w.full,
                bg.white,
                shadow.sm,
                rounded.lg,
                overflow.hidden
            )
        ),
        cls=str(p(6))
    )
    
    # Verify table utilities are applied
    table_elem = data_table.children[0]
    assert "table-fixed" in table_elem.attrs['class']
    assert "border-separate" in table_elem.attrs['class']
    assert "border-spacing-0" in table_elem.attrs['class']
    assert "caption-top" in table_elem.children[0].attrs['class']
    
    # Create a compact table with custom spacing
    compact_table = Table(
        Tbody(
            Tr(Td("Item 1"), Td("$10"), Td("✓")),
            Tr(Td("Item 2"), Td("$20"), Td("✓")),
            Tr(Td("Item 3"), Td("$15"), Td("✗"))
        ),
        cls=combine_classes(
            border_collapse.separate,
            border_spacing.x(1),
            border_spacing.y(0.5),
            table_layout.auto,
            font_size.sm
        )
    )
    
    assert "border-separate" in compact_table.attrs['class']
    assert "border-spacing-x-1" in compact_table.attrs['class']
    assert "border-spacing-y-0.5" in compact_table.attrs['class']
    assert "table-auto" in compact_table.attrs['class']
    
    # Return all examples in a grid layout
    return Div(
        data_table,
        compact_table,
        cls=combine_classes(grid_display, gap(5))
    )

# Run the test
test_tables_complex_fasthtml_examples()
```

</details>

``` html
<div class="grid gap-5">
  <div class="p-6">
    <table class="table-fixed border-separate border-spacing-0 w-full bg-white shadow-sm rounded-lg overflow-hidden">
<caption class="caption-top text-lg font-semibold text-gray-700 mb-2">Quarterly Sales Report</caption>      <thead>
        <tr class="border-b-2 border-gray-300">
          <th class="text-left p-4 bg-gray-100">Quarter</th>
          <th class="text-left p-4 bg-gray-100">Product</th>
          <th class="text-right p-4 bg-gray-100">Units Sold</th>
          <th class="text-right p-4 bg-gray-100">Revenue</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-gray-200">
          <td class="p-4">Q1 2024</td>
          <td class="p-4">Widget A</td>
          <td class="text-right p-4">1,234</td>
          <td class="text-right p-4">$12,340</td>
        </tr>
        <tr class="border-b border-gray-200">
          <td class="p-4">Q1 2024</td>
          <td class="p-4">Widget B</td>
          <td class="text-right p-4">567</td>
          <td class="text-right p-4">$8,505</td>
        </tr>
        <tr class="border-b border-gray-200">
          <td class="p-4">Q2 2024</td>
          <td class="p-4">Widget A</td>
          <td class="text-right p-4">1,567</td>
          <td class="text-right p-4">$15,670</td>
        </tr>
        <tr class="border-b border-gray-200">
          <td class="p-4">Q2 2024</td>
          <td class="p-4">Widget B</td>
          <td class="text-right p-4">890</td>
          <td class="text-right p-4">$13,350</td>
        </tr>
      </tbody>
    </table>
  </div>
  <table class="border-separate border-spacing-x-1 border-spacing-y-0.5 table-auto text-sm">
    <tbody>
      <tr>
        <td>Item 1</td>
        <td>$10</td>
        <td>✓</td>
      </tr>
      <tr>
        <td>Item 2</td>
        <td>$20</td>
        <td>✓</td>
      </tr>
      <tr>
        <td>Item 3</td>
        <td>$15</td>
        <td>✗</td>
      </tr>
    </tbody>
  </table>
</div>
```

``` python
test_func = test_tables_complex_fasthtml_examples
app, rt = create_test_app()

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()
```

## Export