Nosso assunto de hoje, dando sequencia ao tutorial xhtml, será sobre tabelas. Vamos falar um pouco sobre tabelas e como tornar nossa tabela acessÃvel.
Muita gente tem horror a tabelas quando o assunto é ‘tableless’, dizem que tabela não deve mais ser utilizadas etc, mas poucos sabem que tabelas devem sim ser utilizadas, porém, com o seu real objetivo que é de mostrar, apenas, dados tabulares e não para criação de layouts.
Para se montar uma tabela em html – xhtml, devemos conhecer suas tags e para que cada uma delas servem.
» Continue lendo Tutorial xHTML #02 – Tabelas AcessÃveis
· · · · ·
Falar sobre formulários acessÃveis se tornou meio difÃcil por ser um assunto que cada um poderá interpretar de uma maneira diferente. Alguns dizem que o correto é criarmos o formulário utilizando listas desordenadas (ul), outros já falam que o correto seria utilizarmos parágrafos (p). Utilizar <p> ou <ul>? Escolha um e seja feliz. 
Para que um formulário seja realmente acessÃvel, precisamos estar cientes da existência de algumas tags básicas e para que elas servem. Vamos a elas:
- form: cria uma área para a entrada de dados podendo conter campos de texto, checkboxes, radio-buttons etc.
- fieldset: utilizado para agrupar elementos no formulário. ex: dados pessoais, dados profissionais etc.
- legend: define um nome para cada fieldset criado
- label: define um “label” para um determinado controle.
- input, checkbox e radiobutton: elementos de um form.
» Continue lendo Criando Formulários AcessÃveis
· · · · ·
Quem nunca ficou irado ao ter que preencher um formulário e só conseguir clicar em cima da bolinha – radio button – de cada opção para fazer sua escolha? Sim, isso realmente irrita. Para isso que existe o atributo “for” para os nossos form label. Ok, o que seria esse tal de “for”.
Quando criamos um formulário temos que ficar atentos a, no mÃnimo, três tags fundamentais para a marcação correta do form, são elas: <form>, <label> e a nossa famosa <input>.
- <form> – indicará o inÃcio e fim do nosso formulário;
- <label> – irá conter todo o respectivo texto de cada campo do formulário;
- <input> – nosso formulário em si (campo texto, radio buttons etc).
» Continue lendo Formulário utilizando “Label” e o atributo “For”
· · · · ·
A propriedade border-collapse tem como objetivo dividir ou não as bordas das tabelas via CSS e possui os seguinte atributos: collapse e separate.
Por padrão, toda tabela renderizada recebe o atributo separate mesmo que não seja especificado no CSS da página, ou seja, cada elemento possui sua própria borda.
Exemplo de tabela com o atributo separate.
<table style="border:solid 1px #00f">
<tbody>
<tr>
<td style="border:solid 1px #0f0">célula 1</td>
<td style="border:solid 1px #0f0">célula 2</td>
<td style="border:solid 1px #0f0">célula 3</td>
</tr>
</tbody>
</table>
| célula 1 |
célula 2 |
célula 3 |
Exemplo de tabela com o atributo collapse.
<table style="border:solid 1px #00f;border-collapse:collapse">
<tbody>
<tr>
<td style="border:solid 1px #0f0">célula 1</td>
<td style="border:solid 1px #0f0">célula 2</td>
<td style="border:solid 1px #0f0">célula 3</td>
</tr>
</tbody>
</table>
| célula 1 |
célula 2 |
célula 3 |
Outras dicas são bem vindas nos comentários
· · · · ·
A algum tempo atrás falei sobre a importância de se utilizar acrônimos em web sites e hoje vim falar sobre as abreviações <abbr>.
Abreviação já se auto-explica o que é então vou ser rápido e explicar a diferença entre abreviações e acrônimos.
Para muitos, ou até para a maioria, usuários internet tudo é abreviação mas na realidade não é a verdade. Acrônimos são palavras formadas por letras ou sÃlabas iniciais de uma locução – Ex.: CSS = Cascading Style Sheets – enquanto abreviação é uma forma curta da palavra excrita – Ex.: Av. = Avenida.
No xHTML, a utilização da tag abrr se dá na seguinte forma:
<abbr></abbr>
» Continue lendo Abreviações em xHTML
· · · · ·
