ProblemYou want to modify a form in an environment such as a spreadsheet application. SolutionFirst, place input elements into an HTML table, as shown in Figure 7-27: <form action="/process.php" method="get" name="copresentations"> <table cellspacing="0"> <caption> Summary of Financial Data </caption> <tr> <th scope="col">Fiscal Year </th> <th scope="col">Worksite<br /> Presentations </th> <th scope="col">Passing Grades </th> <th scope="col">Number of Presentators </th> </tr> <tr> <th scope="row">1999</th> <td><input type="text" name="wkpst1999" /></td> <td><input type="text" name="pass1999" /></td> <td><input type="text" name="numpst1999" /></td> </tr> <tr> <th scope="row">2000</th> <td><input type="text" name="wkpst2000" /></td> <td><input type="text" name="pass2000" /></td> <td><input type="text" name="numpst2000" /></td> </tr> <tr> <th scope="row">2001</th> <td><input type="text" name="wkpst2001" /></td> <td><input type="text" name="pass2001" /></td> <td><input type="text" name="numpst2001" /></td> </tr> <tr> <th scope="row">2002</th> <td><input type="text" name="wkpst2002" /></td> <td><input type="text" name="pass2002" /></td> <td><input type="text" name="numpst2002" /></td> </tr> <tr> <th scope="row">2003</th> <td><input type="text" name="wkpst2003" /></td> <td><input type="text" name="pass2003" /></td> <td><input type="text" name="numpst2003" /></td> </tr> <tr> <th scope="row">2004</th> <td><input type="text" name="wkpst2004" /></td> <td><input type="text" name="pass2004" /></td> <td><input type="text" name="numpst2004" /></td> </tr> </table> <input type="submit" value="Save" /> </form> Figure 7-27. A table without stylesApply a thin border around the table and set the table border display to collapse: table { border-collapse: collapse; border: 1px solid black; } Set the table cells to a set width and to display a thin border: th { border: 1px solid black; width: 6em; } td { width:6em; border: 1px solid black; } Remove padding and margins for the table cells: th { border: 1px solid black; width: 6em; } td { width:6em; border: 1px solid black; padding: 0; margin: 0; } Set the width of the input elements to equal the width of the table cells while removing any borders that browsers automatically apply to form elements: input { width: 100%; border: none; margin: 0; } By setting the width, the input elements will also stretch the submit button to the maximum width of its parent element, so the Submit will render quite large. To rein in the size of the Submit button, write a separate CSS rule: .save { margin-top: 1em; width: 5em; } To complete the spreadsheet look as shown in Figure 7-28, set the input text to be aligned to the right: input { width: 100%; border: none; margin: 0; text-align: right; } Figure 7-28. A table that looks like a spreadsheetDiscussionSpreadsheets help users keep tabs on lots of numerical and financial information. The typical ecommerce or a contact form layout would be a hindrance if a user needs to enter a multitude of numbers. By mimicking a spreadsheet layout, a user can quickly enter data. When coupled with the :hover pseudo-selector, the table row and cell a user is working in can be highlighted as data is entered (see Figure 7-29): tr:hover { background-color: #ffc; } tr:hover input { background-color: #ffc; } input:focus { background-color: #ffc; } Figure 7-29. A table row is highlightedSee AlsoStyling input elements in Recipe 7.2. |