Table

Displays a table

<table>
  <thead>
      <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Country</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>John</td>
          <td>25</td>
          <td>USA</td>
      </tr>
      <tr>
          <td>Jane</td>
          <td>30</td>
          <td>Canada</td>
      </tr>
  </tbody>
</table>

Import

@import "@webtui/css/components/table.css";

Usage

<table>
    <thead>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>...</td>
            <td>...</td>
            <td>...</td>
        </tr>
        ...
    </tbody>
</table>

Caveats

The <caption> element absolutely obliterates the ascii box-like styling

Reference

Properties

• --table-border-width: The width of the table borders
• --table-border-color: The color of the table borders

table {
    --table-border-width: 1px;
    --table-border-color: var(--foreground2);
}

Extending

To extend the Table stylesheet, define a CSS rule on the components layer

@layer components {
    table {
        /* ... */
    }
}

Scope

• All <table> elements
• All <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> elements that are children of a <table>

table {
    thead, tbody, tfoot {
        /* ... */
    }

    tr {
        th { /* ... */ }
        td { /* ... */ }
    }
}