Codigo HTML y CSS de Tabla decorada

Este codigo proviene del Tutorial Tabla HTML decorada con CSS

Codigo HTML de la Tabla

<div class="table_example" >
<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>
  </div>

Codigo CSS

.table_example table{ border:solid 1px #1d1d1d; border-collapse: collapse; font-size: 8pt; font-family:"Trebuchet MS", "Helvetica"; }
.table_example table td{ border:solid 1px #1d1d1d; }
.table_example table thead tr { background-color: #2a2a2a; color:#fff; }
.table_example table thead th { border: solid 1px #777; }
.table_example table tbody tr.claro{ background-color: #F7F7F7;}
.table_example table tbody tr.oscuro{ background-color: #DFE8FF;}
.table_example table tbody td:first-child{ background-color: #2a2a2a; color:#fff; width:1.5em; text-align:center; border-color:#777;}
.table_example table tbody tr:hover{ background-color: #8FB8FF; cursor: pointer;}
.table_example table tbody tr:hover td:first-child{ background-color: #233A5F;}