aula 2 - utilizaÇÃo de tabelas
DESCRIPTION
AULA - 2TRANSCRIPT
1 - Utilização de tabelas
A.Tabela
INTRODUÇÃO USANDO TABELAS
Quando se tem um conjunto de dados e precisa-se apresentá-los ordenadamente, uma
boa maneira de fazê-lo é usando as tabelas. Elas são basicamente compostas de
linhas (<tr>...</tr>) e colunas (<td>...</td>) cruzadas entre si. Mas os cabeçalhos da
tabela devem ser apresentados não em “td”, mas em “th”; caso não, alguns códigos
ficam comprometidos a não funcionarem. A tag básica das tabelas é a <table></table>,
ou seja, toda a informação da tabela deve estar contida entre os delimitadores dessa
tag.
Fonte: linha de código
Link: http://www.linhadecodigo.com.br/artigo/3439/introducao-ao-html-usando-tabelas-
em-html.aspx
I.TR – Linha da tabela.
II.TD – Célula da tabela.
III.TH – Título interno centralizado e em negrito.
IIII.CAPTION – Legenda da tabela
IIIII.THEAD – Formata o cabeçalho da tabela.
IIIIII.TFOOT - Formata o corpo da tabela.
IIIIIII.TBODY - Define o corpo de dados de uma tabela.
EXEMPLOS DE TABELAS
<!doctype> <html lang="pt-br"> <head> <title>Trabalhando com tabelas</title> <meta charset="utf-8"> </head> <body> <table border="1"> <caption>Trabalhando com tabelas</caption> <tr> <th>NOME</th> <th>NOTA</th>
<th>FREQU�NCIA</th> </tr> <tr> <td>FULANO</td> <td>10</td> <td>80%</td> </tr> <tr> <td>BELTRANO</td> <td>8</td> <td>85%</td> </tr> <tr> <td colspan="3">Disciplina PPSI I-SI</td> </tr> </table> </body> </html>
<!doctype> <html lang="pt-br"> <head> <title>trabalhando com tabelas</title> <meta charset="utf-8"> </head> <body> <table border="1"> <tr> <th>A</th> <td>B</td> <td>C</td> <td>D</td> </tr> <tr> <th>E</th> <td>F</td> <td>G</td> <td>H</td> </tr> <tr> <th>I</th> <td>J</td> <td>K</td> <td>L</td> </tr> </table> </body> </html>
<!doctype> <html lang="pt-br"> <head> <title>Trabalhando com tabelas</title> <meta charset="utf-8"> </head> <body> <table border="1"> <caption>Tabela de preços</capition> <thead> <tr> <td colspan="4">Produtos saldo zero</th> </tr> </thead> <tbody> <tr> <td>Produto</td> <td>Preço</td> <td>Qtd</td> <td>Total</td> </tr> <tr> <td>Notebook</td> <td>999,99</td> <td>1</td> <td>999,99</td> </tr> <tr> <td>Tablet</td> <td>499,99</td> <td>2</td> <td>999,98</td> </tr> <tr> <td>CelulaR</td> <td>299,99</td> <td>3</td> <td>899,97</td> </tr> </tbody>
<tfoot> <tr> <td colspan="2">Total</td> <td>6</td> <td>2.899,94</td> </tr> </tfoot> </table> </body> </html>