I've got a table. And as you can see below I've got a lot of duplicate alt attributes going on.
What is the best way to prevent this but still have valid HTML5 code?
<table id="benefits">
<thead>
<tr>
<th></th>
<th>Unregistered</th>
<th><b>Basic</b></th>
<th><b style="color: #a2cb47">Premium</b></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td class="center">Free</td>
<td class="center">Free</td>
<td class="center"><b>$9.99/mo</b></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Complete ad-free experience</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Unlimited parallel downloads</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Direct downloads</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Maximum file size</td>
<td class="center">100 MB</td>
<td class="center">1 GB</td>
<td class="center">10 GB</td>
</tr>
<tr>
<td>Your files never expire</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Intuitive file manager</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>Personal storage</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center">10 GB</td>
<td class="center">1 TB</td>
</tr>
<tr>
<td>Password protect your files</td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
<tr>
<td>No reCAPTCHA codes</td>
<td class="center"><img src="/images/cross.png" alt="Cross" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
<td class="center"><img src="/images/tick.png" alt="Checkmark" height="15"></td>
</tr>
</tbody>
</table>
<tfoot>
before the body, not really the correct order – Martijn Apr 17 '14 at 14:28