Paragraphless : Tabelas por Parágrafos? Nãão!

Ok meu site tem muitas tabelas e quero fazer um layout mais moderno, dentro “dos padrões”.

Aqueles itens que ficavam dentro de uma tabelas? Fácil, troco por um parágrafo.

Não, não faça isto. Ao fazer isto você estará removendo um monte de código inútil e sem sentido TABLE, THEAD, TR, TD, TH pra colocar um P, mas este P também não faz sentido. Seu código ficou mais limpo, mas estas duas imagens lado a lado NÃO são um parágrafo. Não faz sentido ter um parágrafo ai.

Use o que for necessário, um div provavelmente. E no css desse div coloque simplesmente display:inline-block . Isto dirá ao navegador que ao renderizar a página, não deve ser dado uma quebra de linha no final.

Simples?

Também achei, mas foi difícil de descobrir, dica do site mighelalho

Compartilhe:
  • Google Bookmarks
  • email
  • Print
  • del.icio.us
  • Digg
  • Technorati
  • Reddit
  • Rec6
  • StumbleUpon
  • Facebook
  • PDF
  • Tumblr
  • Twitter

6 doses de saquê

Teusmaagosto 2nd, 2010 at 9:38

Uia, boa dica e parabéns pelo novo layout. Ficou bacanão. \o/

Gran Kainagosto 2nd, 2010 at 10:38

obrigado, é inspirado no desenho Mushishi =)

Miguel Alhoagosto 4th, 2010 at 12:51

Olá, obrigado pela menção. Apenas devo avisar que o uso do inline-block nem sempee resulta, especialmente com os browsers mais antigos (pré IE-8?) especialmente de serie IE, uma vez que não é propriamente um valor válido para o display, mas que a maioria sabe implementar.

O inline-block permite desenhar os elementos como elementos block-level, mas posicioná-los “in-line” como os restantes elementos inline (span, b, etc). Uma situação que por vezes é problemático em no uso em listas. Vale a pena estudar um pouco os floats, que serão a forma mais “standard” de conseguir a disposição correcta, e nunca esquecer de testar! :D

Abraço

Edsonagosto 4th, 2010 at 14:01

Ola Miguel, obrigado pela visita =)

Quem vive na área sabe como é difícil lidar com os códigos cheios de tabelas desnecessárias e lixo de código.

E o IE ainda é referência? Brincando rs. Eu as vezes até esqueço que ele existe, nos lugares que tenho trabalhado a tática é ignorar o IE o que me deu alguns anos a mais de vida com certeza hehe. Pra quem faz sites onde o IE tem que funcionar é imprescindível testar um pouco nos navegadores tradicionais e MUITO no IE antes de liberar ^^

Obrigado pela participação!

Miguel Alhoagosto 23rd, 2010 at 7:22

Yeah, infelizmente, muitas empresas ainda o tem, seja por suportar software legado, seja pelo custo da actualização (imagina 1000, 2000, ou 5000 PCs a precisar de actualização – mesmo q remotamente actualizados, há os custos de largura de banda e ainda o de se algo correr mal :P )

Na verdade, nem é de todo “difícil” suportar o IE6. é uma stylesheet independente (condicional), uma dose de paciência, e muitos hacks :D . Isso e ter consciência de que não há milagres e de que nem tudo é possível :P

GranKainagosto 23rd, 2010 at 8:12

Outra possibilidade é usar o css browser selector (csb), ou um css separado e (csb)

CSB:
http://rafael.adm.br/css_browser_selector/

Diga!

Seu comentário