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).
2 Trabalhando com listas e tabelas

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.

Quadro 1. Tipos de listas ordenadas

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.

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

 Trabalhando com listas e tabelas 3

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.

Quadro 2. Lista ordenada com tópicos padrão (números indo-arábicos)

Código HTML Saída

<ol> 1. HTML
<li>HTML</li> 2. Java
<li>Java</li> 3. JavaScript
4. SQL
<li>JavaScript</li>
<li>SQL</li>
</ol>

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

Agora, no Quadro 3, é exibido um exemplo da lista em número romano

em maiúsculas, usando o tipo “I”.

Quadro 3. Lista ordenada com tópicos tipo “I” (números romanos maiúsculos)

Código HTML Saída

<ol type="I"> I. HTML

<li>HTML</li> II. Java
<li>Java</li> III. JavaScript
IV. SQL
<li>JavaScript</li>
<li>SQL</li>
</ol>

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

4 Trabalhando 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.

Quadro 4. Tipos do atributo start

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

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

Veja o exemplo do Quadro 5, a seguir.

Quadro 5. Lista com atributo start

Código HTML Saída

<ol type="a" start="5"> e) HTML

<li>HTML</li> f) Java
<li>Java</li> g) JavaScript
<li>JavaScript</li> h) SQL
<li>SQL</li>
</ol>

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999a, documento on-line).

 Trabalhando com listas e tabelas 5

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.

Quadro 6. Lista com atributo reversed

Código HTML Saída

<ol reversed> 4. HTML

<li>HTML</li> 3. Java
<li>Java</li> 2. JavaScript
<li>JavaScript</li> 1. SQL
<li>SQL</li>
</ol>

Fonte: Adaptado de Smith (2012, documento on-line).

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.
6 Trabalhando com listas e tabelas

Quadro 7. Tipos de marcadores em listas não ordenadas (listas com marcadores).

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.

Fonte: Raggett, Le Hors e Jacobs (1999a, documento on-line).

A seguir, no Quadro 8, há um exemplo de lista não ordenada HTML da

opção type="square".

Quadro 8. Exemplo de lista não ordenada com marcadores do tipo square

Código HTML Saída

<ul type="square"> „„ HTML

<li>HTML</li> „„ Java
<li>Java</li> „„ JavaScript
<li>JavaScript</li> „„ SQL
<li>SQL</li>
</ul>
 Trabalhando com listas e tabelas 7

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.

Quadro 9. Exemplo de propriedade CSS do tipo de marcador para itens dentro da tag ul

Código HTML Saída

<!DOCTYPE html> „„ HTML

<html> „„ Java
<head> „„ JavaScript
<title>[...]</title> „„ SQL
</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>

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).
8 Trabalhando com listas e tabelas

Quadro 10. Tags da lista de descrição HTML

Código HTML Saída

<dl> HTML
<dt>HTML</dt> is a markup language.
<dd>is a markup Java
language</dd> is a programming
<dt>Java</dt> language and platform.
<dd>is a programming JavaScript
language and platform</dd> is a scripting language.
<dt>JavaScript</dt> SQL
<dd>is a scripting is a query language.
language</dd>
<dt>SQL</dt>
<dd>is a query language</dd>
</dl>

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.

Quadro 11. Descrição dos elementos de tabela HTML

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.

(Continua)
 Trabalhando com listas e tabelas 9

(Continuação)

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.

Fonte: Adaptado de Raggett, Le Hors e Jacobs (1999b, documento on-line).

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>
10 Trabalhando 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 tabelas 11

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:
12 Trabalhando 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 tabelas 13

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>
14 Trabalhando 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 tabelas 15

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.
16 Trabalhando 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 tabelas 17

<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.
18 Trabalhando 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.