table margin-bottom: 5px; : table margin « Tags « HTML / CSS






table margin-bottom: 5px;

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title></title>
<style type='text/css'>
body {
    font-family: monospace;
    padding: 10px;
    margin: 10px;
}
table.recipe {
    width: 100%;
    margin-bottom: 5px;
}
caption {
    text-align: left;
    margin-bottom: 5px;
    text-transform: lowercase;
    font-size: 160%;
    padding: 5px;
    letter-spacing: 10px;
    font-weight: bold;
}
table.recipe thead th {
    font-weight: bold;
    font-size: 150%;
    color: black;
}
table.recipe thead th, table.recipe tbody td {
    padding: 5px;
    text-transform: lowercase;
}
table.recipe tbody td, table.recipe tfoot td {
    font-size: 130%;
}
table.recipe tfoot td {
    padding: 5px;
}
table.recipe tfoot td p {
    padding: 5px;
}
li {
    margin-left: 30px;
    padding-left: 30px;
}
</style>


    </head>
    <body>
        <table class='recipe'>
            <caption>
                Spicy Thai Peanut Sauce
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> quantity     </th>
                    <th> measurement  </th>
                    <th> product      </th>
                    <th> instructions </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Peanut Oil       </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 12               </td>
                    <td> Each             </td>
                    <td> Serrano Peppers  </td>
                    <td> Sliced           </td>
                </tr>
                <tr>
                    <td> 16               </td>
                    <td> Each             </td>
                    <td> Garlic Cloves    </td>
                    <td> Minced           </td>
                </tr>
                <tr>
                    <td> 2                </td>
                    <td> CUPS             </td>
                    <td> Peanut Butter    </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 1                </td>
                    <td> CUPS             </td>
                    <td> Soy Sauce        </td>
                    <td></td>
                </tr>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Lime Juice       </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 4                </td>
                    <td> TABLESPOONS      </td>
                    <td> Sesame Oil       </td>
                    <td></td>
                </tr>
                <tr>
                    <td> 4                </td>
                    <td> CUPS             </td>
                    <td> Coconut Milk     </td>
                    <td></td>
                </tr>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Honey            </td>
                    <td></td>
                </tr>
                <tr>
                    <td> &frac12;         </td>
                    <td> CUPS             </td>
                    <td> Brown Sugar      </td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan='4'>
                        <ul>
                            <li>
                                Saut&eacute; sliced serranos and garlic in peanut
                                oil til lightly browned.
                            </li>
                            <li>
                                Add all other ingredients and stir till dissolved.
                            </li>
                            <li>
                                Simmer for 5 minutes.
                            </li>
                            <li>
                                Pur&eacute;e all in blender.
                            </li>
                        </ul>
                        <p>
                            Saut&eacute; your favorite vegetables; onions,
                            mushrooms, green peppers, and squash work best. Sprinkle
                            with allspice, salt, and pepper. Optionally add walnuts
                            or pine nuts. Add browned chicken or tofu and glaze
                            with sauce. Serve with jasmine rice.
                        </p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

   
    
    
    
    
  








Related examples in the same category

1.table margin-top: 15px;
2.table margin-bottom: 25px;
3.table with margins
4.table margin: 0 0 16px;
5.table margin:15px;
6.Set margin for select inside a table