Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Telemedia2006 T2

    Enviado por

    Cristyan Oliveira
    3 visualizações8 páginas

    Título original

    Telemedia2006-T2

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    3 visualizações8 páginas

    Telemedia2006 T2

    Enviado por

    Cristyan Oliveira

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 8

    Introdução ao HTML

    Tabelas

    Grupo de Comunicações por Computador

    Sumário

    Tabelas
    Linhas e células;
    Bordas;
    Espaçamento
    Colspans e Rowspans

    1
    Tabelas
    A etiqueta <table> é usada para definir
    tabelas.
    As tabelas são constituídas por linhas e por
    células.
    A etiqueta <tr> que significa table row é usada
    para definir uma linha.
    A etiqueta <td> que significa table data é usada
    para definir uma célula.

    Tabelas - Exemplo
    <html>
    <head>
    <title>Exemplo de um tabela</title>
    </head>
    <body>
    <table>
    </tr> <tr> <td>João </td> <td>15</td>
    </tr> <tr> <td>António </td> <td>12</td>
    </tr> <tr> <td>Ana </td> <td>11</td>
    </tr> <tr> <td>Henrique</td> <td>8 </td>
    </table>
    </body>
    </html>

    2
    Tabelas - Exemplo
    <html>
    <head>
    <title>Student Results</title>
    </head>
    <body>
    <table border=”1”>
    <tr> <td>João </td> <td>15</td> </tr>
    <tr> <td>António </td> <td>12</td> </tr>
    <tr> <td>Ana </td> <td>11</td> </tr>
    <tr> <td>Henrique</td> <td>8 </td> </tr>
    </table>
    </body>
    </html>

    Tabelas - Cabeçalhos

    As tabelas podem ter cabeçalhos. Para isso


    usa-se a etiqueta <th> que significa table
    header.
    Os cabeçalhos podem ser usados nas linhas
    e/ou nas colunas.

    3
    Tabelas - Cabeçalhos
    <html>
    <head>
    <title>A table with headers</title>
    </head>
    <body>
    <table border=”2”>
    <tr> <th>Medias</th> <th>Static</th> <th>Dynamic</th> </tr>
    <tr> <th>Captured</th> <td>Bitmaps</td> <td>Video</td> </tr>
    <tr> <th>Sintetized</th> <td>Text</td> <td>Audio</td> </tr>
    </table>
    </body>
    </html>

    Tabelas - Espaçamentos
    Cellspacing:
    Espaçamento entre as células da tabela.

    4
    Tabelas - Espaçamento
    <html>
    <head>
    <title>Media Types</title>
    </head>
    <body>
    <table border=”2” cellspacing=”10”>
    <tr> <th>Medias</th> <th>Static</th> <th>Dynamic</th> </tr>

    <tr> <th>Captured</th> <td>Bitmaps</td> <td>Video</td> </tr>

    <tr> <th>Sintetized</th> <td>Text</td> <td>Audio</td> </tr>


    </table>
    </body>
    </html>

    Tabelas - Espaçamentos
    Cellpadding:
    Espaçamento entre o conteúdo e o limite das
    células.

    5
    Tabelas - Espaçamento
    <html>
    <head>
    <title>Media Types</title>
    </head>
    <body>
    <table border=”2” cellspacing=”10” cellpadding=”10” >
    <tr> <th>Medias</th> <th>Static</th> <th>Dynamic</th> </tr>
    <tr> <th>Captured</th> <td>Bitmaps</td> <td>Video</td> </tr>
    <tr> <th>Sintetized</th> <td>Text</td> <td>Audio</td> </tr>
    </table>
    </body>
    </html>

    • As linhas e as colunas podem ser estendidas e


    ocupar o espaço equivalente a duas ou mais
    células.

    • Os atributos:
    • colspan - permite criar uma célula que ocupa
    várias colunas;

    • rowspan - permite criar uma célula que ocupa


    várias linhas.

    6
    Tabelas - Colspan
    <html>
    <head>
    <title>Exemplo de um tabela com bordas</title>
    </head>
    <body>
    <table border=”2” cellspacing=”10” cellpadding=”10” >
    <tr> <th colspan=”3”>Medias</th> </tr>
    <tr> <th>Captured</th> <td>Bitmaps</td> <td>Video</td>
    </tr>
    <tr> <th>Sintetized</th> <td>Text</td> <td>Audio</td> </tr>
    </table>
    </body>
    </html>

    Tabelas - Rowspan
    <html>
    <head>
    <title>Types of Medias</title>
    </head>
    <body>
    <table border=”2” cellspacing=”10” cellpadding=”10” >
    <tr> <th></th> <th>Static</th> <th>Dynamic</th> </tr>
    <tr> <th rowspan=”2”>Medias</th> <td>Bitmaps</td> <td>Video</td> </tr>
    <tr> <td>Texto</td> <td>Audio</td> </tr>
    </table>
    </body>
    </html>

    7
    Tabelas - Células Vazias
    <html>
    <head>
    <title>Types of Medias</title>
    </head>
    <body>
    <table border=”2” cellspacing=”10” cellpadding=”10” >
    <tr> <th>&nbsp</th> <th>Static</th> <th>Dynamic</th> </tr>
    <tr> <th rowspan=”2”>Medias</th> <td>Bitmaps</td> <td>Video</td> </tr>
    <tr> <td>Texto</td> <td>Audio</td> </tr>
    </table>
    </body>
    </html>

    Você também pode gostar