A ver si me explico un poco mejor como para cerrar mi idea que fué un poco vaga en primera instancia.
Nadie dijo que las tablas van a dejar de existir. A todos aquellos que desarrollan web, les recomiendo 100% leer un poco de la w3c, los estándars, la historia y el porque se van dando las cosas.
Un breve resumen, cuando se inventó la web, aquellos que decidieron que 'tags' poner fueron los diarios.
Cuando un notero escribia un articulo, basicamente escribia código HTML. Decia cual era el heading, cual era el parrafo, que era importante o a destacar, que era una cita de otra persona, etc etc.
Cuando lo agarraba un diagramador, no miraba el contenido, sino los tags que habia puesto el que escribio el articulo y de ahi 'diseñaba' la hoja impresa.
Lo que habia que destacar iba en bold, lo que era la cita de otra persona iba en italica, el heading iba mas grande separado del texto, etc.
De acá nace el html y sus carencias que de a poco fueron creciendo debido a la necesidad de la web, ya que primero era solo texto, luego la necesidad de imagenes, audio, video, animaciones y un sin fin de cosas.
Lo desarrolladores, frente a las carencias de html, siempre estuvieron un paso adelante resbuscándoselas para generar el diseño que ELLOS necesitaban.
Un recurso excelente fue el uso de tablas para diseñar las páginas. (todos los que alguna vez diseñaron con tablas conocel el famoso 1.gif with="1" height="1".
Si bien hubo una época que ésto era lo más versatil, otros tipos de negocios (como google) empezaron a ver carencias en el formato web diseñado por tablas.
Hubieron muchos factores que impulsaron todo lo que hoy se le llama CSS, a pesar de que CSS existe hace muchisimo tiempo.
Algunos de los 'porque' CSS fué necesario :
1) Audiencia, las páginas hechas con tablas es imposible que sean bien representadas a personas con capacidades diferentes como ser no videntes.
2) Media, diferentes dispositivos. Al principio una pagina web se veia en un CRT a 800x600, luego 1024x768, luego llegaron los celulares y los monitores wide, todo ésto era un problema para los sitios web. Hacer diferentes versiones de cada sitio para cada media en que reproducirlo era algo muy caro para los desarrolladores.
3) Standards, standards y mas standards. Al principio se veia bien en netscape pero no en IE, despues al revés, después uno soporta transparencia otro no, despues aparecieron otros browser, enfin ... se vió la necesidad de estandarizar, de ahi nace la w3c en donde quienes amoldan son Microsoft, Google, Apple, y algunas empresas más.
A un nivel muy bajo, funciona de la siguiente manera:
x : Opina/pide/reclama la necesidad de X cosa y como se debe implementar.
El resto vota de las siguientes formas : Esta de acuerdo / Esta de acuerdo, pero con modificaciones / No está de acuerdo. (no hay más opciones).
y asi se va llegando a un concenso de que cosas son STANDARD. Cuando Microsoft propone algo y el resto no está de acuerdo, (por ej: el famoso box model), Microsoft lo integra en su Internet Explorer sabiendo que hay (o habia) más usuarios utilizando el IE y pasando por encima del 'standard'. Generando grandes dolores de cabeza a los desarrolladores web.
Los browser deberían, en un mínimo, soportar los standards y poder renderear acordemente de manera que cualquier sitio se vea como el desarrollador intentó que se vea. [aun falta mucho camino para lograr esto] (En especial las fonts).
HTML es un XML válido solo a partir de la version POSTERIOR a HTML 4.1 que es XHTML 1.0 (antes no era un XML válido).
Hay unos tags que se llaman DOCTYPES, que lo que hacen es justamente definir que atributos y/o elementos son válido en un código y cuáles no. Para cada version existen TRANSITIONAL y STRICT. (Transitional significa que es el pasaje de una version anterior hacia ésta, por lo que tolera algunas cosas de la version anterior) mientras que STRICT solamente soporta todo lo válido en esa version y no en anteriores.
Dicho ésto, sigo con el tema de CSS vs Table Design.
Utilizar la semántica correcta en el código html ayuda a buscadores, browser no comunes (para ciegos, celualres, etc).
Separar el diseño del código (si bien NO ES REAL AUN), también tiene lógica a la hora de desarrollar. Hace que las cosas sean más fáciles, especielmente a la hora de modfiicar.
Posibilita generar contenido o tener contenido variable y que la forma de visualizarlo sea la misma para los diferentes textos.
Paginas con mismos formatos no necesitan mas tener la misma estructura en tablas copiadas una y otra vez (optimización de codigo)
Los sitios son bastante mas livianos
Los browsers son más optimos al renderear los elementos ya que no necesitan la información de todo el elemento para empesar a dibujar e el browser (una especie de render progresivo vendría a ser).
Los CSS se ponen en el cache y si se mantiene el mismo o los mismos CSS en todo el site, solo se va a cargar 1 vez!!
Y un sin fin de ventajas más que me estoy olvidando seguramente.
Ejemplos claros del uso apropiado del contenido separado del diseño.
Lean un XML (rss) en el safari, y van a ver como éste tiene un diseño [hecho por Apple], mientras que en otro browser se ve distinto.
Poder definir nuestros propios doctype para soportar elementos que una pagina particular puede necesitar.
Poder generar lo siguiente :
<h1>Titulo</h1>
<div id="Menu">
<ul>
<li>Home</li>
<li>About us</li>
</ul>
</div>
<div id="Navigation">
<span class="off">Previous</span>
<span class="on">Next</span>
</div>
<div id="Content">
<h2>Sub Heading</h2>
<p>
<h3>Sub heading del parrafo</h3>
This is the paragraph text <br />
<img src="..." alt="Imagen que acompaña el texto" width="100" height="100"/>
</p>
</div>
<div id="poll">
<p>Do you like this code?<br />
<pre>CSS FTW</pre>
</p>
<table>
<thead>
<tr>
<td></td>
<td>I Like It</td>
<td>I don't like it</td>
<tr>
</tr>
<tfoot>
<tr>
<td>totals:</td>
<td>234</td>
<td>534</td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>yes</td>
<td>no</td>
</tr>
</div>
<div id="Footer">
Copyright © <span class="signature">Bart Calixto</span>
</div>
Así como está escrito ese código, esta totalmente estructurado de forma que esta bien claro que es cada parte del sitio y luego se puede dar formato por medio de css, sin necesidad de modificar el código. Solo cambiando la hoja de estilo.
Cuando vamos a la segunda página, solo cambiamos el contenido y el diseño se mantiene. [Al menos, es la teoría, en la práctica hay algunos detalles más que se van a ir mejorando].
Al fin y al cabo, el uso de CSS para diseñar el sitio es la evolucion de las páginas web y cada vez va evolucionando más. Por tanto, recomiendo ampliamente, migrando a medida de lo posible.
Al principio una página que con tablas te lleva 1 hora, te va a llevar 2 dias.
Al final del aprendizaje, esa pagina te va a llevar 15 minutos y la vas a hacer incluso mejor. Hasta un punto, que vas a poder cambiarla varias veces muy rápidamente. Y a google le va a gustar mas, y ... google is your friend
Me extendi como de costumbre... pero bueno, todo sea con el afán de aportar
Saludos,
Bart.
If you say 'plz' because it is shorter than 'Please' then I'll say 'no' because it's shorter than 'yes'.