caption padding: 5px; : caption « Tags « HTML / CSS






caption padding: 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.'caption' Example
2.'valign' defines the vertical alignment of text within the table cell or other element
3.caption-side: bottom
4.caption font-size: 90%;text-align: right;
5.Table caption tag
6.Table with caption and table header
7.caption font-weight: bold; / color: yellow;
8.caption color: yellow;
9.caption background-color: red;
10.caption tag summarizes the table's contents (this helps the visually impaired)
11.Set style for table caption
12.Caption align to the right
13.Table with caption, header, footer and table body
14.caption font-weight: bold;
15.caption text-align: left;
16.caption border-style: solid;
17.caption border-width: 1px;
18.caption border-color: #666666;
19.caption text-align: right
20.caption caption-side: bottom;
21.caption text-align: right;
22.caption vertical-align: top;
23.caption margin-bottom: 5px;
24.caption text-transform: lowercase;
25.caption font-size: 160%;
26.caption letter-spacing: 10px;
27.caption font-size: 1.5em;
28.caption font-weight: 400;
29.caption margin: 0;
30.caption padding: 6px 0 8px;
31.caption font: 1.5em Georgia, "Times New Roman", Times, serif;
32.caption padding: 1em;
33.'align' specifies the alignment of text within the element