Hacks do Github - Task lists e Tabelas
Tags: braziliandevs, github, beginners, programming
Published: 2022-06-09 16:02:47

![Tabelas e Task Lists](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/occ9oyfi3qmd4okanedz.png)
 
O Github é cheio de funcionalidades e o mais utilizado isso vocês já sabem e vamos continuar a série de "hacks" da plataforma que vão otimizar e melhorar sua experiência.

⚠️ Importante: Os prints que serão exibidos para exemplificar podem estar diferentes da interface do seu GitHub, por que sou muito adepto a extensões que melhoram a usabilidade e que ajudam no meu dia a dia. Partindo desse ponto peço que dê uma olhada [nesse artigo](https://dev.to/jhonywalkeer/extensoes-para-navegador-turbinando-sua-experiencia-no-github-538) antes

Sabe aquela **issue** que você abriu no Github e precisa quebrá-la em partes, mas não quer criar uma **issue** para cada coisa? Para isso você pode usar as **task lists**!

Basta você usar a notação `- [ ] Texto da task` (com um espaço dentro dos colchetes) para criar um **checkbox** desmarcado, ou então `- [x] Texto da task`, para um **checkbox** marcado. Exemplo:

```
- [ ] Task 1
- [ ] Task 2
- [ ] Task 3
- [x] Task 4
```
Que resulta nisso:

![Task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2suty0gymv0imev96i8g.png)
 

O interessante é que no Github, a linguagem utilizada para escrita desses textos é o Markdown que é uma linguagem simples de marcação originalmente criada por John Gruber e Aaron Swartz. Markdown converte seu texto em HTML válido, mas essa linguagem é utilizada também no **Discord**, **Notion** entre outros que possuem como base essa linguagem.

Isso significa que a output de saída será a mesma inserindo o texto formatado conforme o que está inserido no Github. Tendo isso em mente, vamos continuar..

## Tabelas

Para criar tabelas é bem simples, mas acredite eles fazem diferença:

```
Plano     | Categoria
--------- | ------
Fazer     | A
Planejar  | B
Indagar   | C
Testar    | D
```
O título da tabela é marcado com os traços `-` abaixo da palavra. O pipe `|` cria as colunas. Não é necessário alinhar com espaços, mas visualmente fica melhor, uma dica é que o VScode formata direitinho caso esteja usando um linter, que por acaso falo sobre alguns deles [nesse artigo](https://dev.to/jhonywalkeer/editorconfig-eslint-e-prettier-a-triade-dos-projetos-4p9).

Sendo renderizada dessa forma:

![Tabela](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w44imnq35hi0rlrbj95b.png)
 
Ainda nas planilhas, perceba que a `Categoria` (segunda coluna) ficou estranho alinhado à esquerda. Pra ficar alinhado à direita 0conseguimos alinhar usando `:` nos traços que ficam abaixo do título da tabela: 

- Se usar `:` no lado esquerdo, o alinhamento será feito à esquerda (padrão como apresentado no exemplo).
- Se usar `:` no lado direito, o alinhamento será feito à direita: 

```
Plano     | Categoria
--------- | ------:
Fazer     | A
Planejar  | B
Indagar   | C
Testar    | D
```
- Para centralizar, use dos dois lados:

```
Plano       | Categoria
:---------: | :------:
Fazer       | A
Planejar    | B
Indagar     | C
Testar      | D
```

Espero que esses "Hacks" tenham sido úteis para você e peço que acompanhe a continuação dessa série onde vou trazer muita coisa interessante para utilizar no seu dia a dia.. Mesmo que algumas você já conheça acho válido o reforço.

Fontes onde pesquisei esse conteúdo:

- https://docs.github.com/pt/get-started/writing-on-github/working-with-advanced-formatting/organizing-information-with-tables
- https://docs.github.com/pt/issues/tracking-your-work-with-issues/about-task-lists