Таблицы typography utilities

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<table>
    <thead>
        <tr>
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
    </thead>
    
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
    
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
    
    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<table class="table-border-none">
    ...

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<table class="table-border">
...

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<table class="table-striped table-hover">
...

Text	Text	Text
Text	Text	Text
Text	Text text
Text	Text	Text

<table class="table-border-none">
    <thead>
        <tr class="bor-none bg-pink500 t-white">
            <th>Text</th>
            <th>Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tr class="bg-pink100">
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
    
    <tr class="bg-pink200">
        <td>Text</td>
        <td colspan="2" class="bg-purple400 t-white">Text text</td>
    </tr>
    
    <tr class="bg-pink300">
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text
Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text	Text text

<div class="overflow-x-auto">
    <table>
    ...
    </table>
</div>

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<table class="table-layout-fixed">
    <thead>
        <tr>
            <th class="w100px">Text</th>
            <th class="w200px">Text</th>
            <th>Text</th>
        </tr>
    </thead>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
    
    ...
</table>

Text caption
Text	Text	Text
Text	Text	Text

<table class="table-caption-bottom">
    <caption>Text caption</caption>
    <tr>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
    </tr>

    <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text
Text	Text	Text

<div class="bor1 bor-solid bor-pink rounded10 pad10 bg-pink400">

    <table class="bor1 bor-solid bor-pink t-pink700 table-striped table-hover table-border" style="
    --table-striped-odd-bg: #f9cae2; 
    --table-striped-even-bg: #fef8fb; 
    --table-tr-hover-bg: #f6b3d5; 
    --table-tr-border-bottom: #f6b3d5 1px solid;
    --table-td-border-right: #f5aad0 1px solid;
    --table-th-border-right: #ee50a0 1px solid;">
        <thead>
            <tr class="bor-none bg-pink t-white">
                <th>Text</th>
                <th>Text</th>
                <th>Text</th>
            </tr>
        </thead>

        <tr>
            <td>Text</td>
            <td>Text</td>
            <td>Text</td>
        </tr>
        ...

    </table>
</div>