table border-collapse: collapse; : table border « Tags « HTML / CSS






table border-collapse: collapse;

     

<!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>Spicy Thai Peanut Sauce</title>
<style type='text/css'>
html {
    background: #fff url('fruit_veg_web.jpg') no-repeat fixed center center;
}
body {
    font-family: monospace;
    padding: 10px;
    margin: 10px;
    /* Moz proprietary opacity property */
    -moz-opacity: 0.7;
    /* Microsoft proprietary filter property */
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    /* CSS 3 opacity property */
    opacity: 0.7;
    background: url('cross_hatch.jpg') repeat;
}
table.recipe {
    width: 100%;
    margin-bottom: 5px;
    table-layout: fixed;
    border-collapse: collapse;
}


th, td {
    border: 1px solid crimson;
}
</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.Set table border
2.Collapsed Borders
3.table border-width: medium;
4.table border-color: navy;
5.table border groove
6.border-collapse: separate
7.border-collapse: collapse
8.using border-spacing to create space between cells in a table
9.Using the differing precedences of row, column and cell borders to style a table
10.border-spacing: 0.5em
11.Set table right and bottom border to solid
12.Add border spacing
13.Add border spacing for only top and bottom
14.Add border space to column
15.Separated Borders
16.Boxed Cells
17.Left table border
18.Right table border
19.Top table border
20.Bottom table border
21.'border' sets the thickness in pixels of the border around an element
22.'bordercolor' specifies the color of the element border
23.'bordercolordark' defines the darker shade of the border color
24.'bordercolorlight' Example
25.'frame' determines how to display a table's border frame
26.'rules' controls which portions of a table's borders are displayed
27.Set table border to collapse, 1px solid black
28.table border-style: solid;
29.table border-color: #999999;
30.table border: 1px solid #C5B798;
31.Using a table to display border styles
32.table border: 1px solid black;
33.table border: thin solid black;table-layout: auto;
34.table {border-collapse:separate;}
35.table border-spacing:2px 8px;
36.Using CSS for Table Borders
37.table border: 1px solid #d8d8d8;
38.table border: 1px solid mediumslateblue;
39.table border: 1px solid rgb(200, 200, 200);
40.table border-spacing: 15px;
41.table border-spacing: 0 15px;
42.table border-spacing: 15px 0;
43.Table border and cell border