:
HTML code:
<Form method = "Post"> <Table class = "formdata"> <caption> company sales statistics table 2004 ~ 2007 </caption>/* Title */<tr> <TH> </Th>/* line title */<TH scope = "col"> 2004 </Th> <th scope = "col"> 2005 </Th> <TH scope = "col"> 2006 </Th> <TH scope = "col"> 2007 </Th> </tr> <tr> <TH scope = "row"> Hard Disk) </Th>/* column title */<TD> <input type = "text" name = "harddisk2004" id = "harddisk2004"/> </TD> <input type = "text" name = "harddisk2005" id = "harddisk2005"/> </TD> <input type = "text" name = "harddisk2006" id =" harddisk2006 "/> </TD> <input type =" text "name =" harddisk2007 "id =" harddisk2007 "/> </TD> </tr> <tr> <TH scope = "row"> mainboard) </Th> <TD> <input type = "text" name = "mainboard2004" id = "mainboard2004"/> </TD> <input type = "text" name = "mainboard2005" id = "mainboard2005"/> </TD> <input type = "text" name = "mainboard2006" id = "mainboard2006"/> </ TD> <input type = "text" name = "mainboard2007" id = "mainboard2007"/> </TD> </tr> <TH scope =" row "> memory (memory disk) </Th> <TD> <input type = "text" name = "memory2004" id = "memory2004"/> </TD> <input type = "text" name = "memory2005" id = "memory2005"/> </TD> <input type = "text" name = "memory2006" id = "memory2006"/> </ TD> <input type = "text" name = "memory2007" id = "memory2007"/> </TD> </tr> <TH scope =" row "> case) </Th> <TD> <input type = "text" name = "case2004" id = "case2004"/> </TD> <input type = "text" name = "case2005" id = "case2005"/> </TD> <input type = "text" name = "case2006" id = "case2006"/> </ TD> <input type = "text" name = "case2007" id = "case2007"/> </TD> </tr> <TH scope =" row "> power) </Th> <TD> <input type = "text" name = "power2004" id = "power2004"/> </TD> <input type = "text" name = "power2005" id = "power2005"/> </TD> <input type = "text" name = "power2006" id = "power2006"/> </ TD> <input type = "text" name = "power2007" id = "power2007"/> </TD> </tr> <TH scope =" row "> CPU fan) </Th> <TD> <input type = "text" name = "cpufan2004" id = "cpufan2004"/> </TD> <input type = "text" name = "cpufan2005" id = "cpufan2005"/> </TD> <input type = "text" name = "cpufan2006" id = "cpufan2006"/> </ TD> <input type = "text" name = "cpufan2007" id = "cpufan2007"/> </TD> </tr> <TH scope =" row "> total) </Th> <TD> <input type = "text" name = "total2004" id = "total2004"/> </TD> <input type = "text" name = "total2005" id = "total2005"/> </TD> <input type = "text" name = "total2006" id = "total2006"/> </ TD> <input type = "text" name = "total2007" id = "total2007"/> </TD> </tr> </table> </form>
CSS code:
Body {} table. formdata {border: 1px solid # 5f6f7e; border-collapse: collapse; font-family: Arial;} table. formdata caption {/* Title */Text-align: Left; padding-bottom: 6px;} table. formdata Th {/* row and column title */Border: 1px solid # 5f6f7e; Background-color: # e2e2e2e2; color: #000000; text-align: Left; font-weight: normal; padding: 2px 8px 2px 6px; margin: 0px;} table. formdata TD {/* Table row */margin: 0px; padding: 0px; Border: 1px solid # ababab;/* cell border */} table. formdata input {/* enter the region style */width: 100px; padding: 1px 3px 1px 3px; margin: 0px; Border: none; /* do not set borders in the input box */font-family: Arial ;}