Tabelas - Packit UI

Tabela padrão

definido em reset.css

ID	Título	Autor	Categoria	Data
213	WordPress	Gabriela Fontes	HTML	21/12/2023
321	Comparar valores de arrays	Matheus Braga	Liquidsoap	12/08/2023
213	Operadores de comparação	Samantha Barbosa	Lua	21/12/2023
231	Operadores de comparação	Marcelo Soares	CSS	21/08/2023
123	Sitemap XML	Joseane Barbosa	Liquidsoap	12/01/2023
231	MVC	Edna Plácido	JavaScript	12/04/2023
132	Criar e inserir tabelas MySQL com PHP	Arthur Valença	Ruby	12/03/2023

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

Tabela pequena

ID	Título	Autor	Categoria	Data
231	Joomla	Jade Vasconcelos	Lua	12/05/2023
132	Compilador	Enzo Arruda	Lua	12/11/2023
312	Operadores de comparação	Keila Souza	CSS	12/03/2023
312	Interpretador	Edna Braga	CSS	21/11/2023
132	Tipos de input	Camila Aguiar	HTML	12/03/2023
132	Tipos de input	Lucas Pascoal	Illustrator	21/12/2023
312	Comparar valores de arrays	Miguel Santana	Go	12/05/2023

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

Tabela grande

ID	Título	Autor	Categoria	Data
312	PHPDoc tags	Camila Pereira	XML	12/08/2023
321	Atributos formmethod e formaction	David Uchoa	Illustrator	21/02/2023
213	Sitemap XML	Gabriela Castro	JavaScript	21/01/2023
132	Compilador	Gabriela Antunes	PHP	12/07/2023
312	Compilador	Elizabeth Sampaio	XML	21/04/2023
231	Pseudos e Seletores	Mariana Sampaio	PHP	12/04/2023
213	O céu está vazio	Pablo Aguiar	Ruby	21/10/2023

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

Tabela sem bordas

ID	Título	Autor	Categoria	Data
321	Copiar texto com click	Sueli Araújo	Java	21/05/2023
123	MySQL JOIN com 3 tabelas	Jonas Valença	JavaScript	12/06/2023
213	PHPDoc tags	Jonas Anchieta	Photoshop	12/02/2023
123	Caracteres especiais	Caio Pacheco	Liquidsoap	12/08/2023
312	Interpretador	Thalita Uchoa	Python	12/12/2023
132	Atributos formmethod e formaction	Henrique Anchieta	Apache	21/02/2023
312	Meta tags	Laura Nogueira	Python	12/12/2023

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

Tabela com borda nas extremidades

ID	Título	Autor	Categoria	Data
132	O céu está vazio	Mariana Pereira	XML	21/05/2023
321	Pseudos e Seletores	Jonas Siqueira	Go	21/08/2023
321	Tipos de input	Samuel Arruda	HTML	21/10/2023
231	Caracteres especiais	Alícia Braga	Apache	12/08/2023
123	Atributos formmethod e formaction	Edna Pascal	Java	21/04/2023
132	MySQL JOIN com 3 tabelas	Iara Azevedo	Python	12/11/2023
132	WordPress	Enzo Prado	JavaScript	12/02/2023

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

Tabela com bordas horizontais

ID	Título	Autor	Categoria	Data
132	MVC	Sarah Teles	MySQL	21/11/2023
321	Tipos de input	Edna Hernandes	CSS	12/05/2023
312	Interpretador	Camila Dias	Illustrator	12/02/2023
231	Diretórios e URLs absolutos do WordPress	Eva Sampaio	Perl	12/08/2023
132	WordPress	Eva Silveira	Ruby	12/06/2023
132	O céu está vazio	Maísa Chaves	Illustrator	12/10/2023
213	Copiar texto com click	Helena Silveira	MySQL	21/01/2023

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

Tabela com bordas verticais

ID	Título	Autor	Categoria	Data
231	MySQL JOIN com 3 tabelas	Natasha Arruda	XML	21/10/2023
132	PDO	Beatriz Sanches	Apache	21/10/2023
213	Operadores matemáticos	Iara Vieira	MySQL	21/02/2023
312	Estados do Brasil	Levi Seixas	MySQL	21/04/2023
312	PHPDoc tags	Hugo Sampaio	XML	12/03/2023
312	Botões de Compartilhamento	Arthur Siqueira	HTML	12/05/2023
123	Comprimir código CSS com PHP	Thalita Uchoa	Perl	21/03/2023

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

Tabela com bordas horizontais e nas extremidades

ID	Título	Autor	Categoria	Data
312	setInterval e setTimeout	Vicente Soares	MySQL	21/05/2023
123	Forçar https	Leonardo Barros	Corel Draw	12/08/2023
123	Copiar texto com click	Helena Azevedo	Lua	21/08/2023
231	PDO	Levi Soares	HTML	21/01/2023
123	Comprimir código CSS com PHP	Miguel Neves	Java	12/07/2023
321	Css Hacks	Elizabeth dos Santos	PHP	12/10/2023
132	Forçar https	Thiago Cabral	Perl	21/09/2023

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

Tabela com bordas verticais e nas extremidades

ID	Título	Autor	Categoria	Data
321	.htaccess	Samantha Valença	Perl	12/03/2023
132	Meta tags	Wesley Castro	MySQL	12/12/2023
231	Css Hacks	Dayane Barros	JavaScript	21/05/2023
231	Forçar https	Beatriz Aragão	Ruby	12/04/2023
123	Caracteres especiais	Samantha Pereira	XML	12/12/2023
231	Comprimir código CSS com PHP	Davi Noronha	Illustrator	12/10/2023
213	Pseudos e Seletores	Cauã Soares	XML	12/01/2023

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

Tabela com linhas listradas

ID	Título	Autor	Categoria	Data
231	PDO	Lucas Coelho	Liquidsoap	12/02/2023
231	MySQL JOIN com 3 tabelas	Arthur Azevedo	Go	21/09/2023
213	Diretórios e URLs absolutos do WordPress	Jade Trindade	XML	21/01/2023
231	setInterval e setTimeout	Paloma Barbosa	HTML	21/01/2023
312	MySQL JOIN com 3 tabelas	Wesley Ramalho	CSS	21/10/2023
123	WordPress	Edna Sanches	PHP	12/02/2023
231	Operadores de comparação	Levi Soares	CSS	21/03/2023

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

Tabela com linhas listradas e bordas horizontais

ID	Título	Autor	Categoria	Data
213	O céu está vazio	Caio Aguiar	Perl	12/09/2023
321	Enviar valor elemento contenteditable para textarea	Miguel Dias	HTML	21/10/2023
321	MySQL JOIN com 3 tabelas	Iara Soares	Apache	12/09/2023
312	Meta tags	Alícia Viana	Java	21/10/2023
123	Criar e inserir tabelas MySQL com PHP	Sueli Chaves	Illustrator	12/09/2023
123	setInterval e setTimeout	Beatriz Teixeira	MySQL	12/07/2023
132	Copiar texto com click	Isaac Soares	Illustrator	12/08/2023

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

Tabela com células quadriculada

ID	Título	Autor	Categoria	Data
321	O céu está vazio	Amanda Oliveira	CSS	21/05/2023
123	Css Hacks	Fabiola Sampaio	MySQL	12/04/2023
231	Estados do Brasil	Davi Pereira	Apache	21/10/2023
312	PDO	Alícia Araújo	Corel Draw	12/12/2023
132	Estados do Brasil	Laura Cabral	JavaScript	12/03/2023
123	Css Hacks	Rebeca Soares	Java	21/03/2023
231	Meta tags	Larissa Lopes	Python	21/08/2023

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

combine outras classes para obter bordas como desejar

Linhas com efeito hover

ID	Título	Autor	Categoria	Data
213	Bordas com Imagem	Davi Figueiredo	Lua	21/08/2023
123	.htaccess	Eva Figueiredo	Liquidsoap	12/12/2023
213	Operadores matemáticos	Isaac Viana	Apache	21/04/2023
123	Operadores matemáticos	Vitor Sanches	Liquidsoap	21/07/2023
213	Comparar valores de arrays	Joseane Pereira	MySQL	21/10/2023
132	createTextNode	Jonas Coelho	Perl	21/03/2023
213	MVC	Elizabeth Teixeira	Liquidsoap	12/02/2023

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

Tabela com espaçamento entre as células

ID	Título	Autor	Categoria	Data
132	Estados do Brasil	Enzo Pessoa	Perl	21/10/2023
321	MVC	Rebeca Valença	XML	12/11/2023
321	Operadores de comparação	Michelle Seixas	Lua	21/03/2023
132	Bordas com Imagem	Sueli Barbosa	Python	12/04/2023
312	Operadores de comparação	Larissa Farias	Illustrator	12/09/2023
132	Pseudos e Seletores	Isaac Barbosa	PHP	12/02/2023
312	Blogger	Keila Vasconcelos	XML	21/10/2023

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

Tabela com scroll horizontal auto

ID	Título	Publicado por:	Revisado por:	Categoria	Sub-Categoria	Publicado em:	Atualizado em:
321	Criar e inserir tabelas MySQL com PHP	Samuel Chaves	Camila Sampaio	XML	CSS	21/04/2023	21/09/2023
213	createTextNode	Natasha Vasconcelos	Samuel Cabral	Ruby	HTML	12/07/2023	21/06/2023
312	Botões de Compartilhamento	Marcelo Neves	Jonas Uchoa	PHP	Illustrator	21/04/2023	12/06/2023
123	WordPress	Cauã Anchieta	Miguel Vaz	JavaScript	Ruby	21/07/2023	12/08/2023
312	Meta tags	Mariana Pacheco	Arthur Barbosa	Ruby	Photoshop	21/05/2023	21/08/2023
213	Blogger	Gabriela Trindade	Jonas Coelho	Perl	CSS	21/08/2023	21/05/2023
312	Interpretador	Pablo Figueiredo	Leonardo Souza	Ruby	XML	21/12/2023	21/05/2023

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

Tabela em linha

Nome:	Wellington Pragidi
Telefone:	55+(19)98179-6690
E-mail:	wellington@webship.com.br

<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>

Células ocupando mais colunas

ID	Produto	HTML	CMS	PSD	Valor
444	Template A	Sim	Não	Sim	R$ 3.800,00
445	Template B	Não	Sim		R$ 1.200,00
446	Template C	Sim			R$ 2.000,00
447	Template D	Sim		Não	R$ 2.430,00

<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>

Células ocupando mais linhas

Mitologia	Grega
Mitologia	Nórdica
Medievalismo	Era vitoriana, Saudosismo

<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>

Células ocupando mais linhas e colunas

Nome:	Wellington Pragidi
Telefone:	(19) 98179-6690
Telefone:	(19) 3873-2113
E-mail:	email@webship.com.br
	wellington@webship.com.br
	wellingtonpragidi@gmail.com
Experiências:	HTML	CSS	Lógica	JavaScript	PHP	MySQL	NodeJS	Java

<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 */