CSS vs Tables (ou ao contrário...)

ShadeX

Power Member
Passei só para vos deixar esta página linda. CSS vs Tables.

Nunca pensei que alguem tivesse ido tão longe nos seus desgontos com CSS que se desse ao trabalho de documentar a coisa.

E pensava eu que era o unico que gostava de CSS pelos beneficios e não usava CSS-P pelas chatices...
 
Morte às tabelas para layout!

Viva o CSS-P.

Já trabalhei em alguns sites só com CSS e só custa fazer os primeiros. A maior chatice é mesmo colocar o aspecto igual em todos os browsers.

PS: Sites "a sério" com ajuste automático à dimensão da janela, nada de dimensões fixas.
 
Última edição:
um bocadinho cromo mas prontos...

nem acabei de ler pois é mais alguém a precisar de atenção.

Ninguem precisa de fazer sites completamente em CSS, podes usar tabelas.

Se usares
Código:
<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                    <p>
                        <p>
        <a hef="http://www.example.com" title="GOTO example page">example</a>
                        </p>
                    </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
pode ser tão mau como
Código:
<table>
    <tr>
        <td></td>
        <td>
            <a hef="http://www.example.com" title="GOTO example page">example</a>
        </td>
        <td></td>
    </tr>
</table>
eu o que acho mau é tirando a parte da semântica e estrutura usam 149 bytes ou 397 bytes simplesmente para mostrar
Código:
<a hef="http://www.example.com" title="GOTO example page">example</a>
que pesa "curiosamente" 69 bytes. Claro que este número alem do peso simbolico não pesa muito mas se usares 10x numa página e teres um site de 100 páginas sempre é um 69x10x100. Já é qualquer coisa.
Em qualquer um dos casos ainda teriamos que usar css ou outro tipo de decoração.

Quanto á semântica eu entendo como, tentar usar as <tags> HTML o mais correctamente possivel <p> para parágrafos, <div> para dividir blocos de elementos, <ul> para listar itens sem ordem aparente, <dl> para descrição, <a> para links ou anchor, <abbr> para abreviaturas, <h1> e ... para titulos e subtitulos. Básicamente passa por aqui depois tens coisas como o microformats.org que tenta acrescentar um pouco mais tipo se o link <a> pertence uma lista de "tags" "etiquetas" porque não usar o atributo do <a> rel="tag" ou mais ainda o www.gmpg.org/xfn e poderes ter mais tipos de rel="". Claro que nisto de semântica podemos chegar a extremos mas é como tudo na vida. Agora a sua ideia e motivação para mim é correcta e deve ser aplicada.

Ele fala que a Ms com o IE nunca deu muita atenção para as standards pois não, assim como muitas multinacionais nunca deram atenção para quem lhes dá dinheiro, eles sabem que nós precisamos. Mas mudam de atitude quando têm concorrência. Penso que muitas vezes o problemas de modernizar completamente um browser tem haver muito com o que vai para trás e neste caso não é " o que lá vai lá vai" pois muito do que lá vai ainda cá fica. Eles não podem fazer um ie7 completamente novo pois tem muita coisa que suportar para trás. O caso dos DOCTYPE defenidos nas páginas surge um pouco derivado desta confusão, existe um "Quirk mode" e um "strict mode" , http://www.quirksmode.org/css/quirksmode.html, que são diferentes modos dos browsers interpretarem o código.

Isto e muito mais que o guru @ http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx parece ter descoberto e partilhado de um modo critico com a gente.
 
Última edição:
Oh SoundSurfer também dá para fazer tabelas que se ajustem à dimensão da janela...

E não percebi essa dos sites "a sério"...

Eu não me estava a referir às tabelas, mas sim à questão de usar divs com tamanho fixo ou tamanho ajustável, que aumenta o grau de dificuldade de implementação.
E eu uso tabelas, quando realmente necessito de desenhar uma tabela.


Já agora, como adoro o "@media print".
 
Última edição:
<div>
<div>
<div>
<div>
<div>
<div>
<p>
<p>
<a hef="http://www.example.com" title="GOTO example page">example</a>
</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>

Esse exemplo é no mínimo rídiculo :)

Eu faço sites sem tabelas já vai um ano e só há mais dificuldade em o pôr compatível com todos os browsers... agora nunca tive foi tantos divs seguidos... eu e muitos bons templates de sites tableless :)

Mas o mais importante é a acessibilidade... temos de pensar também nas pessoas com dificuldades e também têm direito a ver uma página em condições :)

Podia estar aqui até amanhã, mas cada um sabe de si :) Eu só uso CSS para as minhas páginas e não vou deixar tão depressa.
 
Mas o mais importante é a acessibilidade... temos de pensar também nas pessoas com dificuldades e também têm direito a ver uma página em condições :)

O teu problema não é de acessibilidade e sim de content flow. Um problema que podes arranjar/resolver quer uses tables ou CSS-P.

Se duvidas, larga o linx que poucos usam e vai usar o JAWS+IEn que é o que a maior parte dos invisuais usa. E depois volta aqui e dá a tua opinião.

Mas pegando nesse ponto e mais fundamentalmente no holy grail da separação de conteudo/forma, e já sem ir para tables :

<p><font size="1">This is some text!</font></p>
<p style="font-size : x">This is some text!</p> // onde x=ao tamanho anterior
<p class="classx">This is some text!</p> // onde classx = ao style anterior

Alguem explique a diferença entre uma tag soup e a próxima. Para o user agent. A unica diferença é para os developers que têm menos trabalho na manutenção. O conteudo e apresentação continua tão ligado como antes. Do primeiro para o segundo não poupas cú. Do segundo para o terceiro poupas. Mas, não separaste o conteudo da apresentação.

Isso só aconteceria se todo o conteudo fosse contido em um ficheiro que pudesse ser lido, de forma lógica, como um texto. Devidamente seccionado em termos lógicos e de estrutura. E depois, precisavas de outro ficheiro que definisse a apresentação e onde fica o quê.

Isso não aconteceu pq os UA's se estavam literalmente a c***r para a usabilidade e separação. E a W3C "arranjou" CSS-P, pq isso permitia implementar parte da coisa sem acabar com a mesma. Substituiste um mal por um mal menor (lol) sem resolver o problema á mesma.
 
....

Isso só aconteceria se todo o conteudo fosse contido em um ficheiro que pudesse ser lido, de forma lógica, como um texto. Devidamente seccionado em termos lógicos e de estrutura. E depois, precisavas de outro ficheiro que definisse a apresentação e onde fica o quê.

...

XSLT, portanto.
 
XSLT, portanto.

Chegaste onde eu queria. Nessa altura tens a separação feita e não importa se usas divs, tables, ou marcianos para fazer o layout. Compreendes a diferença? Nem tables era mau nem CSS é bom. O problema era que em termos práticos, até fazeres a separação, estavas no sitio onde sempre estiveste, give or take.
 
fixe.. agora ja poxo usar tabelas xem me xamarem nomex XD

anyway..
eu sempre fiz sites simples e porreiros, com tabelas. nunca me preocupei muito com os erros que davam no W3C..
 
Olhai uma diferença radical.

Uma coisa é usar tables para layout, coisa que incomoda algumas pessoas, outra é teres erros de validação.

Não me lembro de uma unica boa razão para ter uma página que dê erros. Excepto quando é da categoria "a arrnjar mais tarde por falta de tempo" :D

Agora a sério, se tens erros, isso não é das tables de certeza, e precisa realmente de atenção.
 
Em computadores diferentes ? :-D

Experimenta ter 3 ou 4 browsers diferentes no mesmo comp. e ver que em todos aparece uma coisa diferente. :002:

w3c powwa. :wow:
 
Chegaste onde eu queria. Nessa altura tens a separação feita e não importa se usas divs, tables, ou marcianos para fazer o layout. Compreendes a diferença? Nem tables era mau nem CSS é bom. O problema era que em termos práticos, até fazeres a separação, estavas no sitio onde sempre estiveste, give or take.

Concordo perfeitamente, mas não fui eu que argumentei a questão da separação de layout e conteúdo.
Para mim, como developer, faz muito mais sentido construir layouts com base em CSS-P do que usando uma tecnologia para mim "ultrapassada" de construção de layouts. Usar tabelas apenas quando faz sentido.
 
ai estáo teu erro... experimenta ver os teus sites em 100 computadores diferentes e depois vem me dizer isso á mesma.

Experimenta no teu ie colocar o tamanho do texto "muito grande" para veres a maravilha.

eu nao coloco "muito grande" coloco valores exactos.. 10 é 10 em qualquer pc.... axo eu... :|
 
"ultrapassada"

As chaves de parafusos não electricas foram ultrapassadas pelas outras. Mas não desapareceram. Não precisam de pilha/baterias/carregador, funcionam tão bem quanto as saibas usar, etc etc...

Eu pessoalmente nunca fui muito dado a hype nem buzzwords. Isso é marketing dep. Enquanto developer o que me interressa é se funciona ou não. Como disse antes, na tenho nada contra CSS, CSS-P é outra história. Estava tão "broken" quanto tables quando começou. Continuou "broken" em CSS2. CSS3 está a caminhar no mesmo sentido. Infelizmente quem decidiu a coisa não foram developers com sentido prático e sim "inginheirus" com sentido burocrático.

A onda é mais a do não fundamentalismo. Usas o que cair melhor no momento. E se por acaso decidires usar algo "ultrapassado" não te preocupes, o retro está in.
 
Back
Topo