CSS manipulation | crate spreadsheet form using css

Posted in CSS Tips & Trick
0 comments

This css manipulation form that looks similar to a excel spreadsheet?

css form spreadsheet

 

this spreadsheet form enable you to input data in table column like excel column. where form that allows users to enter data as if into a spreadsheet like  excel.

How to crate form spreadsheet only manipulation css style

1. Crate css Style.css this style code :

 

  1. table.formdata {
  2. border: 1px solid #5F6F7E;
  3. border-collapse: collapse;
  4. }
  5. table.formdata th {
  6. border: 1px solid #5F6F7E;
  7. background-color: #6b9dcb;
  8. color: #000000;
  9. text-align: left;
  10. font-weight: normal;
  11. padding: 2px 4px 2px 4px;
  12. margin: 0;
  13. }
  14. table.formdata td {
  15. margin: 0;
  16. padding: 0;
  17. border: 1px solid #E2E2E2;
  18. }
  19. table.formdata input {
  20. width: 80px;
  21. padding: 2px 4px 2px 4px;
  22. margin: 0;
  23. border: none;
  24. }

 2. Now crate form.html  to display input form in table this HTML code :

 

  1. <link href="Style.css" type="text/css" rel="stylesheet">
  2.  
  3. <form method="post" action="action.html">
  4. <table class="formdata" >
  5. <caption>2005 – 2009</caption>
  6. <tr>
  7. <th></th>
  8. <th scope="col">2006</th>
  9. <th scope="col">2007</th>
  10. <th scope="col">2008</th>
  11. <th scope="col">2009</th>
  12. </tr>
  13. <tr>
  14. <th scope="row">Col 1</th>
  15. <td><input type="text" name="Col 12006" id="Col 12006" />
  16. </td>
  17. <td><input type="text" name="Col 12007" id="Col 12007" />
  18. </td>
  19. <td><input type="text" name="Col 12008" id="Col 12008" />
  20. </td>
  21. <td><input type="text" name="Col 12009" id="Col 12009" />
  22. </td>
  23. </tr>
  24. <tr>
  25. <th scope="row">Col 2</th>
  26. <td><input type="text" name="Col 22006" id="Col 22006"
  27. /></td>
  28. <td><input type="text" name="Col 22007" id="Col 22007"
  29. /></td>
  30. <td><input type="text" name="Col 22008" id="Col 22008"
  31. /></td>
  32. <td><input type="text" name="Col 22009" id="Col 22009"
  33. /></td>
  34. </tr>
  35. <tr>
  36. <th scope="row">Col 3</th>
  37. <td><input type="text" name="Col 32006"
  38. id="Col 32006" /></td>
  39. <td><input type="text" name="Col 32007"
  40. id="Col 32007" /></td>
  41. <td><input type="text" name="Col 32008"
  42. id="Col 32008" /></td>
  43. <td><input type="text" name="Col 32009"
  44. id="Col 32009" /></td>
  45. </tr>
  46. <tr>
  47. <th scope="row">Col 4</th>
  48. <td><input type="text" name="Col 42006"
  49. id="Col 42006" /></td>
  50. <td><input type="text" name="Col 42007"
  51. id="Col 42007" /></td>
  52. <td><input type="text" name="Col 42008"
  53. id="Col 42008" /></td>
  54. <td><input type="text" name="Col 42009"
  55. id="Col 42009" /></td>
  56. </tr>
  57. <tr>
  58. <th scope="row">Col 5</th>
  59. <td><input type="text" name="Col 42006" id="Col 42006" /></td>
  60. <td><input type="text" name="Col 42007" id="Col 42007" /></td>
  61. <td><input type="text" name="Col 42008" id="Col 42008" /></td>
  62. <td><input type="text" name="Col 42009" id="Col 42009" /></td>
  63. </tr>
  64. <tr>
  65. <th scope="row">Col 6</th>
  66. <td><input type="text" name="Col 62006" id="Col 62006" /></td>
  67. <td><input type="text" name="Col 62007" id="Col 62007" /></td>
  68. <td><input type="text" name="Col 62008" id="Col 62008" /></td>
  69. <td><input type="text" name="Col 62009" id="Col 62009" /></td>
  70. </tr>
  71. <tr>
  72. <th scope="row">Total</th>
  73. <td><input type="text" name="total2006" id="total2006" /></td>
  74. <td><input type="text" name="total2007" id="total2007" /></td>
  75. <td><input type="text" name="total2008" id="total2008" /></td>
  76. <td><input type="text" name="total2009" id="total2009" /></td>
  77. </tr>
  78. </table>
  79. <p><input type="submit" name="btnSubmit" id="btnSubmit"
  80. value="Add Data" /></p>
  81. </form>

The code to show how to create a form that looks similar to a spreadsheet, such as the Excel spreadsheet, I created forms similar to this for a Web application that had many tables of data. What the client wanted was for the table to turn into an “editable table” when selected for editing—though it retained the appearance of the original data table, the contents could be edited by the user.

Posted by admin   @   25 October 2009
0 comments
Tags : , , ,

Related Posts

0 Comments
Add Comment

No comments yet. Be the first to leave a comment !
Leave a Comment

Name

Email

Website

Previous Post
« PHP Case Functions String Next Post
MySql Calculate Time age/days with Function and Stored Procedures »

Categories

Comments

Recent Posts

Recent Posts
Archives
Translator
English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flag
Spanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flag
Croat flagDanish flagFinnish flagHindi flagPolish flagRumanian flagSwedish flagNorwegian flag
Filipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flag
Ukrainian flagVietnamese flagAlbanian flagEstonian flagMaltese flagThai flagTurkish flagHungarian flag
By N2H
Tags
Powered by Wordpress   |   Lunated designed by ZenVerse
Top Footer