El formato de las tablas web

Tiempo de lectura 2,5 minutos
Documento equivalente: 1,5 páginas.
Contenido: html/css publicación blog.
Nivel de lectura recomendado. html/Iniciado.
Recomendado: Bloggers con editor html.

Una tabla en web es una estructura de datos con un continente y un contenido. Es decir, un código  no matricial que genera un resultado matricial que alberga los datos que se representan. 

<div id=”a”>

<div id="b1">

<div id="h1">Año</div>

<div id="c1">2015</div>

<div id="c2">2016</div>

</div>

<div id="b">

<div id="h1">Tbps/Mundial</div>

<div id="c1">154,5</div>

<div id="c2">214,6</div>

</div>

</div>

A este código hay que sumarle una configuración que está en un fichero adjunto que no llega al usuario, pero que el navegador ve y necesita para ordenar los datos y convertirlos en el formato que el autor quiso enviar.

#a {

    display: table;

    width: 500px;

    text-align: center;

    margin: 0 auto;

}

#b1 {

    display: table-row;

    background-color:ligntblue;

}

#b2{

    display: table-row;

    background-color:#00FFFF;

}

#c1, #c2, #c3,#c4, #c5, #c6, #c7 {

    display: table-cell;

    vertical-align: middle;

    padding: 10px;

} 

#h1 {

    display: table-cell;

    background-color:lightgrey;

    vertical-align: middle;

    padding: 10px;

} 

Este formato es un soporte, un código que al contrario que el papel de un periódico, no se puede reciclar. Son datos invertidos en realizar la comunicación. Hay estilos de programación ahorrativos, sencillos y concisos, así como existen estilos de programación extendidos con funcionalidad adicional.
Las siguientes tablas están codificadas alternativamente con <div>/CSS y con <table> y muestran la diferencia en el rendimiento de un estilo de programación y otro. 

Objeto

Formato

Texto Plano

Código generado

Ratio %

div

básico

87

816

10,7

table

extendido

87

5415

1,6

Tabla 2. (816 bytes)

La misma tabla con otro estilo de programación. 

Objeto	Formato	Texto Plano	Código Generado	Ratio %
div	básico	87	816	10,7
table	extendido	87	5415	1,6

Tabla 3. (5.415 bytes.) 

El objeto  <table> está en desuso, sin embargo es el objeto  que resulta al copiar y pegar información de otras fuentes, minorando la eficiencia del resultado. Desde Mirando por la Ventana recomendamos que si tienes un Blog y quieres pegar tablas, no las pegues desde editores de textos.  Si puedes hazlas con código html div/css.  Si no, consúltanos.  Estaremos encantados de ayudarte. 

Este post emplea    95.754    caracteres de código  html  para publicar 2.520 caracteres de texto legible. Una eficiencia de un 2,6%

Agradecimientos. 

El formato de tabla ha sido proporcionado por el sitio Tutoriales en línea. (->)

El formato tabla extendido resulta de pegar desde LibreOffice Write (->)