alguien sabe como está echo este degradado y división de celdas?

[mithrila]

Hola:
Estoy dando mis primeros pasos en diseño web y una cosa que me ha resultado muy útil para aprender ha sido copiarme códigos y tratar de descubrir como están echos.
Hoy estuve examinando una tabla que realmente necesitaría poder hacer algo similar, pero no pude descubrir como estaba armada. Este es el código:

<table border="0" cellpadding="0" cellspacing="0" height="55" style="position:relative; z-index:1;" width="100%">

<tr>
<td style="padding: 0px 0px 0px 20px; position:relative; z-index:1;" valign="middle" width="130"><a href="http://s3s.fr/l2/6AeHZ86cO2/5301509/1129653610.html" style="color:#ffffff;font-weight:bold;font-size:24px;text-decoration:none;"><img alt="" height="22" src="http://ba.elgrupazo.com/sites/all/modules/custom/grupazo_helper_newsletter/ghnews_wizard/images/dolar.png" title="" width="15" />150</a></td>
<td style="position:relative; z-index:1;"><a href="http://s3s.fr/l2/6AeHZ86cO3/5301509/1129653610.html" style="color:#ffffff;font-weight:bold;text-decoration:none;font-size:18px;">Ver oferta</a></td>
</tr>

</table>

Lo que no entiendo es como logran el degradado y como hacen para que el td se divida en dos colores, y hasta les queda con una sombra!
Si alguien me puede orientar un poco les agradecería muchisimo, tengan en cuenta que recién comienzo por lo que aún no tengo demasiados conocimientos...
Saludos a todos, me resultó muy útil este blog.