Definição e uso de:
HTML com Estilo
O caractere "Non-breaking space" apesar de não ser visualizado pelo leitor tem uma função importante em HTML.
Como o nome do caractere diz "espaço sem quebra" é utilizado para:
Preencher um espaço vazio (sem conteúdo) de uma tag HTML. O uso de evita a falta de profundidade daquela tag.
Essa anomalia não ocorre em todos os navegadores.
É utilizado também para adequar o layout de uma página HTML.
Considere o código fonte abaixo:
<html>
<body>
<table border="1" cellspacing="1" cellpadding="1" style="border: thin solid Blue;">
<tr>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
</table>
</body>
</html>
A tabela codificada acima aparecerá assim no navegador:
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Considere agora o código fonte abaixo, quando uma das células é vazia (sem conteúdo):
<html>
<body>
<table border="1" cellspacing="1" cellpadding="1" style="border: thin solid Blue;">
<tr>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Conteúdo</td>
<td></td>
</tr>
</table>
</body>
</html>
A tabela codificada acima, com uma célula vazia aparecerá assim no navegador:
Repare que a célula vazia apresenta-se sem profundidade.
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Considere agora o código fonte abaixo, quando uma das células é vazia (sem conteúdo) foi preenchida com o caractere :
<html>
<body>
<table border="1" cellspacing="1" cellpadding="1" style="border: thin solid Blue;">
<tr>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Conteúdo</td>
<td>Conteúdo</td>
</tr>
<tr>
<td>Conteúdo</td>
<td> </td>
</tr>
</table>
</body>
</html>
A tabela codificada acima, com uma célula vazia aparecerá assim no navegador:
Repare que a célula vazia apresenta-se agora com profundidade.
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Conteúdo
Para adequar o layout de uma página HTML o caractere pode ser usado conforme abaixo:
Nas duas últimas linhas foram inseridos duas vezes.
<html>
<body>
Texto..............
Texto..............
Texto..............
Texto..............
Texto..............
Texto..............
</body>
</html>
O texto acima será visto no navegador conforme abaixo:
As duas últimas linhas apresentam-se com um avanço de espaço à esquerda.
Texto..............
Texto..............
Texto..............
Texto..............
Texto..............
Texto..............