Tabela dentro de tabela



Para se criar uma tabela dentro de outra tabela, usamos as mesmas tags de uma tabela simples.
E colocamos um código de uma tabela dentro de uma tag <td>.
Vamos ver na prática, na sintaxe.

<html>

<head>

<title> tabela dentro de tabela</title>

</head>

<body>

<CENTER>

<table cellspacing="10" cellpadding="10" border="3">

<tr>

   <td align="center">

    linha 1 coluna 1

   </td>

   <td align="center">

        <table cellspacing="2"

cellpadding="2"border="1">

        <tr>

        <td>célula 1</td>

         <td>célula 2</td>

       </tr>

        <tr>

         <td>célula 3</td>

         <td> célula 4</td>

        </tr>

        <tr>

         <td>célula 5</td>

         <td> célula 6</td>

        </tr>

        </table>

    </td>

</tr>

</table>

</CENTER>

</body>

</html>

Onde está destacado é onde esta o código de uma tabela inserida dentro de outra tabela OU SEJA DENTRO DA TAG <td>.


Fica assim, visualizado:













  
Pode se colocar dentro de qualquer tag <td>.


Como pode ver nesse outro exemplo:

<html>
<head>
<title> TABELA  DENTRO DE TABELA </title>
</head>
<body>
<CENTER>
<table cellspacing="0" cellpadding="0" border="1">
<tr>
   <td align="center">
     <table cellspacing="2"
cellpadding="2"border="1">
        <tr>
        <td>célula 1</td>
         <td>célula 2</td>
       </tr>
        <tr>
         <td>célula 3</td>
         <td> célula 4</td>
        </tr>
        </table>
   </td>
   <td align="center">
        <table cellspacing="2"
cellpadding="2"border="1">
        <tr>
        <td>célula 1</td>
         <td>célula 2</td>
       </tr>
        <tr>
         <td>célula 3</td>
         <td> célula 4</td>
        </tr>
        <tr>
         <td>célula 5</td>
         <td> célula 6</td>
        </tr>
        </table>
    </td>
</tr>
</table>
</CENTER>
</body>
</html>


Visualizado:

 













Outro exemplo, na sintaxe:

<html>
<head>
<title>Tabela dentro de tabela</title>
</head> <body>
<p align="center">Tabela Aninhada ou tabela dentro da Tabela</p>
  <table border="3"width="300" align="center"Cellpadding="5" Cellspacing="5">
<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 colspan="3">
    <table border="3" width="100%">
    </td>
    <td align="center">10:00</td>
    <td align="center">Juliana</td>
   </td>
<tr align="center">
   <td>07:00</td>
   <td>Marcio</td>
</tr>
<tr align="center">
<td>08:30</td>
<td> Walter</td>
</tr>
</table>
</td>
</tr>
<tr align="center">
<td>Fevereiro</td>
<td>15</td>
<td>09:50</td>
<td>Fabrícia</td>
</tr>
<tr align="center">
<td> Março</td>
<td>07</td>
<td>10:20</td>
<td>Joana</td>
</tr>
<tr align="center">
<td>Abril</td>
<td> 10</td>
<td> 11:30</td>
 <td>Mary</td>
</tr>
</table> </body>
</html>



E visualizado:




















Bem aqui vimos bons exemplos de tabelas inseridas.
Agora que já aprendemos como fazer vários tipos de tabelas, 
vamos aprender a colocar cor nelas.
Até a próxima postagem.

Nenhum comentário:

Postar um comentário

Marcadores

etiqueta (29) tutorial (18) meta (16) html (15) a (10) link (10) formatar texto (3) VETOR (2) body (2) caracteres (2) id (2) p (2) vídeo (2) âncora (2) Photoshop (1) address (1) blink (1) blockquote (1) br (1) center (1) div (1) e-mail (1) font (1) frameset (1) h (1) head (1) pre (1) title (1)

paginador numerico