How to place ribbon on top of td tag element

Question

I have table and i would like to place simple colored ribbon on top of <td> tag

Example of the table

How then to add ribbon at the top cornert of <td> tag

It sounds good idea helps to identify exact members than the other so any help how i can add such kind of ribbon on top of <td>

HTML

<table border="1">
<tr>
<td>Name1</td>
<td>Email1</td>
</tr>
<tr>
<td>Name2</td>
<td>Email2</td>
</tr>
</table>

How then we add ribbon on Name1 <td> tag

~ Thanks

Answer 1

You can specify a CSS CLASS for the cells that need a ribbon, then define a background image for that class:

<style>
    .ribbon {
        /* remember that image url is relative to where the stylesheet or style tag is located at */
        /* if this style were defined at /Style/site.css, then you would need a url indicating a previous directory like: ../Images/ribbon.png */
        background-image: url('/Images/ribbon.png');
    }
</style>
<table>
    <tr>
        <td class="ribbon">Cell 1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td class="ribbon">Cell 2</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td class="ribbon">Cell 3</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>