Esses
dois atributos da tag <table> são usados juntos para ajustar o espaço
interno e o espaço entre as células.
Cellspacing:
O valor colocado nesse atributo, modifica a largura do espaço entre as células
de uma tabela.
Se
for colocado um valor=zero, a tabela fica com o espaço entre as células bem
fino.
Se
colocar um valor maior (=30) a tabela fica com o espaço entre as células bem
largo, e isso pode ser modificado mudando esse valor.
Cellpadding:
O valor colocado nesse atributo, modifica o espaço de dentro da células de uma
tabela.
Se
colocar um valor=zero, essa tabela fica pequena e apertada, e se colocar um
valor maior, a célula ficara bem grande e espaçosa.
Lembramos
que esse valor é definido em pixel.
Aqui
esta um exemplo de uma tabela com valor zero para os atributos Cellpadding e
Cellspacing.
Na
sintaxe:
<html>
<head>
<title> Cellpadding e
Cellspacing</title>
</head>
<body>
<p align="center"> Tabela
Aninhada ou tabela dentro da Tabela</p>
<table
border="1" width="300" align="center"
Cellpadding="0"
Cellspacing="0">
<tr
align="center">
<!th é a tag dos títulos, em que o
texto aparece destacado em negrito>
<th > Mês</th>
<th > Dia</th>
<th > Horas</th>
<th > Nome</th>
</tr>
<tr
align="center">
<td> Janeiro</td>
<td> 20</td>
<td> 09:20</td>
<td> Jaco</td>
</td>
</tr>
<tr
align="center">
<td> Fevereiro</td>
<td> 25</td>
<td> 09:50</td>
<td> João</td>
</tr>
<tr
align="center">
<td> Março</td>
<td> 07</td>
<td> 10:20</td>
<td> Joana</td>
</tr>
<tr> <! tag com alinhamento a esquerda-padrão>
<td> Março</td>
<td> 10</td>
<td> 11:30</td>
<td> Ana</td>
</tr>
</table>
</body>
</html>
Visualizada
num navegador fica assim:
Agora,
um exemplo de uma tabela com valor de 30 pixel para os atributos Cellpadding e
Cellspacing.[
Na
sintaxe:
<html>
<head>
<title> Cellpadding e
Cellspacing</title>
</head>
<body>
<p
align="center"> Cellpadding e Cellspacing</p>
<table
border="1" width="300" align="center"
Cellpadding="30"
Cellspacing="30">
<tr
align="center">
<!th
é a tag dos títulos, em que o texto aparece destacado em negrito>
<th > Mês</th>
<th
> Dia</th>
<th
> Horas</th>
<th
> Nome</th>
</tr>
<tr
align="center">
<td> Janeiro</td>
<td> 20</td>
<td>
09:20</td>
<td>
Jaco</td>
</td>
</tr>
<tr
align="center">
<td> Fevereiro</td>
<td> 25</td>
<td>
09:50</td>
<td>
João</td>
</tr>
<tr
align="center">
<td>
Março</td>
<td>
07</td>
<td>
10:20</td>
<td>
Joana</td>
</tr>
<tr> <! tag com
alinhamento a esquerda-padrão>
<td> Março</td>
<td>
10</td>
<td>
11:30</td>
<td>
Ana</td>
</tr>
</table>
</body>
</html>
Visualizada
num navegador fica assim:
Agora
uma tabela com o Cellpadding=0 e o Cellspacing=30
Na
sintaxe:
<html>
<head>
<title> Cellpadding e
Cellspacing</title>
</head>
<body>
<p
align="center"> Cellpadding e Cellspacing</p>
<table
border="1" width="300" align="center"
Cellpadding="0" Cellspacing="30">
<tr
align="center">
<!th
é a tag dos títulos, em que o texto aparece destacado em negrito>
<th > Mês</th>
<th
> Dia</th>
<th
> Horas</th>
<th
> Nome</th>
</tr>
<tr
align="center">
<td> Janeiro</td>
<td> 20</td>
<td>
09:20</td>
<td>
Jaco</td>
</td>
</tr>
<tr
align="center">
<td> Fevereiro</td>
<td> 25</td>
<td>
09:50</td>
<td>
João</td>
</tr>
<tr
align="center">
<td>
Março</td>
<td>
07</td>
<td>
10:20</td>
<td>
Joana</td>
</tr>
<tr> <! tag com
alinhamento a esquerda-padrão>
<td> Março</td>
<td>
10</td>
<td>
11:30</td>
<td>
Ana</td>
</tr>
</table>
</body>
</html>
Visualizada:
Agora
uma tabela com o Cellpadding=30 e o Cellspacing=0
Na
sintaxe:
<html>
<head>
<title> Cellpadding e
Cellspacing</title>
</head>
<body>
<p
align="center"> Cellpadding e Cellspacing</p>
<table
border="1" width="300" align="center"
Cellpadding="30" Cellspacing="0">
<tr
align="center">
<!th
é a tag dos títulos, em que o texto aparece destacado em negrito>
<th > Mês</th>
<th
> Dia</th>
<th
> Horas</th>
<th
> Nome</th>
</tr>
<tr
align="center">
<td> Janeiro</td>
<td> 20</td>
<td>
09:20</td>
<td>
Jaco</td>
</td>
</tr>
<tr
align="center">
<td> Fevereiro</td>
<td> 25</td>
<td>
09:50</td>
<td>
João</td>
</tr>
<tr
align="center">
<td>
Março</td>
<td>
07</td>
<td>
10:20</td>
<td>
Joana</td>
</tr>
<tr> <! tag com
alinhamento a esquerda-padrão>
<td> Março</td>
<td>
10</td>
<td>
11:30</td>
<td>
Ana</td>
</tr>
</table>
</body>
</html>
Visualizada:
Mais
exemplos, na sintaxe:
<html>
<head>
<title> Cellpadding e
Cellspacing</title>
</head>
<body>
<table
border cellpadding="8">
<tr>
<td>
teste1</td> <td> teste2</td>
<td> teste3</td>
</tr>
<tr>
<td> teste4</td> <td>
teste5</td> <td> teste6</td>
</tr>
</table>
</body>
</html>
Bem aqui vimos vários modelos de tabelas com seus atributos Cellpadding e Cellspacing com valores variados.
Espero que entenderam bem a explicação desse conteúdo.
Até o próxima postagem, que vai ser bem interessante!!!
Nenhum comentário:
Postar um comentário