Os quadros
Utilização de quadros
É muitas vezes útil apresentar informações melhor estruturadas do que com listas. Os quadros permitem exibi-las em linhas e colunas. Os quadros são definidos como sequências de linhas e devem respeitar as seguintes regras seguintes:O quadro é enquadrado pelas tags <TABLE> e </TABLE> e o título do quadro é enquadrado por <CAPTION> </CAPTION>. Cada linha é enquadrada por <TR> </TR> (Table Row, linha do quadro em português). As células de cabeçalho são enquadradas por <TH> </TH> (Table Header e, em português, cabeçalho de quadro). As células de valor são enquadradas por <TD> </TD> (Table Data, dados do quadro em português)
Veja abaixo um exemplo de quadro HTML:
<TABLE BORDER="1">
<CAPTION> Eis o título do quadro</CAPTION>
<TR>
<TH> Titulo A1 </TH>
<TH> Titulo A2 </TH>
<TH> Titulo A3 </TH>
<TH> Titulo A4 </TH>
</TR>
<TR>
<TH> Titulo B1 </TH>
<TD> Valor B2 </TD>
<TD> Valor B3 </TD>
<TD> Valor B4 </TD>
</TR>
</TABLE>
Este código resulta no seguinte:
| Título A1 | Título A2 | Título A3 | Título A4 |
|---|---|---|---|
| TítuloB1 | Valor B2 | Valor B3 | Valor B4 |
Os atributos
|
Atributo | Balizas às quais se aplica | Valor | Efeito Visual |
|---|---|---|---|
| ALIGN | THEAD
TBODY TH TR TD | CENTER
LEFT RIGHT JUSTIFY |
|
| CAPTION | TOP
BOTTOM |
Acima Abaixo | |
| VALIGN
(alinhamento vertical) | THEAD
TBODY TH TR TD | TOP
MIDDLE BOTTOM |
No alto Ao meio Embaixo |
| BORDER=n | TABLE | Dimensão da borda | |
| CELLPADDING=n | TABLE | Espaçamento de No. pixéis entre o conteúdo das células e a borda | |
| CELLSPACING=n | TABLE | Espessura da grelha interna | |
| FLOAT | TABLE | RIGHT
LEFT | Posição do texto que seguirá </TABLE> |
| COLS=n | TABLE | Números colunas | |
| FRAME
(controla os elementos individuais de enquadramento do quadro)
| TABLE | NONE
TOP BOTTOM TOPBOT SIDES ALL |
Nenhuma
|
| RULES
(controla os elementos da grelha das células)
| TABLE | NONE
BASIC ROWS COLS ALL |
Nenhum Linha Coluna Todos |
| COLSPAN | THEAD
TBODY TH TR TD | Profusão das células sobre as colunas adjacentes | |
| ROWSPAN | THEAD
TBODY TH TR TD | Profusão das células sobre as linhas adjacentes |
Veja também
- Quadro html
- Espaço em html - Dicas - Linguagens
- Paragrafo html - Artigos
- Como tirar o sublinhado do link html - Dicas - HTML
- Como colocar icone no site html - Dicas - Webmaster
- Formulario html - Artigos
Este documento, intitulado 'Os quadros', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.
