TWiki/PatternSkinCssCookbookEditTableStyle.mdwn

   1 # <a name="PatternSkinCssCookbook Recipe:_E"></a><a name=" _PatternSkinCssCookbook Recipe:"></a> [[PatternSkinCssCookbook]] Recipe: [[EditTable|TWiki:Plugins/EditTablePlugin]] style
   2
   3 **Cookbook example to illustrate control over EditTable edit styles.**
   4
   5 1. EditTable uses a monospace font in edit mode to make the input text width correspond to the set width of the table columns. The attached example style makes the text more readable by changing the monospace font to a naturally spaced one.
   6 2. EditTable table cell content is vertically centered. The example style makes the content aligned at the top.
   7 3. The example style gives the input fields a background color so that they stand out more.
   8
   9 Test table:
  10
  11 <a name="edittable1"></a>
  12
  13 <div>
  14   <form action="http://www.dementia.org/twiki/viewauth#edittable1" method="post" name="edittable1"><input name="ettablenr" type="hidden" value="1" /> <input name="etedit" type="hidden" value="on" /><table border="1" cellpadding="0" cellspacing="0">
  15       <tr>
  16         <th bgcolor="#99CCCC"><strong> Head1 </strong></th>
  17         <th bgcolor="#99CCCC"><strong> Head2 </strong></th>
  18       </tr>
  19       <tr>
  20         <td><strong>Hamlet:</strong> So much for this, sir; now shall you see the other.<br />You do remember all the circumstance? </td>
  21         <td><strong>Horatio:</strong> Remember it, my lord! </td>
  22       </tr>
  23     </table><input name="etrows" type="hidden" value="2" /> <input type="submit" value="Edit table" /></form>
  24 </div>
  25
  26 <div> This line loads the extra style definition: <pre>
  27    * Set USERSTYLEURL = %ATTACHURL%/edittable.css
  28 </pre> You can write this line in %SYSTEMWEB%.TWikiPreferences, in [[Main/WebPreferences]], in your user topic or on a single page. </div>