Comment formater une table html avec des styles en ligne pour ressembler à une table Excel rendue?

Je suis actuellement coincé réglage des bordures dans un tableau html. (J'utilise des styles en ligne pour un meilleur rendu dans l'e-mail de clients), j'ai ce bout de code:

<html>
    <body>
        <table style="border: 1px solid black;">
            <tr>
                <td width="350" style="border: 1px solid black ;">
                    Foo
                </td>
                <td width="80" style="border: 1px solid black ;">
                    Foo1
                </td>
                <td width="65" style="border: 1px solid black ;">
                    Foo2
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>

Il est traduit comme ceci:
Comment formater une table html avec des styles en ligne pour ressembler à une table Excel rendue?

Je veux de la table de faire un rendu comme Excel rendrait une table, à l'intérieur et à l'extérieur des frontières:
Comment formater une table html avec des styles en ligne pour ressembler à une table Excel rendue?

source d'informationauteur citronas

  1. 29
    table {
  border-collapse:collapse;
}
  2. 9

    Ajouter cellpadding et cellspacing pour le résoudre.
    Edit: Aussi supprimé le double de pixels de la frontière.

    <style>
td
{border-left:1px solid black;
border-top:1px solid black;}
table
{border-right:1px solid black;
border-bottom:1px solid black;}
</style>
<html>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td width="350" >
                    Foo
                </td>
                <td width="80" >
                    Foo1
                </td>
                <td width="65" >
                    Foo2
                </td>
            </tr>
            <tr>
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
            <tr >
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>
  3. 0

    C'est simple et rapide (et pas formellement valide HTML5), mais il semble que ça fonctionne, et c'est inline que par la question:

    <table border='1' style='border-collapse:collapse'>

    Aucune autre style de <tr>/<td> balises est nécessaire (pour une table de base de la grille).