Tabelas

<table>
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="tsm">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="tlg">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="borderless">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="outline">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="horz">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="vert">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="horz outline">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="vert outline">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="striped">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="striped horz">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="chess">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="hover horz">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="cellspace">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="stacktable">
    <tr>
        <th></th>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

<table class="inline tlg">
    <tbody>
        <tr>
            <th>Nome:</th>
            <td>Wellington Pragidi</td>
        </tr>
        <tr>
            <th>Telefone:</th>
            <td>55+(19)98179-6690</td>
        </tr>
        <tr>
            <th>E-mail:</th>
            <td><a href="mailto:wellington@webship.com.br">wellington@webship.com.br</a></td>
        </tr>
    </tbody>
</table>

<table class="txt_center">
    <tbody>
        <tr>
            <th>ID</th>
            <th>Produto</th>
            <th>HTML</th>
            <th>CMS</th>
            <th>PSD</th>
            <th>Valor</th>
        </tr>
        <tr>
            <td>444</td>
            <td>Template A</td>
            <td>Sim</td>
            <td>Não</td>
            <td>Sim</td>
            <td>R$ 3.800,00</td>
        </tr>
        <tr>
            <td>445</td>
            <td>Template B</td>
            <td>Não</td>
            <td colspan="2">Sim</td>
            <td>R$ 1.200,00</td>
        </tr>
        <tr>
            <td>446</td>
            <td>Template C</td>
            <td colspan="3">Sim</td>
            <td>R$ 2.000,00</td>
        </tr>
        <tr>
            <td>447</td>
            <td>Template D</td>
            <td colspan="2">Sim</td>
            <td>Não</td>
            <td>R$ 2.430,00</td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr>
            <td rowspan="2">Mitologia</td>
            <td>Grega</td>
        </tr>
        <tr>
            <td>Nórdica</td>
        </tr>
        <tr>
            <td>Medievalismo</td>
            <td>Era vitoriana, Saudosismo</td>
        </tr>
    </tbody>
</table>

<table class="inline tlg">
    <tbody>
        <tr>
            <th>Nome:</th>
            <td colspan="8">Wellington Pragidi</td>
        </tr>
        <tr>
            <th rowspan="2">Telefone:</th>
            <td colspan="8">(19) 98179-6690</td>
        </tr>
        <tr>
            <td colspan="8">(19) 3873-2113</td>
        </tr>
        <tr>
            <th rowspan="3">E-mail:</th>
            <td colspan="8">
                <a href="mailto:email@webship.com.br">email@webship.com.br</a>
            </td>
        </tr>
        <tr>
            <td colspan="8">
                <a href="mailto:wellington@webship.com.br">wellington@webship.com.br</a>
            </td>
        </tr>
        <tr>
            <td colspan="8">
                <a href="mailto:wellingtonpragidi@gmail.com">wellingtonpragidi@gmail.com</a>
            </td>
        </tr>
        <tr class="txt_center">
            <th class="txt_left">Experiências:</th>
            <td>HTML</td>
            <td>CSS</td>
            <td>Lógica</td>
            <td>JavaScript</td>
            <td>PHP</td>
            <td>MySQL</td>
            <td>NodeJS</td>
            <td>Java</td>
        </tr>
    </tbody>
</table>

Requer reset.css

:root {
    --table__color: #90959A;
    --table__border: 1px solid rgba(255, 255, 255, 0.15);
    --table__border-color: rgba(255, 255, 255, 0.15);

    --table__border-top: 1px solid rgba(255, 255, 255, 0.50);
    --table__border-bottom: 1px solid rgba(255, 255, 255, 0.10);

    --table__background: transparent;
    /* cor de fundo para: striped, chess e hover */
    --tableStripe__background: rgba(255, 255, 255, 0.05); /*rgba(0, 0, 0, 0.25)*/;
    --caption__background: rgba(0, 0, 0, 0.06);
}

/** restart */
table {
    position: relative;
    width: 100%;
    max-width: 100vw;
    border-collapse: collapse;
    color: var(--table__color);
    background-color: var(--table__background);
    overflow: hidden;
}
table, table tr, table td, table th {
    border: var(--table__border);
}
table th {
    padding: 0.44rem 0.56rem 0.56rem;
    font-weight: normal;
    font-size: 1.2rem;
    letter-spacing: 0.04rem;
}
table td {
    padding: 0.375rem 0.5rem 0.4rem;
    font-size: 1rem;
}
table caption {
    padding: 0.375rem 0.5rem 0.4rem;
    border: var(--table__border);
    border-bottom: none;
    background-color: var(--caption__background);
}

/** tabela com espacamento e fonte "menor" */
table.tsm th {
    padding: 4px 6px 6px 6px;
    font-size: 1rem;
    letter-spacing: 0.02rem;
}
table.tsm td {
    padding: 1px 5px 4px 5px;
    font-size: 0.9rem;
}
/** 
 * tabela com espacamento e fonte "maior" */
table.tlg th {
    padding: 8px 10px 10px 11px;
    font-size: 1.37rem;
}
table.tlg td {
    padding: 7px 7px 8px 9px;
    font-size: 1.16rem;
}

/** 
 * tabela sem nunhuma borda */
table.borderless, table.borderless tr, table.borderless th, table.borderless td {
    border: none;
    background-color: var(--table__background);
}

/** 
 * tabela apenas com borda nas extremidades */
table.outline {
    border: var(--table__border) !important;
}
table.outline tr, table.outline th, table.outline td {
    border: none;
}

/** 
 * tabela com cor de fundo listrada horizontalmente */
table.striped {
    background-color: var(--table__background);
}
table.striped tr:nth-child(even) {
    background-color: var(--tableStripe__background);
}
table.striped, table.striped tr, table.striped th, table.striped td {
    border: none;
}
/** 
 * tabela com cor de fundo das celulas quadriculadas */
table.chess tr:nth-child(even) td:nth-child(odd), 
table.chess tr:nth-child(odd) td:nth-child(even) {
    background-color: var(--tableStripe__background);
}
table.chess, table.chess tr, table.chess td, table.chess th {
    border: none;
}
table.chess tr:first-child {
    border-bottom: var(--table__border) !important;
}

/** 
 * tabela muda cor de fundo da linha "tr" na sobreposicao do cursor */
table.hover tr {
   transition: .3s;
   cursor: default;
}
table.hover tr:hover, table.hover tr:focus, table.hover tr:focus-within {
   background-color: var(--tableStripe__background);
   transition: .3s;
}

/** 
 * tabela com bordas horizontais */
table.horz tr {
    border-top: var(--table__border);
    border-bottom: var(--table__border);
    border-left: none;
    border-right: none;
}
/** 
 * tabela com bordas verticais */
table.vert th, table.vert td {
    border-left: var(--table__border);
    border-right: var(--table__border);
    border-top: none;
    border-bottom: none;
}
/** remove borda do elemento table dos estilos horizontal e vertical
  * remove borda das celulas dos elementos th e td horizontal
  * remove borda dos elementos tr vertical */
table.horz, table.vert, 
table.horz th, table.horz td, 
table.vert tr {
    border: none;
}

/** 
 * tabela com espacamento entre as celulas */
table.cellspace, table.cellspace th, table.cellspace td {
    border: none;
}
table.cellspace tr {
    border: 1px solid;
    border-color: var(--table__border-color);
    border-left: none;
    border-right: none;
}
table.cellspace tbody tr:nth-child(odd) {
    background-color: var(--tableStripe__background);
}
table.cellspace th, table.cellspace td {
    position: relative;
}
table.cellspace th::after, table.cellspace td::after {
    position: absolute;
    top: -1px;
    right: 0;
    display: block;
    content: '';
    width: 2px;
    height: calc(100% + 2px);
    background-color: var(--background); /* mesma cor de fundo do elemento parent de table */
}
table.cellspace th:last-child::after, table.cellspace td:last-child::after {
    position: static;
    content: none;
    display: none;
}

/** 
 * essa classe adiciona scroll horizontal automatico a tabela
 * (util para visualizacao em dispositivos moveis pequenos) */
.stacktable {
    display: block;
    overflow-x: auto;
}
.stacktable table th, .stacktable table td {
    white-space: nowrap;
}

/** 
 * alinhamentos geral 
 * (para mudar pode usar as classes de alinhamento de texto, eles estao no arquivo typography.css) */
table.inline td {
    text-align: right;
}
table.borderless th, table.cellspace th, table.inline th, table.outline th, 
table.horz th, table.frontier_horz th {
    text-align: left;
}


/** 
 * Nao mude os codigos de posicao, as classes de tabelas são reaproveitaveis sem usar !important 
 * Alterar a posicao fara com que os estilos nao funcionem */