Input content table

:

HTML code:

[Html]
<Form method = "post">
<Table class = "formdata">
<Caption> company sales statistical table 2004 ~ 2007 </caption>/* Title */
<Tr>
<Th> </th>/* row 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>
<Td> <input type = "text" name = "harddisk2005" id = "harddisk2005"/> </td>
<Td> <input type = "text" name = "harddisk2006" id = "harddisk2006"/> </td>
<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>
<Td> <input type = "text" name = "mainboard2005" id = "mainboard2005"/> </td>
<Td> <input type = "text" name = "mainboard2006" id = "mainboard2006"/> </td>
<Td> <input type = "text" name = "mainboard2007" id = "mainboard2007"/> </td>
</Tr>
<Tr>
<Th scope = "row"> Memory Disk </th>
<Td> <input type = "text" name = "memory2004" id = "memory2004"/> </td>
<Td> <input type = "text" name = "memory2005" id = "memory2005"/> </td>
<Td> <input type = "text" name = "memory2006" id = "memory2006"/> </td>
<Td> <input type = "text" name = "memory2007" id = "memory2007"/> </td>
</Tr>
<Tr>
<Th scope = "row"> Case </th>
<Td> <input type = "text" name = "case2004" id = "case2004"/> </td>
<Td> <input type = "text" name = "case2005" id = "case2005"/> </td>
<Td> <input type = "text" name = "case2006" id = "case2006"/> </td>
<Td> <input type = "text" name = "case2007" id = "case2007"/> </td>
</Tr>
<Tr>
<Th scope = "row"> Power </th>
<Td> <input type = "text" name = "power2004" id = "power2004"/> </td>
<Td> <input type = "text" name = "power2005" id = "power2005"/> </td>
<Td> <input type = "text" name = "power2006" id = "power2006"/> </td>
<Td> <input type = "text" name = "power2007" id = "power2007"/> </td>
</Tr>
<Tr>
<Th scope = "row"> CPU Fan </th>
<Td> <input type = "text" name = "cpufan2004" id = "cpufan2004"/> </td>
<Td> <input type = "text" name = "cpufan2005" id = "cpufan2005"/> </td>
<Td> <input type = "text" name = "cpufan2006" id = "cpufan2006"/> </td>
<Td> <input type = "text" name = "cpufan2007" id = "cpufan2007"/> </td>
</Tr>
<Tr>
<Th scope = "row"> Total </th>
<Td> <input type = "text" name = "total2004" id = "total2004"/> </td>
<Td> <input type = "text" name = "total2005" id = "total2005"/> </td>
<Td> <input type = "text" name = "total2006" id = "total2006"/> </td>
<Td> <input type = "text" name = "total2007" id = "total2007"/> </td>
</Tr>
</Table>
</Form>

CSS code:

[Css]
<Pre name = "code" class = "css"> 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 titles */
Border: 1px solid # 5F6F7E;
Background-color: # E2E2E2;
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 a region style */
Width: 100px; www.2cto.com
Padding: 1px 3px 1px 3px;
Margin: 0px;
Border: none;/* do not set borders in the input box */
Font-family: Arial;
}
</Pre> <br>
<Br>
<P> </p>
<Pre> </pre>
<Br>
<Br>
<P> </p>