Tabelas - Packit UI

Tabela padrão

definido em reset.css

ID	Título	Autor	Categoria	Data
231	Pseudos e Seletores	Natasha Vilela	Lua	21/02/2023
213	Diretórios e URLs absolutos do WordPress	Miguel Coelho	Ruby	21/10/2023
213	Diretórios e URLs absolutos do WordPress	Michelle Aragão	Apache	21/10/2023
231	Meta tags	Thalita da Silva	Photoshop	21/05/2023
312	PDO	Alícia Vilhena	Ruby	21/12/2023
123	Interpretador	Laura Barros	HTML	12/07/2023
132	Joomla	Helena Castro	Perl	12/08/2023

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

Tabela pequena

ID	Título	Autor	Categoria	Data
231	List Style	Rebeca Neves	Ruby	12/11/2023
312	Operadores de comparação	Gabriela Castro	XML	12/11/2023
213	Condicionais ternário	Thiago Braga	MySQL	12/01/2023
132	Css Hacks	Paloma Pacheco	Lua	21/11/2023
231	Pseudos e Seletores	Alícia Fontes	Ruby	12/08/2023
312	Sitemap XML	Jade Viana	Perl	21/06/2023
213	O céu está vazio	Elizabeth Sanches	JavaScript	21/11/2023

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

Tabela grande

ID	Título	Autor	Categoria	Data
231	.htaccess	Samuel Cabral	PHP	12/03/2023
132	Meta tags	Gabriela Soares	Go	12/11/2023
321	Css Hacks	Wesley Teixeira	HTML	12/05/2023
231	.htaccess	Larissa da Silva	CSS	12/08/2023
132	serialize e unserialize	Caio Pascal	Go	12/04/2023
132	Compilador	Thiago Aragão	Apache	21/04/2023
123	Condicionais ternário	Jade Souza	HTML	21/09/2023

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

Tabela sem bordas

ID	Título	Autor	Categoria	Data
213	.htaccess	Arthur Gomes	Lua	12/11/2023
213	Joomla	Thalita Pascoal	Illustrator	21/11/2023
123	Caracteres especiais	David Viana	Python	12/09/2023
312	Enviar valor elemento contenteditable para textarea	Ricardo Faro	Perl	21/01/2023
231	Caracteres especiais	Amanda Fontes	Photoshop	21/02/2023
213	Tipos de input	Beatriz Almeida	XML	21/02/2023
132	serialize e unserialize	Davi Dias	Lua	12/05/2023

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

Tabela com borda nas extremidades

ID	Título	Autor	Categoria	Data
213	Operadores matemáticos	Bryan Teixeira	JavaScript	12/01/2023
321	Botões de Compartilhamento	Beatriz Hernandes	Liquidsoap	12/10/2023
123	Forçar https	William Sampaio	Apache	21/11/2023
123	Operadores de comparação	Alícia Pascal	Python	12/07/2023
123	Compilador	Jonas Pascoal	JavaScript	12/02/2023
312	serialize e unserialize	William Faro	MySQL	21/08/2023
132	Comparar valores de arrays	Elizabeth Faro	MySQL	21/09/2023

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

Tabela com bordas horizontais

ID	Título	Autor	Categoria	Data
213	Bordas com Imagem	Helena Vieira	Java	21/02/2023
132	Criar e inserir tabelas MySQL com PHP	Bryan Cabral	Python	12/07/2023
312	PHPDoc tags	Wesley Pessoa	PHP	21/10/2023
123	Caracteres especiais	Ricardo Vieira	Liquidsoap	12/03/2023
231	Botões de Compartilhamento	Dayane da Silva	Go	12/03/2023
123	Caracteres especiais	Michelle Pascal	Apache	21/04/2023
132	PDO	Heitor Aguiar	Ruby	12/02/2023

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

Tabela com bordas verticais

ID	Título	Autor	Categoria	Data
123	serialize e unserialize	Michelle Viana	JavaScript	12/02/2023
321	Bordas com Imagem	Vicente Sanches	PHP	12/12/2023
132	Comparar valores de arrays	Paola Vilhena	Go	21/10/2023
231	setInterval e setTimeout	Rebeca Pascoal	Lua	21/01/2023
231	PDO	Thalita Pereira	Ruby	12/02/2023
321	createTextNode	Eva Gomes	JavaScript	21/11/2023
231	CRUD	William Anchieta	Corel Draw	12/07/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
132	Css Hacks	Elizabeth Aguiar	MySQL	12/05/2023
213	setInterval e setTimeout	Leonardo Dias	Illustrator	21/09/2023
213	Diretórios e URLs absolutos do WordPress	Wesley Vieira	Ruby	21/01/2023
312	Interpretador	Samuel Prado	Photoshop	12/11/2023
321	Criar e inserir tabelas MySQL com PHP	Eva Barbosa	Lua	21/02/2023
213	Caracteres especiais	Jade Vilela	Python	21/02/2023
132	Sitemap XML	Enzo Vaz	Photoshop	12/11/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
312	Meta tags	David Anchieta	PHP	12/09/2023
123	Atributos formmethod e formaction	Helena Chaves	Java	21/07/2023
321	Forçar https	Marcelo Santana	Apache	12/09/2023
132	Tipos de input	Henrique Vilela	Photoshop	21/07/2023
132	Botões de Compartilhamento	Joseane Dias	MySQL	21/12/2023
123	Enviar valor elemento contenteditable para textarea	Rebeca Azevedo	HTML	12/07/2023
231	Joomla	Sarah Seixas	Python	12/07/2023

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

Tabela com linhas listradas

ID	Título	Autor	Categoria	Data
132	PHPDoc tags	Keila Vaz	Photoshop	12/02/2023
321	Operadores matemáticos	Isaac Barros	XML	21/04/2023
132	Comparar valores de arrays	David Aragão	CSS	12/04/2023
231	createTextNode	Gabriel Aragão	Python	12/01/2023
312	Caracteres especiais	Rebeca Souza	Java	12/07/2023
231	Tipos de input	Thalita Almeida	Illustrator	12/06/2023
213	setInterval e setTimeout	Samantha Teles	XML	12/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
132	List Style	Edna Anchieta	MySQL	12/05/2023
321	List Style	Ricardo Vilela	Go	12/04/2023
321	Condicionais ternário	Gabriel Pessoa	Apache	21/03/2023
213	Interpretador	Gabriela Neves	Photoshop	12/10/2023
213	Pseudos e Seletores	Ricardo Fontes	HTML	21/02/2023
213	Pseudos e Seletores	Cauã Barros	Lua	21/07/2023
321	Condicionais ternário	Ricardo Vilela	Liquidsoap	21/02/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
123	Copiar texto com click	Dayane Silveira	Perl	21/02/2023
213	Css Hacks	Natalia Teixeira	Java	21/03/2023
123	Enviar valor elemento contenteditable para textarea	Natasha Pacheco	JavaScript	21/04/2023
123	Tipos de input	Amanda Vaz	XML	21/10/2023
321	serialize e unserialize	Jade Oliveira	JavaScript	12/09/2023
213	PDO	Jade Soares	MySQL	21/03/2023
213	Meta tags	Mariana Vasconcelos	Apache	12/05/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
123	MVC	Ricardo da Silva	Corel Draw	12/05/2023
231	Comprimir código CSS com PHP	Elizabeth Neves	Go	21/08/2023
213	Joomla	Marcelo Fontes	JavaScript	12/01/2023
132	Diretórios e URLs absolutos do WordPress	Gustavo Vaz	Python	21/05/2023
231	PDO	Maísa Vilhena	Illustrator	21/02/2023
123	Comparar valores de arrays	Larissa Pessoa	Lua	12/02/2023
321	Comprimir código CSS com PHP	Helena Pereira	MySQL	12/04/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
312	Forçar https	Enzo Uchoa	PHP	12/07/2023
213	Enviar valor elemento contenteditable para textarea	Gabriel da Silva	JavaScript	12/02/2023
231	PDO	Thiago Dias	Go	12/12/2023
213	Tipos de input	Iara Azevedo	HTML	21/04/2023
123	Botões de Compartilhamento	Beatriz Sanches	XML	21/04/2023
231	Bordas com Imagem	Vitor Neves	Python	21/08/2023
321	MySQL JOIN com 3 tabelas	Isaac Pereira	Liquidsoap	12/11/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:
123	Caracteres especiais	Vitor Castro	Bryan Valença	JavaScript	CSS	12/03/2023	21/07/2023
312	setInterval e setTimeout	David Azevedo	Gustavo Souza	Python	Python	21/06/2023	12/06/2023
321	Operadores de comparação	Caio Arruda	Paloma Castro	Apache	Java	12/11/2023	12/09/2023
123	Copiar texto com click	Enzo Farias	Rebeca Silveira	Apache	MySQL	21/07/2023	21/04/2023
231	Condicionais ternário	Pablo Valença	Matheus Barbosa	Corel Draw	Lua	12/04/2023	12/12/2023
321	PDO	Wesley Gomes	Laura Pascoal	JavaScript	Liquidsoap	12/02/2023	12/03/2023
213	Atributos formmethod e formaction	Levi Lopes	Miguel Pereira	Liquidsoap	Liquidsoap	21/11/2023	12/03/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 */