表格与表单

表格
/*－－表格--FF－－*/
table{border-collapse:collapse; width:50em; border:1px solid #666;}
th,td{padding:0.1em 1em;}
caption{font-size:1.2em; font-weight:bold; margin:1em 0;}
col{border-right:1px solid #ccc;}
col#albumCol{border:none;}
thead{background-color:#ccc; border-top:1px solid #a5a5a5; border-bottom:1px solid #a5a5a5;}
th{font-weight:normal; text-align:left;}
#playlistPosHead{text-indent:-1000em;}
.odd{background-color:#edf5ff;}
/*CSS3-----tr:nth-child(odd){background-color:#edf5ff;}*/
tr:hover{background-color:#3d80df; color:#fff;}
thead tr:hover{background-color:transparent; color:inherit;}

<table cellspacing="0" id="playlistTable" summary="Top 15 songs played.">
  <caption>Top 15 Playlist</caption>
  <colgroup>
    <col id="PlaylistCol" />
    <col id="trackCol" />
    <col id="artistCol" />
    <col id="albumCol" />
  </colgroup>
  <thead>
    <tr>
      <th id="playlistPosHead" scope="col">Playlist Position</th>
      <th scope="col">Track Name</th>
      <th scope="col">Artist</th>
      <th scope="col">Album</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>1</td>
      <td>Hide You</td>
      <td>Kosheen</td>
      <th>Resist</th>
    </tr>
    <tr>
      <td>2</td>
      <td>.38.45</td>
      <td>Thievery Corproation</td>
      <td>Sounds From the Thievery Hi-Fi</td>
    </tr>
    <tr class="odd">
      <td>3</td>
      <td>Fix You</td>
      <td>Cold Play</td>
      <td>X&amp;Y</td>
    </tr>
  </tbody>
</table>


表单
fieldset{margin:1em 0; padding:1em; border:1px solid #ccc; background:#f8f8f8;}
legend{font-weight:bold;}
#form1 label{display:block;}
input{width:200px;}
.required{font-size:0.75em; color:#760000;}
textarea{width:300px; height:100px;}
input.radio,input.checkbox,input.submit{width:auto;}
input.radio{float:left; margin-right:1em;}
input:focus,textarea:focus{background:#ffc;}

/*------FF------*/
#form1 input[type="text"]{width:200px;}
#form1 input[type="text"],textarea{border-top:2px solid #999; border-left:2px solid #999; border-bottom:1px solid #ccc; border-right:1px solid #ccc;}
/*------FF------*/


#form2 label{float:left; width:10em;}
#form2 #remember-me label{width:4em;}


#form3 #monthOfBirthLabel,#form3 #yearOfBirthLabel{display:none;}
#form3 input#dateOfBirth{width:3em; margin-right:0.5em;}
#form3 input#monthOfBirth{width:10em; margin-right:0.5em;}
#form3 input#yearOfBirth{width:5em;}

#form3 fieldset#favoriteColor{margin:0; padding:0; border:none; background:transparent;}
#form3 #favoriteColor h2{width:10em; float:left; font-size:1em; font-weight:normal;}
#form3 #favoriteColor div{width:8em; float:left;}
.clear{clear:both;}
#form3 #favoriteColor label{width:3em; float:none; display:inline;}
#form3 #favoriteColor p{margin:0.3em 0;}


#form4 p{position:relative;}
#form4 .feedback{position:absolute; margin-left:11em; left:200px; font-weight:bold; color:#760000; padding-left:18px; background:url(images/error.gif) no-repeat left center;}

<p style="padding-top:50px; font-weight:bolder; color:red;">/*－－表单－FF－－*/</p>
<p style="padding-top:50px; font-weight:bolder; color:red;">/*－－表单－form1－－*/</p>
<div id="form1">
<fieldset>
  <legend>Your Contact Details</legend>
  <p>
    <label for="author">Name:<em class="required">(required)</em></label>
    <input name="author" id="author" type="text" />
  </p>
  <p>
    <label for="email">Email Address:</label>
    <input name="email" id="email" type="text" />
  </p>
  <p>
    <label for="url">Web Address:</label>
    <input name="url" id="url" type="text" />
  </p>
</fieldset>
<fieldset>
  <legend>Comments</legend>
  <p>
    <label for="text">Message:</label>
    <textarea name="text" id="text" cols="20" rows="10"></textarea>
  </p>
</fieldset>
<fieldset>
  <legend>Remember Me</legend>
  <p>
    <input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />
    <label for="remember-yes">Yes</label>
  </p>
  <p>
    <input id="remember-no" class="radio" name="remember" type="radio" value="no"  checked="checked" />
    <label for="remember-no">No</label>
  </p>
</fieldset>
</div>


<p style="padding-top:50px; font-weight:bolder; color:red;">/*－－表单－form2－－*/</p>
<div id="form2">
<fieldset>
  <legend>Your Contact Details</legend>
  <p>
    <label for="author">Name:<em class="required">(required)</em></label>
    <input name="author" id="author" type="text" />
  </p>
  <p>
    <label for="email">Email Address:</label>
    <input name="email" id="email" type="text" />
  </p>
  <p>
    <label for="url">Web Address:</label>
    <input name="url" id="url" type="text" />
  </p>
</fieldset>
<fieldset>
  <legend>Comments</legend>
  <p>
    <label for="text">Message:</label>
    <textarea name="text" id="text" cols="20" rows="10"></textarea>
  </p>
</fieldset>
<fieldset id="remember-me">
  <legend>Remember Me</legend>
  <p>
    <input id="remember-yes" class="radio" name="remember" type="radio" value="yes" />
    <label for="remember-yes">Yes</label>
  </p>
  <p>
    <input id="remember-no" class="radio" name="remember" type="radio" value="no"  checked="checked" />
    <label for="remember-no">No</label>
  </p>
</fieldset>
</div>

<p style="padding-top:50px; font-weight:bolder; color:red;">/*－－表单－form3－－*/</p>
<div id="form3">
<fieldset>
  <legend>Personal Information</legend>
  <p>
  <label for="dateOfBirth">Date of Birth:</label>
  <input name="dateOfBirth" id="dateOfBirth" type="text" />
  <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
  <select name="monthOfBirth" id="monthOfBirth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
  </select>
  <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
  <input name="yearOfBirth" id="yearOfBirth" type="text" />
</p>
</fieldset>
<fieldset id="favoriteColor">
  <h2>Favorite Color:</h2>
  <div>
    <p>
      <input class="checkbox" id="red" name="red" type="checkbox" value="red" />
      <label>red</label>
    </p>
    <p>
      <input class="checkbox" id="red" name="red" type="checkbox" value="red" />
      <label>red</label>
    </p>
    <p>
      <input class="checkbox" id="red" name="red" type="checkbox" value="red" />
      <label>red</label>
    </p>
  </div>
  <div>
    <p>
      <input class="checkbox" id="orange" name="orange" value="orange" type="checkbox"~CCC value="orange" />
      <label>orange</label>
    </p>
    <p>
      <input class="checkbox" id="orange" name="orange" value="orange" type="checkbox"~CCC value="orange" />
      <label>orange</label>
    </p>
    <p>
      <input class="checkbox" id="orange" name="orange" value="orange" type="checkbox"~CCC value="orange" />
      <label>orange</label>
    </p>
  </div>
  <br class="clear"/>
</fieldset>
</div>

<div id="form4">
<fieldset>
  <legend>Your Contact Details</legend>
  <p>
    <label for="email">Email Address:
    <span class="feedback">Incorrect email address.Please try again.</span>
    </label>
    <input name="email" id="email" type="text" />
  </p>
</fieldset>
</div>