Tabelas

Post on 27-Nov-2014

1.992 views 1 download

description

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

Transcript of Tabelas

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.

TAGS    Necessitamos basicamente de 3 tags para criar uma tabela:

<table>

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

</table>

<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.

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

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

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.

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.

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

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

ExercícioFazer uma tabela igual:

Exercício 2Fazer uma tabela igual: