24 Junio 2013 ~ Comentarios desactivados en Crear tablas con CSS

Crear tablas con CSS

Para aquellas personas interesadas en crear tablas con el lenguaje CSS, les recomendaremos una serie de tutoriales, guías y hasta aplicaciones que podrán utilizar para lograr este trabajo. Este artículo está dedicado principalmente a aquellas personas principiantes en este lenguaje, como así también a aquellas que ya tienen experiencia con este lenguaje de programación y otros, pero el tema de las tablas nunca lo habían visto. Te explicaremos todos los factores, los códigos que influyen, y algunas recomendaciones que deberás seguir para no caer en los problemas más frecuentes.

tables

Muchas veces dijimos en nuestro blog que uno de los principales inconvenientes que tienen los webmasters en relación al posicionamiento web y a la frecuencia de sus visitantes es el tema de las imágenes, debido a que si nuestro sitio web está cargado con muchas imágenes tendrá problemas en cargar debido a que existen aún muchas personas que tienen conexiones a Internet demasiado lentas, y al encontrase con un sitio con muchas imágenes que no carga por completo en unos cuantos segundos, optan por descartar ese sitio. Lo mismo pasa con el tema de los buscadores, ya que si bien no es un factor directo que implica que estemos mejor o peor posicionados, lo que sí es verdaderamente importante para el SEO es el tiempo de carga que tiene nuestro sitio, por lo que el tema de imágenes es un factor indirecto en este tema.

Tomamos este tema de las imágenes debido a que si una persona quiere publicar en su sitio web una tabla o un cuadro de doble entrada, recurre inmediatamente a trabajar mediante el programa Microsoft Excel o similares, para luego sacarle una foto y colgarla en el sitio en forma de imagen. Lo que individualmente nos puede parecer minúsculo, pero si tenemos muchas imágenes en nuestro sitio ya es otro tema. Por ello recomendamos el uso de tablas creadas con el lenguaje CSS, que la podremos realizar y publicar en nuestro sitio con la ayuda de HTML y una hoja de estilos que esté asociada.

El contenido

En un principio el contenido de la tabla que queremos publicar en nuestro sitio debe estar dispuesto entre las etiquetas <table>, que para un mejor uso de estilos podremos agregar la etiqueta ID (<table id=”example”>)

La cabecera

Hablamos por cabecera a la primera fila que encabeza, valga la redundancia, las demás filas. El apartado de la cabecera en el lenguaje HTML se encuentra contenida entre las etiquetas <thead> (justamente “t” de tabla y “head” de cabecera para que recuerden).

Para colocar el contenido de los espacios de la primera fila deberemos utilizar las etiquetas <tr> generalmente y dentro de ellas las etiquetas <th>, que  individualmente llaman a cada apartado. Un ejemplo para que le vayan dando forma a la cabecera:

<table>    
<thead>
        <tr>
            <th>Detalle</th>
            <th>Precio unitario</th>
            <th>Precio total</th>
        </tr>
    </thead>
</table>

El contenido o cuerpo

a

En este apartado hablaremos de cómo colocar el contenido en cada una de las columnas, tarea que debe ser muy minuciosa ya que no vamos a querer colocar un dato donde no corresponde. Para este caso utilizaremos la etiqueta general <tbody> para avisarle al lector de documentos o navegador web que comenzaremos a hablar sobre el contenido de las tablas en sí. Para colocar el contenido de cada apartado deberemos utilizar la etiqueta <tr> dentro de <tbody>, y a partir de ese momento podremos colocar el contenido dispuesto entre las etiquetas <td>. Un ejemplo para comprender esto:

<table>    
<tbody>
        <tr>
            <td>Task Details</td>
            <td>Progress</td>
            <td>Vital Task</td>
        </tr>
    </tbody>
</table>

Debemos recordar siempre mantener el mismo orden con que colocamos el contenido de la cabecera. Otro dato relevante es el hecho de que para colocar el contenido de la fila número tres de la tabla o número dos del contenido, deberemos repetir el paso anterior, colocando nuevamente el contenido de cada apartado dentro de la etiqueta subgeneral, para decirlo de algún modo, <tr> y luego individualmente el contenido en sí dentro de las etiquetas <td>.

Recomendamos una lectura del artículo que publicó John Sardine en su blog que habla sobre este tema. Además también podremos ver una demostración del tema, para que vean cómo funcionan las tablas, y hasta cuánto se las puede embellecer con CSS.

Si te gustan las aplicaciones web, te recomendamos CSS Table Generator, que hará todo el trabajo por tí.

Social Share Counters
Tags: ,

Comments are closed.