Listas e Tabelas em HTML

Prévia do material em texto

Trabalhando com listas e tabelas
Apresentação
Lista é um importante recurso de HTML, pois permite criar tópicos de textos para uma melhor 
exemplificação de um determinado assunto. São recursos extremamente usados, inclusive quando 
nem se imagina que ele está sendo usado, como é o caso dos menus. Atualmente, boa parte dos 
menus em HTML é feito com listas.
As tabelas são listas de dados em duas dimensões, compostas por linhas e colunas. Portanto, são 
muito utilizadas para apresentar dados de uma forma organizada. As tabelas também são muito 
importantes para alinhamentos, os quais dificilmente seriam possíveis com simples comandos. A 
funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional, 
e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor 
posicionados na home page.
Nesta Unidade de Aprendizagem, você conhecerá a importância e a utilidade das tabelas. Além 
disso, identificará quais são os comandos para criar uma tabela e manipular listas. Por fim, analisará 
exemplos para a criação de um site usando tabelas para definir o layout.
Bons estudos.
Ao final desta Unidade de Aprendizagem, você deve apresentar os seguintes aprendizados:
Descrever os diferentes tipos de listas.•
Desenvolver a formatação de vários tipos de tabelas.•
Criar páginas web com listas e tabelas.•
Desafio
A concepção de um site corporativo é feita de maneira personalizada, de acordo com os objetivos e 
as necessidades específicas do cliente, cujas características são levantadas durante a fase de 
projeto. Para criar um site personalizado, é preciso mergulhar nos detalhes do negócio, de forma a 
entendê-lo completamente para que, a partir daí, possam ser propostas as melhores sugestões de 
design, cores e organização.
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
https://statics-marketplace.plataforma.grupoa.education/sagah/deb52ac7-f1db-4964-a358-00ce59f72f64/baeeb6bb-abbf-4196-9435-543c9438a19b.jpg
Considerando todas as características para a programação do site, qual seria o código em HTML 4 
para criar a página que está sendo descrita?
Infográfico
As listas são recursos frequentes na web, sendo utilizadas em artigos, menus de navegação de sites 
e recursos de produtos em sites. O setor de comércio eletrônico faz uso frequente de listas, sendo 
o resultado tão satisfatório que apenas olhando a web não é possível identificar que uma lista está 
sendo usada.
 
Neste Infográfico, você vai ver como usar cada um dos três tipos de listas existentes em HTML.
Aponte a câmera para o 
código e acesse o link do 
conteúdo ou clique no 
código para acessar.
 
https://statics-marketplace.plataforma.grupoa.education/sagah/2727dea0-feeb-45e1-9acc-318ee5f3a314/b4e16035-ce99-484a-8a49-0961b3869e90.jpg
Conteúdo do livro
HTML é uma maneira de organizar o conteúdo informativo e, como tal, fornece algumas tags 
auxiliares para essa finalidade, sendo as duas principais tags conjuntos de tipos para criar e definir 
listas e tabelas. Quando se tem um conjunto de dados e é necessário apresentá-los 
ordenadamente, uma boa maneira de fazê-lo é usando as listas ou as tabelas.
O uso de listas no HTML significa que a numeração e/ou os marcadores são aplicados 
automaticamente. As tabelas no HTML estão em um estado de limbo há um tempo. Eles foram 
inicialmente ocultados como uma forma de armazenar dados tabulares, porém, os web designers 
também os utilizam para fins estilísticos, como, por exemplo, agrupar um objeto em uma tabela de 
maneira rápida e fácil, centralizando um elemento inteiro.
No capítulo Trabalhando com listas e tabelas, da obra Programação Front End I, base teórica desta 
Unidade de Aprendizagem, você vai aprender a criar e manipular listas e tabelas em HTML. Além 
disso, vai identificar como utilizar seus respectivos atributos e valores.
Boa leitura.
PROGRAMAÇÃO 
FRONT END I 
Karine Birnfeld
Trabalhando com 
listas e tabelas
Objetivos de aprendizagem
Ao final deste texto, você deve apresentar os seguintes aprendizados:
 � Descrever os diferentes tipos de listas.
 � Desenvolver a formatação de diferentes tipos de tabelas.
 � Criar páginas Web com listas e tabelas. 
Introdução
É comum criarmos conteúdo da Web procurando maneiras de organizar 
as informações para as tornar mais legíveis. Uma forma de organizar o 
texto é por meio de listas e tabelas. Existem dois tipos de listas: ordenada 
(numerada, com letras, etc.) e não ordenada (com marcadores). Tabelas 
podem ser utilizadas tanto para organizar informações como a própria 
estrutura da página Web.
Neste capítulo, você aprenderá sobre a capacidade e os benefícios 
da utilização de listas e tabelas em páginas Web.
Listas HTML 
As listas HTML são usadas para especificar listas de informações, podendo 
conter um ou mais elementos dessa lista. Existem três tipos diferentes de listas 
em HTML (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line):
 � ordenada ou numerada (ol);
 � não ordenada ou com marcadores (ul);
 � de descrição ou de definições (dl).
Lista ordenada em HTML
Lista ordenada em HTML, ou lista numerada, exibe elementos em formato 
numerado e utiliza a tag HTML <ol> é. Podemos usar a lista de pedidos para 
representar itens no formato de pedido numérico ou alfabético – ou em qualquer 
formato em que um pedido seja enfatizado. Pode haver diferentes tipos de 
lista numerada (RAGGETT; LE HORS, JACOBS, 1999a, documento on-line):
 � número indo-arábico (1, 2, 3);
 � número romano maiúsculo (I II III);
 � número romano minúsculo (i ii iii);
 � alfabeto maiúsculo (ABC);
 � alfabeto minúsculo (abc).
Para representar diferentes listas ordenadas, existem cinco tipos de atributos 
na tag <ol>, conforme Quadro 1, a seguir.
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).
Tipo Descrição
Tipo “1” Este é o tipo padrão, no qual os itens da 
lista são numerados com números.
Tipo “I” Nesse tipo, os itens da lista são numerados 
com números romanos em maiúsculas.
Tipo “i” Nesse tipo, os itens da lista são numerados 
com números romanos em minúsculas.
Tipo “A” Nesse tipo, os itens da lista são 
numerados com letras maiúsculas.
Tipo “a” Nesse tipo, os itens da lista são 
numerados com letras minúsculas.
Quadro 1. Tipos de listas ordenadas
Trabalhando com listas e tabelas2
No Quadro 2, vemos um exemplo da lista ordenada em HTML que exibe 
quatro tópicos. Aqui não estamos definindo type="1" porque é o tipo-padrão.
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).
Código HTML Saída
<ol> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li> 
 <li>SQL</li> 
</ol>
1. HTML
2. Java
3. JavaScript
4. SQL
Quadro 2. Lista ordenada com tópicos padrão (números indo-arábicos)
Agora, no Quadro 3, é exibido um exemplo da lista em número romano 
em maiúsculas, usando o tipo “I”.
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).
Código HTML Saída
<ol type="I"> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li> 
 <li>SQL</li> 
</ol>
I. HTML
II. Java
III. JavaScript
IV. SQL
Quadro 3. Lista ordenada com tópicos tipo “I” (números romanos maiúsculos)
3Trabalhando com listas e tabelas
O atributo start é usado com a tag <ol> para especificar onde iniciar 
os itens da lista, conforme os tipos apresentados no Quadro 4, a seguir.
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).
Tipo Descrição
<ol type="1" start="5"> Mostra uma lista de números 
indo-arábicos começando com "5".
<ol type="A" start="5"> Mostra uma lista de letras 
maiúsculas começando com "E".
<ol type="a" start="5"> Mostra uma lista de letras 
minúsculas começando com "e".
<ol type="I" start="5"> Mostra uma lista de números romanos 
maiúsculos começando com "V".
<ol type="i" start="5"> Mostra uma lista de números romanos 
minúsculos começando com "v".
Quadro 4. Tipos do atributo start
Veja o exemplo do Quadro 5, a seguir.
Fonte:Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).
Código HTML Saída
<ol type="a" start="5"> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li> 
 <li>SQL</li> 
</ol>
e) HTML
f) Java
g) JavaScript
h) SQL
Quadro 5. Lista com atributo start
Trabalhando com listas e tabelas4
O atributo reversed é um booleano da tag HTML <ol> e uma novidade 
da versão HTML5. Se você usar o atributo invertido com tag, numerará a lista 
em ordem decrescente (7, 6, 5, 4, ..., 1), como mostra o Quadro 6.
Fonte: Adaptado de Smith (2012, documento on-line).
Código HTML Saída
<ol reversed> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li> 
 <li>SQL</li> 
</ol>
4. HTML
3. Java
2. JavaScript
1. SQL
Quadro 6. Lista com atributo reversed
Lista não ordenada em HTML
Lista não ordenada HTML, ou lista com marcadores, usa a tag HTML <ul> 
e exibe elementos no formato com marcadores. Podemos usar uma lista não 
ordenada em que não precisamos exibir itens em nenhuma ordem específica. 
Existem quatro tipos de lista com marcadores, como mostrado no Quadro 7 
(RAGGETT; LE HORS, JACOBS, 1999, documento on-line):
 � disco;
 � círculo;
 � quadrado;
 � nenhum.
5Trabalhando com listas e tabelas
Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line).
Tipo Descrição
type="disc" Esse é o estilo padrão, no qual os 
itens são marcados com marcadores 
circulares preenchidos.
type="circle" Nesse estilo, os itens da lista 
são marcados com círculos 
sem preenchimento.
type="square" Nesse estilo, os itens da lista são 
marcados com quadrados.
type="none" Nesse estilo, os itens da lista 
não estão marcados.
Quadro 7. Tipos de marcadores em listas não ordenadas (listas com marcadores).
A seguir, no Quadro 8, há um exemplo de lista não ordenada HTML da 
opção type="square".
Código HTML Saída
<ul type="square"> 
 <li>HTML</li> 
 <li>Java</li> 
 <li>JavaScript</li> 
 <li>SQL</li> 
</ul>
 � HTML
 � Java
 � JavaScript
 � SQL
Quadro 8. Exemplo de lista não ordenada com marcadores do tipo square
Trabalhando com listas e tabelas6
O atributo type não é suportado no HTML5. Em vez do tipo, pode-se 
usar a propriedade CSS do tipo de estilo de lista. A seguir, no Quadro 9, é 
apresentado o exemplo para mostrar a propriedade CSS da tag ul.
Código HTML Saída
<!DOCTYPE html> 
<html>
 <head>
 <title>[...]</title>
 </head>
 <body>
 <h2>The type attribute 
with CSS property</h2>
 <ul style="list-
style-type: square;">
 <li>HTML</li>
 <li>Java</li>
 <li>JavaScript</li>
 <li>SQL</li>
 </ul>
 </body>
</html>
 � HTML
 � Java
 � JavaScript
 � SQL
Quadro 9. Exemplo de propriedade CSS do tipo de marcador para itens dentro da tag ul
Lista de descrição HTML
Lista de descrição HTML, ou lista de definições, exibe elementos no formato 
de definição, como no dicionário. As tags <dl>, <dt> e <dd> são usadas 
para definir a lista de descrição (RAGGETT; LE HORS, JACOBS, 1999a, 
documento on-line):
As três tags da lista de descrição HTML são as seguintes (Quadro 10):
 � tag <dl> define a lista de descrição;
 � tag <dt> define o termo de dados;
 � tag <dd> define a definição de dados (descrição).
7Trabalhando com listas e tabelas
Código HTML Saída
<dl> 
 <dt>HTML</dt> 
 <dd>is a markup 
language</dd> 
 <dt>Java</dt> 
 <dd>is a programming 
language and platform</dd> 
 <dt>JavaScript</dt> 
 <dd>is a scripting 
language</dd> 
 <dt>SQL</dt> 
 <dd>is a query language</dd> 
</dl> 
HTML
 is a markup language.
Java
 is a programming 
language and platform.
JavaScript
 is a scripting language.
SQL
 is a query language.
Quadro 10. Tags da lista de descrição HTML
Tabelas em HTML
A tag da tabela HTML é usada para exibir dados em forma de tabela (linha × 
coluna), podendo haver muitas colunas seguidas (PRESCOTT, 2015).
Podemos criar uma tabela para exibir dados em forma de tabela, usando 
o elemento <table>, com a ajuda dos <tr>, <td> e <th>.
Em cada tabela, a linha é definida pela tag <tr>, o cabeçalho por <th>, e 
os dados pelas tags <td>. Observe a descrição de cada um desses elementos 
no Quadro 11, a seguir.
Tag Descrição
<table> Define uma tabela.
<tr> Define uma linha em uma tabela.
<th> Define uma célula de cabeçalho em uma tabela.
<td> Define uma célula em uma tabela.
Quadro 11. Descrição dos elementos de tabela HTML
(Continua)
Trabalhando com listas e tabelas8
Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999b, documento on-line).
Quadro 11. Descrição dos elementos de tabela HTML
Tag Descrição
<caption> Define a legenda da tabela.
<colgroup> Especifica um grupo de uma ou mais colunas 
em uma tabela para formatação.
<col> Usado com o elemento <colgroup> para 
especificar propriedades de cada coluna.
<tbody> Usado para agrupar o conteúdo do corpo em uma tabela.
<thead> Usado para agrupar o conteúdo do 
cabeçalho em uma tabela.
<tfooter> Usado para agrupar o conteúdo do rodapé em uma tabela.
(Continuação)
A seguir, veja um exemplo das tags da tabela HTML.
Código:
<table> 
 <tr>
 <th>Nome</th>
 <th>Sobrenome</th>
 <th>Peso</th>
 </tr> 
 <tr>
 <td>Sonoo</td>
 <td>Jaiswal</td>
 <td>60</td>
 </tr> 
 <tr>
9Trabalhando com listas e tabelas
 <td>James</td>
 <td>William</td>
 <td>80</td>
 </tr> 
 <tr>
 <td>Swati</td>
 <td>Sironi</td>
 <td>82</td>
 </tr> 
 <tr>
 <td>Chetna</td>
 <td>Singh</td>
 <td>72</td>
 </tr> 
</table>
Saída:
Na tabela HTML do exemplo anterior, existem cinco linhas e três colunas 
= 5 × 3 = 15 valores.
Há duas maneiras de especificar borda para tabelas HTML: por atributo 
de borda da tabela em HTML ou por propriedade border em CSS. Não é 
mais recomendada a utilização da maneira por atributo em HTML, e sim por 
propriedades CSS (PRESCOTT, 2015).
Trabalhando com listas e tabelas10
Código:
<style> 
table, th, td { 
 border: 1px solid black; 
} 
</style> 
Você pode recolher todas as bordas em uma por meio da propriedade 
border-collapse.
Código:
<style> 
table, th, td { 
 border: 2px solid black; 
 border-collapse: collapse; 
} 
</style>
Saída:
11Trabalhando com listas e tabelas
Você pode especificar o preenchimento para o cabeçalho e os dados da 
tabela de duas maneiras: pelo atributo cellpadding da tabela em HTML ou 
preenchendo a propriedade CSS. O atributo cellpadding da tag da tabela 
HTML está obsoleto desde a versão do HTML5. Nesse caso, é recomendável 
usar CSS. Então, veremos o código do CSS (PRESCOTT, 2015):
Código:
<style> 
table, th, td { 
 border: 1px solid pink; 
 border-collapse: collapse; 
} 
th, td { 
 padding: 10px; 
} 
</style>
Saída:
Trabalhando com listas e tabelas12
Podemos especificar a largura da tabela HTML usando a propriedade CSS 
width, em pixels ou porcentagem.
Código:
table{ 
 width: 100%; 
}
Se você deseja fazer uma célula abranger mais de uma coluna, é possível 
usar o atributo colspan. Ele dividirá uma célula/linha em várias colunas, 
e o número de colunas depende do valor do atributo colspan. Vamos ver o 
exemplo que abrange duas colunas.
Código CSS:
<style> 
table, th, td { 
 border: 1px solid black; 
 border-collapse: collapse; 
} 
th, td { 
 padding: 5px; 
} 
</style>
13Trabalhando com listas e tabelas
Código HTML:
<table style=”width:100%”> 
 <tr> 
 <th>Nome</th> 
 <th colspan=”2”>Telefone</th> 
 </tr> 
 <tr> 
 <td>João Silveira</td> 
 <td>7503520801</td> 
 <td>9555879135</td> 
 </tr> 
</table>
Saída:
Se você deseja fazer uma célula abranger mais de uma linha, você pode 
usar o atributo rowspan. Ele dividirá uma célula em várias linhas. O número 
de linhas divididas dependerá dos valores das linhas. Vamos a um exemplo 
que abrange duas linhas.
Código CSS:
<style> 
table, th, td { 
 border: 1px solid black; 
 border-collapse: collapse; 
} 
Trabalhando com listas e tabelas14
th, td { 
 padding:10px; 
} 
</style>
Código HTML:
<table> 
 <tr>
 <th>Nome</th>
 <td>João Silveira</td>
 </tr> 
 <tr>
 <th rowspan=”2”>Telefone</th>
 <td>7503520801</td>
 </tr> 
 <tr>
 <td>9555879135</td>
 </tr> 
</table>
Saída:
Você também pode criar vários tipos de tabelas usando propriedades CSS diferentes 
em sua tabela. 
15Trabalhando com listas e tabelas
Páginas Web com listas e tabelas 
Criar leiautes é a coisa mais importante no desenvolvimento de um site, pois 
garante que o site tenha uma aparência bem-organizada e o conteúdo pareça 
de fácil entendimento. Existem várias técnicas e estruturas disponíveis para 
criar leiautes. O leiaute baseado em tabela HTML é uma das maneiras mais 
fáceis de criar um leiaute, pois a tabela usa apenas linhas e formato baseado 
em coluna (FLATSCHART, 2011).
Uma tabela contém um conjunto de colunas e linhas de dados reais, e cada 
linha consiste em uma ou mais células. Dentro das células da tabela, você 
pode adicionar outras tags HTML, além do texto normal, como imagem, links, 
lista, tabelas, etc. Também é possível criar tabelas aninhadas, as quais podem 
levar a leiautes de tabelas complexas (FLATSCHART, 2011).
Diferentes tipos de leiaute de páginas Web podem ser criados com tabelas. 
O exemplo a seguir usa uma tabela com 3 linhas e 2 colunas — a primeira e a 
última linhas abrangem duas colunas com o uso do atributo colspan (Figura 1).
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#ccc;">
<h1>Título Principal da Página</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#ddd;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#eee;height:200px;width:400px;t
ext-align:top;">
O conteúdo vai aqui.</td>
</tr>
Trabalhando com listas e tabelas16
<tr>
<td colspan="2" style="background-color:#ccc;text-align:center;">
Direitos reservados</td>
</tr>
</table>
</body>
</html>
Figura 1. Leiaute básico de duas colunas, um cabeçalho e um rodapé.
Fonte: Codex (2017, documento on-line).
Outros leiautes de páginas Web podem ser criados com tabelas, como leiaute 
de duas colunas com um cabeçalho, leiaute de duas colunas com cabeçalho, 
barra de navegação e rodapé ou um leiaute de três colunas. Poderá ser escolhida 
a forma que melhor se adequar ao seu projeto de página.
CODEX. Layout. 2017. Disponível em: http://www.codex.wiki.br/Html/Layout. Acesso 
em: 7 out. 2019.
17Trabalhando com listas e tabelas
DARRELL, R. HTML Table Layouts. Iron Spider, Montréal, 2011. Disponível em: http://www.
ironspider.ca/webdesign102/tables4layout2.htm. Acesso em: 30 set. 2019.
FLATSCHART, F. HTML 5: embarque imediato. Rio de Janeiro: Brasport, 2011. 256 p.
PRESCOTT, P. HTML 5. Delaware; Hackensack: Babelcube, 2015. 113 p.
RAGGETT, D.; LE HORS, A.; JACOBS, I. Lists in HTML documents. Cambridge; Sophia-
-Antipolis; Minato; Beijing: World Wide Web Consortium, 24 Dec. 1999a. Disponível em: 
https://www.w3.org/TR/html401/struct/lists.html. Acesso em: 30 set. 2019.
RAGGETT, D.; LE HORS, A.; JACOBS, I. Tables in HTML documents. Cambridge; Sophia-
-Antipolis; Minato; Beijing: World Wide Web Consortium, 24 Dec. 1999b. Disponível em: 
https://www.w3.org/TR/html4/struct/tables.html. Acesso em: 30 set. 2019.
SMITH, M. HTML: The Markup Language: An HTML language reference: W3C Working 
Draft. Cambridge; Sophia-Antipolis; Minato; Beijing: World Wide Web Consortium, 29 
Mar. 2012. Disponível em: https://www.w3.org/TR/2012/WD-html-markup-20120329/
spec.html. Acesso em: 30 set. 2019.
Trabalhando com listas e tabelas18
Dica do professor
Às vezes é necessário adicionar imagens e legendas ao site, mas sem reformatar completamente a 
página para realizar essa alteração. Normalmente, a solução perfeita é criar uma tabela. Estas são 
ferramentas poderosas para usar quando você deseja segmentar apenas uma pequena área de um 
blog ou página web, podendo funcionar praticamente em qualquer lugar em que se possa inserir a 
codificação HTML.
Nesta Dica do Professor, você vai ver como adicionar imagens em uma tabela HTML na sua página 
web.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/3a4469d92f58691bdd9eb346542e73fe
Exercícios
1) O HTML tem amplo uso difundido nas páginas publicadas na Internet. 
Assinale a opção que corresponde à tag utilizada no caso em que seja necessário utilizar uma 
lista não ordenada. 
A) 
 
B) 
 
C) 
 
D) 
 
E) 
 
2) Tags são rótulos usados para informar ao navegador como deve ser apresentado o site. Ou 
seja, quando se começa a escrever HTML, estão sendo escritas as tags que serão 
interpretadas pelo navegador, produzindo, assim, o visual do site.
Qual tag representa cada célula da tabela?
A) 
B) 
C) 
 
D) 
E) 
3) O cabeçalho de uma tabela tem formatação diferente de uma célula padrão, tendo seu 
conteúdo centralizado e em estilo negrito. 
Qual tag deve ser usada para representar uma célula de cabeçalho de uma tabela?
A) 
B) 
C) 
D) 
E) 
4) Uma das várias possibilidade que o HTML fornece para trabalhar com tabelas, é a 
possibilidade de criar um título, que geralmente é usado como um breve resumo e uma 
explicação sobre o que será exibido na tabela. Esse título será agregado, como se fizesse 
parte da tabela, ficando em sua parte superior. 
Sendo assim, os títulos das tabelas estão dentro de qual elemento?
A) 
B) 
C) 
D) 
E) 
 
5) Durante a produção de um site ocorre a necessidade de que a célula de uma tabela ocupe 
mais de uma coluna ou linha, mesclando duas ou mais linhas ou duas ou mais colunas. 
Qual dos seguintes atributos mesclará uma célula em mais linhas? 
A) border-collapse.
B) cellpadding.
C) width.
D) colspan.
E) rowspan.
Na prática
A utilização de listas e de tabelas permite que dados sejam apresentados de maneira mais 
organizada. Neste vídeo, vamos criar uma lista não ordenada, uma lista ordenada e uma tabela 
utilizando a linguagem HTML e suas principais tags.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
 
https://fast.player.liquidplatform.com/pApiv2/embed/cee29914fad5b594d8f5918df1e801fd/716f13c9f4b4659a7bc860516e977a0c
Saiba +
Para ampliar o seu conhecimento a respeito desse assunto, veja abaixo as sugestões do professor:
Como criar tabelas, linhas e colunas em HTML
Este artigo explica de maneira mais ampla a enorme gama de possibilidades na customização de 
tabelas em HTML. Veja a seguir.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Curso de HTML5
Neste vídeo, o professor Gustavo Guanabara exemplifica a manipulação de tabelas em HTML.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
Curso de HTML5 - 00 - Site Completo
Neste tutorial, você vai aprender a construir o seu site.
Aponte a câmera para o código e acesse o link do conteúdo ou clique no código para acessar.
https://www.htmlprogressivo.net/2013/10/Como-criar-tabelas-linhas-colunas-As-tags-table-tr-td.html
https://www.youtube.com/embed/PQzUj5Hd0jk
https://www.youtube.com/embed/epDCjksKMok