Como estan haciendo esta tabla?

[triqui]

Hola, quiero replicar esto que tienen en esta web. Es una quiniela.

http://www.sorteos.es/quiniela-de-futbol/

No entiendo como hacen el efecto de darle a cada columna un hover, que pasas por las columnas y se cambian de color...pero no es un hover, porque hago click derecho para ver la imagen...y no es una imagen...es un estilo, eso esta hecho con javascript + css?


Segun los inputs utiliza un tipo text... porque no utiliza <img> si yo veo imagenes o son css...

Tambien veo en su codigo mas abajo como que utiliza <map>...puede ser que utilize eso para hacer lo de las secciones.... podeis arrojarme un poco de luz para entenderlo..esta utilizando jquery + javascript...



este es el codigo de los inputs que tiene para crear esa quiniela.

Código HTML:

<table>
<tr>
 
<td>
    <table>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0a">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row0c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1a">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row1c">
    </td>
    </tr>
    
    <tr>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row2c">
    </td>
 
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3b">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row3c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4b">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row4c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5a">
    </td>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row5c">
    </td>
    </tr>
    
    <tr>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row6c">
    </td>
    </tr>
 
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row7c">
 
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8b">
    </td>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row8c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9a">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row9c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10a">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row10c">
    </td>
    </tr>
    
    <tr>
 
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11b">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row11c">
    </td>
 
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12b">
    </td>
    <td>
 
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row12c">
    </td>
    </tr>
    
    <tr>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13a">
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13b">
 
    </td>
    <td>
    <input size="1" maxlength="1" class="input1" type=text value="0" name="bet0row13c">
    </td>
    </tr>
    
    </table>
</td>
 
</tr>
</table>