Tabelas

12
Tabelas

description

Aula para o 6to semestre da FAFIT. Aula de HTML sobre tabelas.

Transcript of Tabelas

Page 1: Tabelas

Tabelas

Page 2: Tabelas

Tabelas

    Utilizamo-as apenas para mostrar dados tabulares, ex.: excel. Não deve ser usada para ajudar na composição do layout. A não utilização de tabelas para adequar objetos na tela chama-se tableless.

Page 3: Tabelas

TAGS    Necessitamos basicamente de 3 tags para criar uma tabela:

<table>

    <tr>            <td>  </td>                        </tr>

</table>

Page 4: Tabelas

<table>    Nossa tag <table> serve para começar e finalizar a tabela. Sempre será a primeira a ser aberta e a última a ser fechada.

Page 5: Tabelas

<tr>    Significa "table row" - linha de tabela - começa e termina e uma linha horizontal da tabela. 

Page 6: Tabelas

<td>    Significa "table data" - dados da tabela. começa e termina cada célula contida nas linhas da tabela. 

Page 7: Tabelas

Cabeçalho e rodapé    A tabela nos da capacidade de criarmos cabeçalho e rodapé. Para isso usamos as tags <thead> e <tfooter> não esquecemos de usar <tbody> para o corpo da tabela.

Page 8: Tabelas

Tabela    A tabela nos da capacidade de criarmos cabeçalho e rodapé. Para isso usamos as tags <thead> e <tfooter> não esquecemos de usar <tbody> para o corpo da tabela.

Page 9: Tabelas

Tabelaex.: www.suissacorp.com.br/fafit/aula/tabela.html

Page 10: Tabelas

Atributosbackground: permite-nos colocar um fundo para a tabelaborder: define o valor da borda em pxbordercolor: define a cor da bordabgcolor: define a cor de fundowidth: largura, pode ser em, px ou %height: altura, pode ser em, px ou %cellpadding: margem interna da célula, em pxcellspacing: margem externa da célula, em pxalign: alinhamento horizontalvalign: alinhamento verticalcolspan: utiliza o espaço setado em colunasrowspan: utiliza o espaço setado em linhas

Page 11: Tabelas

ExercícioFazer uma tabela igual:

Page 12: Tabelas

Exercício 2Fazer uma tabela igual: