CSS制作可輸入內(nèi)容的table表格

2024-07-11 08:29:19

字體：大中小

供稿：網(wǎng)友

效果圖：

復(fù)制代碼

代碼如下:
<form method="post">
<table class="formdata">
<caption>公司銷售統(tǒng)計(jì)表 2004～2007</caption> /*標(biāo)題*/
<tr>
<th></th> /*行標(biāo)題*/
<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> /*列標(biāo)題*/
<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">內(nèi)存條(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">機(jī)箱(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風(fēng)扇(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">總計(jì)(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>

上一篇：ie8中圖片設(shè)置max-width屬性滿足一定的條件會(huì)導(dǎo)致消失

下一篇：css table-layout屬性顯示表格單元格、行、列的算法規(guī)則

發(fā)表評(píng)論

共有條評(píng)論