Livro modulo 8

Prévia do material em texto

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