2017-08-23 16 views
-2

私はhtmlデザインに慣れていません。 私は与えられたイメージのようなhtmlテーブルを取得しようとしています。誰でも私を助けてくれる人がいたら、助けてください。私はいくつかの使用を開始enter image description here私はテーブル形式です。私はそれをhtmlに変換したい

はcompleted.pleaseヘルプ HTML

<html> 
<body > 
    <table border=1 width="100%"> 
     <tr> 
      <td colspan=2 align="center"> 
       Cost Analysis Report 
      </td> 
     </tr> 
     <tr> 
      <td align="center"> 
       Purchase 
      </td> 
      <td align="center"> 
       Sales 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 
+0

テーブルジェネレータはオンラインでたくさんありますが、ここでは間違いなく役立つでしょう:http://www.tablesgenerator.com/html_tables –

+2

あなたの質問/問題は何ですか?あなたの例では 'colspan'を使っていますので、大きなテーブルでこれを使うのはどうですか? –

+0

'

​​ .. * 23 ...' –

答えて

1

構造です。デザイン、すべての色とすべてのセルの値を自由にカスタマイズできます。

<table border=1 width="100%"> 
<tr> 
    <td colspan="23"><center>Cost Analysis</center></td> 
</tr> 
<tr> 
    <td colspan="10"><center>Purchase</center></td> 
    <td colspan="10"><center>Sales</center></td> 
    <td colspan="3"><center>Tax</center></td> 
</tr> 
<tr> 
    <td><center>1</center></td> 
    <td><center>2</center></td> 
    <td><center>3</center></td> 
    <td><center>4</center></td> 
    <td><center>5</center></td> 
    <td><center>6</center></td> 
    <td><center>7</center></td> 
    <td><center>8</center></td> 
    <td><center>9</center></td> 
    <td><center>10</center></td> 
    <td><center>11</center></td> 
    <td><center>12</center></td> 
    <td><center>13</center></td> 
    <td><center>14</center></td> 
    <td><center>15</center></td> 
    <td><center>16</center></td> 
    <td><center>17</center></td> 
    <td><center>18</center></td> 
    <td><center>19</center></td> 
    <td><center>20</center></td> 
    <td><center>21</center></td> 
    <td><center>22</center></td> 
    <td><center>23</center></td> 
</tr> 
<tr> 
    <td><center>1</center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
</tr> 
<tr> 
    <td><center>1</center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
</tr> 
<tr> 
    <td><center>1</center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
</tr> 
<tr> 
    <td><center>1</center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
</tr> 
<tr> 
    <td><center>1</center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
    <td><center> </center></td> 
</tr> 
</table> 
+0

どのように部門の行を感じることができますか? – user7441072

+0

ボーダーの色を意味しますか?または幅? – jhek

+0

helped – user7441072

1

は私があなたにあれば仕事を教えてくださいませんcode.but。ここで

<table border=1 width="100%"> 
 
     <tr> 
 
      <td colspan=24 align="center"> 
 
       Cost Analysis Report 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan=8 align="center"> 
 
       Purchase 
 
      </td> 
 
      <td colspan=8 align="center"> 
 
       Sales 
 
      </td> 
 
      <td colspan=8 align="center"> 
 
       Tax 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       1 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       2 
 
      </td> 
 
      <td align="center"> 
 
       3 
 
      </td> 
 
      <td align="center"> 
 
       3 
 
      </td> 
 
      <td align="center"> 
 
       3 
 
      </td> 
 
     </tr> 
 
    </table>

1
<html> 
    <body > 
    <table border=1 width="100%"> 
    <thead> 
    <tr> 
     <th colspan="23" align="center"> 
      Cost Analysis Report 
     </th> 
    </tr> 
    <tr> 
     <th colspan="10" align="center"> 
      Purchase 
     </th> 
     <th colspan="10" align="center"> 
      Sales 
     </th> 
     <th colspan="3" align="center"> 
      Tax 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td align="center"> 
      id 
     </td> 
     <td align="center"> 

     </td> 
     <td align="center"> 

     </td> 
     <!--just continue--> 
    </tr> 
    </tbody> 
    </table> 
    </body> 
    </html> 
+0

そのようなボーダーはラインのように変わりますか? – user7441072

+0

はい、使用してください bdalina

+0

助けを借りて – user7441072

関連する問題