Tabla HTML decorada con CSS

Este es un post rapido, lo hice pensando en algunos amigos que no entienden mucho de CSS y que con este post puedan hacer algunas tablas para sus aplicaciones sin tener que sobre cargar el codigo HTML con

<font > 

o atributos

style

innecesarios.


Bueno comenzemos, este es nuestro codigo HTML

<table>
   <thead>
<tr>
     <th>N</th>
     <th>Campo 1</th>
     <th>Campo 2</th>
     <th>Campo 3</th>
    </tr>
</thead>
   <tbody>
<tr class="claro"><td>1</td><td>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.</td><td>Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</td><td>No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos</td></tr>
<tr class="oscuro"><td>2</td><td>El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras</td><td>al contrario de usar textos como por ejemplo - Contenido aquí, contenido aquí - </td><td>Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto</td></tr>
<tr class="claro"><td>3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc lacus.</td><td>Etiam eu ipsum sed eros ullamcorper rutrum sit amet ut dui. Cras eget ultricies eros</td><td>Integer posuere viverra vestibulum. Phasellus urna urna, fringilla eu interdum sed, tincidunt quis eros</td></tr>
<tr class="oscuro"><td>4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc lacus.</td><td>Etiam eu ipsum sed eros ullamcorper rutrum sit amet ut dui. Cras eget ultricies eros</td><td>Integer posuere viverra vestibulum. Phasellus urna urna, fringilla eu interdum sed, tincidunt quis eros</td></tr>
<tr class="claro"><td>5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc lacus.</td><td>Etiam eu ipsum sed eros ullamcorper rutrum sit amet ut dui. Cras eget ultricies eros</td><td>Integer posuere viverra vestibulum. Phasellus urna urna, fringilla eu interdum sed, tincidunt quis eros</td></tr>
</tbody>
  </table>

Vamos a ir explicando el css por partes:

Primero haremos que nuestra tabla tenga bordes y que los border de nuestras celdas esten juntos no como aparecen cuando uno hace un simple

< table border=1 >

esto se logra usando border-collapse:collapse

table{ border:solid 1px #1d1d1d; border-collapse: collapse; font-size: 8pt; font-family:"Trebuchet MS", "Helvetica"; }

Le añadimos los bordes a las celdas

table td{ border:solid 1px #1d1d1d; }

Ahora coloreamos unicamente las cabeceras de las columnas

table thead tr { background-color: #2a2a2a; color:#fff; }
table thead th { border: solid 1px #777; }

Definimos los colores para el efecto zebra

table tbody tr.claro{ background-color: #F7F7F7;}
table tbody tr.oscuro{ background-color: #DFE8FF;}

Formateamos unicamente la primera celda de cada columna

table tbody td:first-child{ background-color: #2a2a2a; color:#fff; width:1.5em; text-align:center; border-color:#777;}

Por ultimo agregamos el evento hover de manera que cuando pase el mouse por cada fila se pueda saber cual esta seleccionada

table tbody tr:hover{ background-color: #8FB8FF; cursor: pointer;}
table tbody tr:hover td:first-child{ background-color: #233A5F;}

Enla parte inferior se puede apreciar como queda nuestra tabla

El codigo de la tabla y Css lo pueden encontrar en Codigo HTML y CSS de la Tabla

N	Campo 1	Campo 2	Campo 3
1	Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.	Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500	No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos
2	El punto de usar Lorem Ipsum es que tiene una distribución más o menos normal de las letras	al contrario de usar textos como por ejemplo - Contenido aquí, contenido aquí -	Muchos paquetes de autoedición y editores de páginas web usan el Lorem Ipsum como su texto por defecto
3	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc lacus.	Etiam eu ipsum sed eros ullamcorper rutrum sit amet ut dui. Cras eget ultricies eros	Integer posuere viverra vestibulum. Phasellus urna urna, fringilla eu interdum sed, tincidunt quis eros
4	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc lacus.	Etiam eu ipsum sed eros ullamcorper rutrum sit amet ut dui. Cras eget ultricies eros	Integer posuere viverra vestibulum. Phasellus urna urna, fringilla eu interdum sed, tincidunt quis eros
5	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a nunc lacus.	Etiam eu ipsum sed eros ullamcorper rutrum sit amet ut dui. Cras eget ultricies eros	Integer posuere viverra vestibulum. Phasellus urna urna, fringilla eu interdum sed, tincidunt quis eros

Mas ejemplos de Tablas HTML con CSS