[Help] html/css help

okay, i am playing with the Fate Accelerated character sheet, trying to add a repeating section for stunts. it has been a long time since i have done any coding at all, and i was never all that good at html. that said, <div> <div>Stunts</div> <fieldset> <table> <tbody> <tr><td width="50%"><button type='roll' value='&{template:FAE} {{name=@{name}}} {{approach=@{stuntname}}} {{roll=@{stuntroll}}} {{effect=@{stuntdescription}}}' name='roll_stuntroll' /> <label>Name </label><input type="text" name="attr_stuntname" /></td> <td width="50%"><label>Roll (if Any) </label><input type="text" name="attr_stuntroll" /></td></tr> <tr><td><label>Description</label></td><td><input type="text" name="attr_stuntdescription" /></td></tr> </tbody> </table> </fieldset> </div> <!-- .section-stunts --> </div> does not look good at all. any help with css/table formatting would be well, helpful

okay, i have played with this some more, and have almost gotten this where i think it needs to be. but, as it turns out, i know almost nothing about css, so would really appreciate any styling tips to make this look better. right now, it looks like which works fine, but i can't seem to get rid of the bar in the middle (between the name row and the description row). the code for this is  <div class="sheet-Stunts">         <div class="sheet-header">Stunts</div>                                  <fieldset class="repeating_stunts">                         <table style="width:100%" border="2">                             <tbody>                                 <tr><td><table style="width:100%" >                                     <tbody>                                         <tr><td width="5%" valign="middle"><button type='roll' value='&{template:FAE} {{name=@{name}}} {{approach=@{stuntname}}} {{roll=@{stuntroll}}} {{effect=@{stuntdescription}}}' name='roll_stuntroll' /></td>                                         <td width="45%" valign="bottom"><label>Name </label><input type="text" name="attr_stuntname" /></td>                                         <td width="50%" valign="bottom"><label>Roll (if Any) </label>                                                                                      <select  name="attr_stuntroll" />                                                 <option value="" selected>No Roll</option>                                                 <option value="[[4DF+ @{careful}[Careful]+2+?{Bonus|0}[Bonus]]]">Careful</option>                                                 <option value="[[4DF+ @{clever}[Clever]+2+?{Bonus|0}[Bonus]]]">Clever</option>                                                 <option value="[[4DF+ @{flashy}[Flashy]+2+?{Bonus|0}[Bonus]]]">Flashy</option>                                                 <option value="[[4DF+ @{forceful}[Forceful]+2+?{Bonus|0}[Bonus]]]">Forceful</option>                                                 <option value="[[4DF+ @{quick}[Quick]+2+?{Bonus|0}[Bonus]]]">Quick</option>                                                 <option value="[[4DF+ @{sneaky}[Sneaky]+2+?{Bonus|0}[Bonus]]]">Sneaky</option>                                             </select>                                                 </td></tr>                                     </tbody>                                     </td></tr></table>                                 <tr><td><table style="width:100%" >                                     <tbody>                                         <tr><td width="5%" valign="bottom"></td><td width="95%"><label>Description</label><input type="text" name="attr_stuntdescription" /></td></tr>                                     </tbody>                                 <tr><td><table>                                 </tbody>                         </table>                                              </fieldset>                          </div> <!-- .section-stunts -->    </div> it does everything i want it to do, it just looks bad. any help, tips, tricks, etc would be appreciated.

It really doesn't look bad at all Dalton.  If you don't want your entire table to have a border, try wrapping it with a div with a border style.  I also like using a little radius on borders.  The selector field was a little smaller in height than the other fields, so I gave it height to help match the others.   I suggest trying to use the external css whenever possible or at a minimum insert style where needed.  The idea is to keep the code and formatting separate and allow for quick changes across your sheet when necessary. I like to use inspect element in the browser(F12 or right-click>select element) to view the css on different elements of a page.  You can also adjust their settings, toggle them off, and add other styles to see how the affect your design.  An invaluable tool.  Hope this helps.  Cheers Changes in bold.     <div class="sheet-Stunts">       <div class="sheet-header">Stunts</div>       <fieldset class="repeating_stunts">         <div style="border:2px solid black;border-radius:10px;padding:10px;">           <table style="width:100%">             <tbody>               <tr>                 <td>                   <table style="width:100%">                     <tbody>                       <tr>                         <td width="5%" valign="middle">                           <button type='roll'                           value='&{template:FAE} {{name=@{name}}} {{approach=@{stuntname}}} {{roll=@{stuntroll}}} {{effect=@{stuntdescription}}}' name='roll_stuntroll' />                         </td>                         <td width="45%" valign="bottom">                         <label>Name</label>                          <input type="text" name="attr_stuntname" /></td>                         <td width="50%" valign="bottom">                         <label>Roll (if Any)</label>                          <select name="attr_stuntroll" style="height:24px;" >                           <option value="" selected="selected">No Roll</option>                           <option value="[[4DF+ @{careful}[Careful]+2+?{Bonus|0}[Bonus]]]">Careful</option>                           <option value="[[4DF+ @{clever}[Clever]+2+?{Bonus|0}[Bonus]]]">Clever</option>                           <option value="[[4DF+ @{flashy}[Flashy]+2+?{Bonus|0}[Bonus]]]">Flashy</option>                           <option value="[[4DF+ @{forceful}[Forceful]+2+?{Bonus|0}[Bonus]]]">Forceful</option>                           <option value="[[4DF+ @{quick}[Quick]+2+?{Bonus|0}[Bonus]]]">Quick</option>                           <option value="[[4DF+ @{sneaky}[Sneaky]+2+?{Bonus|0}[Bonus]]]">Sneaky</option>                         </select></td>                       </tr>                     </tbody>                   </table>                 </td>               </tr>               <tr>                 <td>                   <table style="width:100%">                     <tbody>                       <tr>                         <td width="5%" valign="bottom"></td>                         <td width="95%">                           <label>Description</label>                           <input type="text" name="attr_stuntdescription" />                         </td>                       </tr>                     </tbody>                     <tr>                       <td></td>                       <!-- .section-stunts -->                     </tr>                   </table>                 </td>               </tr>             </tbody>           </table>         </div>       </fieldset>     </div>

That is absolutely perfect.