05 01 tabelas

TABELAS

HTML

ELEMENTOS

<TABLE><TR><TD></TABLE>

INICIO DA TABELA

FIM DA TABELA

ELEMENTOS

<TABLE><TR><TD></TABLE>

INICIO DE UMA LINHA DA TABELA(TABLE ROW = <TR>)

ELEMENTOS

<TABLE><TR><TD>Célula 1</TD></TR></TABLE>

Conteúdo de uma célulaTD = TABLE DATA

ELEMENTOS

<TABLE><TR><TD>Célula 1</TD><TD>Célula 2</TD></TR></TABLE>

INICIO DE UMA LINHA DA TABELA

ELEMENTOS<TABLE><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>

Exercício

Crie a seguinte tabela:

Janeiro 100

Mês Poupança

Fevereiro 110

Exercício

Crie a seguinte tabela:

Janeiro 100

Mês Poupança

Fevereiro 110

Substituir:<td>Mês</td>Por<th>Mês</th>

ATRIBUTOS

DAS CÈLULAS ou da TABELA

ALIGN• Left• Center• Right

<html><table border=“1” align=“right”> <tr>

<th>Mês</th><th>Poupança</th>

</tr><tr>

<td>Janeiro</td><td>100 Eur</td>

</tr><tr>

<td>Fevereiro</td><td>70 Eur</td>

</tr></table></html>

ATRIBUTOSDA TABELA• BORDER=“NONE”• BORDER=n



</tr><tr>


</tr><tr>



ATRIBUTOSDA TABELA• ALIGN=“RIGHT”• ALIGN=“CENTER”• ALIGN=“LEFT”



</tr><tr>


</tr><tr>



ATRIBUTOS<html><table border=“1” align=“right”> <tr>


</tr><tr>


</tr><tr>



Th = Table Header

ATRIBUTOSDAS CÉLULAS• Th• Td



</tr><tr>


</tr><tr>



Th = Table Header

Td = Table Data




</tr><tr>


</tr><tr>



TD = Table Data




</tr><tr>


</tr><tr>



<TR> = TABLE ROW = LINHA DA TABELA




</tr><tr>


</tr><tr>



<TR>= Nova linha da Tabela



</tr><tr>


</tr><tr>




1ª e 2ª Célula da 2ª Linha



</tr><tr>


</tr><tr>




Fim da 2ª Linha



</tr><tr>


</tr><tr>




Fim da Tabela

ExercícioCrie a seguinte tabela com e sem linhas:

Solução<table cellspacing="0" cellpadding="3" border="1" width="400"

align="center"> <tr>

<td colspan="2" align="center"><font size="5"><b><i>Fresh Fruits</i></b></font>

</td> </tr> <tr> <td>It has long been known that a diet that includes at least a few servings of

fresh fruit every day will help keep you healthy, fit and trim.</td> <td><img src="fruitbowl.gif" width="170" height="91" border="0"

alt="Fruitbowl"></td> </tr> </table>

CABEÇALHOS HORIZONTAIS<table border="1"><tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>

CABEÇALHOS VERTICAIS<table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td></tr><tr> <th>Telephone:</th> <td>555 77 854</td></tr><tr> <th>Telephone:</th> <td>555 77 855</td></tr></table>

THEAD, TFOOT, TBODY<body >

<table border=1 rules="groups">

<thead><tr><th>Nome</th><th>Apelido</th></tr></thead>

<tbody><tr><td>Jorge</td><td>Borges</td></tr><tr><td>Lois</td><td>Griffin</td></tr><tr></tbody>

<tfoot><th>Julio</

th><th>Ferreira

</th></tfoot></table></body>

ATRIBUTOS• BORDER• BORDER = NONE• BORDER = VALOR

<TABLE BORDER>


CELLSPACING – ESPAÇO ENTRE AS CÉLULAS DA TABELA

<TABLE BORDER CELLSPACING=2> <TABLE BORDER CELLSPACING=10>


CELLPADDING – ESPAÇO ENTRE AS CÉLULAS DA TABELA

<TABLE BORDER CELLPADDING=1> <TABLE BORDER CELLPADDING=10>

ATRIBUTOS

• ColSpan – nº de colunas ocupadas por uma célula

• RowSpan – nº de linhas ocupadas por uma célula

Colspan=2

Colspan=2

ATRIBUTOS<TABLE BORDER=2 CELLPADDING=4><TR> <TH COLSPAN=2>Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2>Sales</TH> </TR><TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>

Colspan=2

Colspan=2

MUDAR COR FUNDO CÉLULA<TABLE BORDER=2 CELLPADDING=4><TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR><TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>

ROWSPAN<TABLE BORDER=2 CELLPADDING=4><TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH><TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH> <TD>Claire Horne</TD> <TD>4827</TD> </TR><TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE>

Tabela dentro de Tabela


Tabela Principal


Tabela Interior

Tabela dentro de Tabela<table border="1"><tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></tr><tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td></tr></table>

Tabela dentro de Tabela<table border="1"><tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border="1"> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td></tr><tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td></tr></table>

TABLE BORDERS<TABLE BORDER>

<TABLE BORDER=10>

TABLE CAPTION<table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr></table>

Exercício

ExercícioTR

21

34567

ExercícioTD

61

66666

37

ExercícioTD Colspan=6

Exercício<table cellspacing="0" cellpadding="2"

border="3" > <tr> <td align="center" colspan="6">

ExercícioTD Colspan=6

Exercício<tr> <td align="center" colspan="6">

<font size="5"><i><b>My tech stock picks</b></i></font></td>

</tr>

Exercício

TR TD TD TD TD TD TD

Exercício<tr> <td><font size="2"><b>NAME</b></font></td> <td align="center"><font size="2"><b>SYMBOL</b></font></td> <td align="center"><font size="2"><b>CURRENT</b></font></td> <td align="center"><font size="2"><b>52WK HI</b></font></td> <td align="center"><font size="2"><b>52WK LO</b></font></td> <td align="center"><font size="2"><b>P/E RATIO</b></font></td> </tr>

Exercício

TR

TD TD TD TD TD TD

Exercício<tr> <td>Microsoft</td> <td align="center">MSFT</td><td align="center">86-3/8</td><td align="center">119-15/16</td><td align="center">75-1/2</td><td align="center">56.09</td> </tr>

<tr> <td>Cisco Systems</td> <td align="center">CSCO</td><td align="center">72-1/8</td> <td align="center">82</td> <td align="center">24-13/16</td> <td align="center">400.69</td> </tr>

Exercício

<tr> <td>America Online</td> <td align="center">AOL</td> <td align="center">63</td> <td align="center">95-13/16</td> <td align="center">38-15/32</td> <td align="center">350.00</td> </tr>

Exercício

<tr> <td>Qwest Communications</td> <td align="center">Q</td> <td align="center">44-7/16</td> <td align="center">66</td> <td align="center">25-3/4</td> <td align="center">74.06</td> </tr>

Exercício

<tr> <td>Dell Computers</td> <td align="center">DELL</td> <td align="center">53-59/64</td> <td align="center">59-11/16</td> <td align="center">31-3/8</td> <td align="center">86.97</td> </tr> </table>

Engineering

05 01 tabelas