Criar tabelas com CSS

[Tiago Cardoso 1]

Olá, tenho formulários e gostaria de formatá-los com CSS(lógicamente sem tabelas) e o grande porém é a utilização de Criar tabelas com CSS, procurei muito sobre isso e não consegui achar nada palpável, alguém poderia me dar um exemplo ou algo do tipo...

 

<table>	<tr>		<td>1		</td>		<td>2		</td>		<td>3		</td>		<td>4		</td>	</tr>	<tr>		<td>1		</td>		<td>2		</td>	</tr></table>

gostaria disso em css, ou seja, com divs e display: table, display: table-cell;

 

Obrigado pela atenção...

[Guilherme Rambo 4]

PKTIAGO, você naum precisa "simular" tabelas usando divs. Se for dados tabulares, usa tabelas pow.

 

http://icant.co.uk/csstablegallery/ - Ali tem uns exemplos de css para tabelas

 

[]'s

[Tiago Cardoso 1]

Muito legal o link que passou, mas no meu caso as vezes tenho que usar figuras transparentes, e acho isso muito amador, por isso preferiria aprender a fazer em css, pois assim, acho que vai ficar mais limpo o cod e leve...

[Poe 0]

PKIAGO, eu não entendi bem o que você está querendo fazer.

 

Você quer fazer a estrutura do seu site em CSS ou fazer uma tabela virar aquele conjunto de DIVs.

 

Por exemplo, ao invés de você fazer isso:

 

<table>	<tr>		<td>1		</td>		<td>2		</td>		<td>3		</td>		<td>4		</td>	</tr>	<tr>		<td>1		</td>		<td>2		</td>	</tr></table>

Você quer fazer isso?

 

<div id="container">	<div class="linha">		<div class="celula">1		</div>		<div class="celula">2		</div>		<div class="celula">3		</div>		<div class="celula">4		</div>	</div>	<div class="linha">		<div class="celula">1		</div>		<div class="celula">2		</div>		<div class="celula">3		</div>		<div class="celula">4		</div>	</div></div>

Para continuar a conversa responde isso aí! ;)

 

 

Porque se a resposta for sim, precisamos conversar aqui sobre o que significa trabalhar com padrões, pois a segunda "versão" do código, em DIVs está errada em seu conceito! ;) É preciso entender conceitos aqui de semântica para HTML e também sobre os padrões web.

 

Abraços.

[Tiago Cardoso 1]

Isso mesmo cara, eu desejo "sair das tabelas" tableless(quando for necessário devido aos padrôes), pois em um formulário a meu ver posso criar uma "tabela" com CSS, entende?

[Poe 0]

Então temos um problema de compreensão da sua parte, bem comum pra quem tá querendo entrar "na onda do CSS".

 

O que acontece, em primeiro lugar, é que você tem que entender que em alguns lugares as tabelas sempre estarão presentes. Você pode ter feito uma super cara de interrogação agora, mas para trabalhar com CSS da "forma certa" você precisa entender o que significa trabalhar com os tais padrões.

 

Tabela você sempre vai usar para dados tabulares. Se você tem dados dessa forma:

 

[Alimento][Cor][Tipo][Gosta(S/N)]

[Cenoura][Laranja][Raiz]

[Alface][Verde][Hortaliça]

[Hamburguer][Marrom][Carne Processada]

[Fígado][Ocre][Carne][N]

 

Você tem uma matriz (programadores chamariam de STRINGS) aí em cima, correto? Então, você acabou de ter um dado tabular.

 

A disposição correta disso em seu código HTML é:

 

<table width="100%" border="0" cellspacing="0" cellpadding="0">  <caption>	Tabela de Exemplo  </caption>  <tr>	<th scope="col">Alimento</th>	<th scope="col">Cor</th>	<th scope="col">Tipo</th>	<th scope="col">Gosta (S/N) </th>  </tr>  <tr>	<td>Cenoura</td>	<td>Laranja</td>	<td>Raiz</td>	<td>S</td>  </tr>  <tr>	<td>Alface</td>	<td>Verder</td>	<td>Hortaliça</td>	<td>S</td>  </tr>  <tr>	<td>Hambúrguer</td>	<td>Marrom</td>	<td>Carne</td>	<td>S</td>  </tr>  <tr>	<td>Fígado</td>	<td>Ocre</td>	<td>Carne</td>	<td>N</td>  </tr></table>

Agora, se você usa tabelas para fazer layout, então daí você vai entrar no lance do tableless, que na verdade é um resumão de conceitos que quer dizer que você vai deixar de usar tabelas para fazer layout, não que a tag <table> deixou de ter sua função - na verdade, o que acontece é que você vai usá-la, assim como todas as outras, para o que realmente elas foram feitas, ou seja, semântica para HTML.

 

Tem um monte de links que ensinam esses conceitos corretos aqui neste fórum. Acho que é primeiro absorvendo os conceitos e depois indo para a codificação que as coisas vão ficar bem claras para você! :D

 

Quanto a formulários, você pode fazer isso com formulários dentro dos padrões. Do mesmo modo que você vai usar as outras tags da "forma correta", você vai usar as tags certas de formulário para as suas funções próprias.

 

No site do Maujor tem um tutorial que explica direitinho como fazer isso, falando até mesmo de acessibilidade dentro de formulários. Existem outros links interessantes, mas já é um começo esse aí! :D É a melhor referência em um primeiro momento.

 

Um abraço!

[Tiago Cardoso 1]

Não, não cara, acho que você não me entendeu...Pois sei muito bem que dados tabulares, como o nome diz, são dados que "tenho" que usar com tabelasJá layout não se discute, tabelas não foram feitas para isso...A minha pergunta é em um formulário, que possuo muitos campos, lado a lado, de vez eu ficar usando figuras transparentes(que acho muito amador), eu gostaria de usar um css que "travasse" um layout para mim, entende?

[Poe 0]

Opa! Então, era isso que eu tinha perguntado antes.Dá uma olhada, eu respondi essa parte dos formulários:

No site do Maujor tem um tutorial que explica direitinho como fazer isso, falando até mesmo de acessibilidade dentro de formulários. Existem outros links interessantes, mas já é um começo esse aí! biggrin.gif É a melhor referência em um primeiro momento.

Agora, um dia aí a gente discutiu sobre formulários e me mandaram esse link, salvei porque é uma ótima referência:http://jeffhowden.com/code/css/forms/Espero que ajude! :D

[Tiago Cardoso 1]

Caramba "pokinha" coisa para ler, mas entendi o propósito, porém ainda não sei como fugir das figuras transparentes, pois imagine um formulário de mais ou menos uns 20 campos(text,select,radio,etc), e eu queira formatálos de modo assim:

 

Nome - campo, Nome - campo, Nome - campo

Nome - campo, Nome - campo

Nome - campo, Nome - campo, Nome - campo

Nome - campo, Nome - campo, Nome - campo, Nome - campo, Nome - campo

 

OBS: A vírgula(","), simboliza mesma linha!

 

Como faço para formatá-los sem imagem e colspan???

[Poe 0]

Você precisa entender como a informação desse seu formulário se classifica. Como fazer? Só vendo um exemplo prático pra gente se aproximar no diálogo! hehe Mas você tem a seguinte estrutura base para formulários:

<form id="form1" name="form1" method="post" action="">  <fieldset>  <legend>Dados cadastrais </legend>  <label for="nome">Nome</label>  <input type="text" id="nome" />  <label for="email">E-mail</label>  <input type="text" id="email" />  </fieldset>  <fieldset>  <legend>Literatura</legend>  Gosta de que genêro:  <input type="radio" value="aventura" id="literautura" />  <label for="aventura">aventura</label>  <input type="radio" value="scifi" id="literatura" />  <label for="scifi">sci-fi</label>  <input type="radio" value="terror" id="literatura" />  <label for="terror">terror</label>  </fieldset>  <input type="submit" value="Submit" /></form>

Com essa estrutura você consegue sambar, pode usar parágrafos e afins. Para personalizar daí o layout é com você, sendo que você pode colocar em posições distintas, aplicar backgrounds para cada um e fazer o que sua imaginação permitir! :D Recomendo que leia todo o texto lá que vai economizar explicação aqui. Na verdade, já está dito, pra que falar outra vez? rs

[Tiago Cardoso 1]

isso então você me diz que neste exemplo http://www.quatter.com/netdental/teste.htm eu consigo formatá-lo só com elementos de formulários(label, input, fieldset)?

[Giovani 104]

Sim PKTIAGO, você consegue fazer isso sim!!!

[Tiago Cardoso 1]

ok, estou tentando, quero ter o mesmo efeito que está no link, só que sem imagens, quando tiver pronto eu posto...

[Poe 0]

Opa! Então, é só você mexer com posicionamento e com os "display" dos objetos. :D Como eu disse, os links que postei te darão uma ótima mão.Abraço!

[Tiago Cardoso 1]

Pois é eu li e estou lendo, pode deixar, tá ficando legal, muito mais limpo...

[Edultra 13]

Ja fiz isso antes usando css para criar um menu, voce pode sim utilizar css para criar tabelas usando <ul> <li></li></ul> e descrevendo no arquivo css o tamanho da tabela (width/height) e usando o comando display=inline tenho até um exemplo so que poderia passar por e-mail, pois to no trampo e aqui bloquearam pra baixar arquivos, caso queira me passe uma mensagem achei um conteudo no maujour parecido com o que usei segue abaixo o link:

http://www.maujor.com/w3ctuto/layout.html

Porem neste exemplo é possivel criar apenas algumas colunas, assim que chegar em casa posto o codigo do meu css que utilizei para criar a tabela.

 

Espero ter lhe ajudado.

[Tiago Cardoso 1]

Ok Edultra estou lendo seu link...

 

E quanto ao que fiz...

 

Vejam no exemplo:

 

http://localhost/netdental2/teste.htm

 

Agora pergunto-lhes como por exemplo eu alinharia o campo "Rua" com o "SobreNome"?

 

Teria algum jeito automático ou só na "mão"?

 

Obrigado

[Poe 0]

A gente não vai conseguir acessar a sua máquina. rs

HTTP://LOCALHOST

lolDá um printscreen e publica a imagem! :D

[Tiago Cardoso 1]

opa, erro meu:

 

http://www.quatter.com/netdental/teste.htm

[Poe 0]

Tem sim como fazer isso, viu? Você só precisar blocar e organizar a informação do seu formulário.

 

Não é preciso colocar um campo FIELDSET se você não possui grupos de informação nesse formulário. O FIELDSET é para organizar formulários muito grandes.

 

No seu caso só colocando as labels e seus campos já ajuda.

 

Agora é só dar tamanho para seus elementos e brincar com o posicionamento (margins e afins).

 

Um exemplo:

 

form {width: 300px;}label {width: 100px;font-size: 11px;margin: 0 5px 0 0;display: block;float: left;}input {width: 180px;float: left;}

Se você organizou direito acho que vai estar OK (não testei, viu?).

 

Abraço.