Table
Displays a table
1 | <table> |
2 | <thead> |
3 | <tr> |
4 | <th>Name</th> |
5 | <th>Age</th> |
6 | <th>Country</th> |
7 | </tr> |
8 | </thead> |
9 | <tbody> |
10 | <tr> |
11 | <td>John</td> |
12 | <td>25</td> |
13 | <td>USA</td> |
14 | </tr> |
15 | <tr> |
16 | <td>Jane</td> |
17 | <td>30</td> |
18 | <td>Canada</td> |
19 | </tr> |
20 | </tbody> |
21 | </table> |
Theme
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 { /* ... */ }
}
}