NO.95 テーブルを再現

セルの結合の再現までやると面倒臭そうなのでやめました。
あくまで見た目だけの再現ですけど・・・



◆HEAD内の記述 <style type="text/css"> <!-- .TABLE{padding:1px;border-top:silver solid 1px;border-left:silver solid 1px; border-right:gray solid 1px;border-bottom:gray solid 1px;width:50%;} .TR1{margin:0px;padding:1px;line-height:140%;} .TR2{margin:0px;padding:1px;line-height:140%;background-color:darkblue;} .TR3{margin:0px;padding:1px;line-height:140%;background-color:darkred;} .TH1,.TH2,.TH3,.TH4{margin:1px;padding:2px;border-top:gray solid 1px;border-left:gray solid 1px; border-right:silver solid 1px;border-bottom:silver solid 1px;height:30; font-weight:bold;font-style:italic;text-align:center;} .TD1,.TD2,.TD3,.TD4{margin:1px;border-top:gray solid 1px;border-left:gray solid 1px; border-right:silver solid 1px;border-bottom:silver solid 1px;height:30;} .TH1,.TD1{width:20%;}.TH2,.TD2{width:20%;}.TH3,.TD3{width:40%;}.TH4,.TD4{width:18%;} .TD2{font-size:120%;font-weight:bold;} .TD3{font-style:italic;} --> </style>
◆BODY内の記述 ※<span class=TR2>非金属元素</span>&nbsp;<span class=TR3>金属元素</span><br><br> <div class=TABLE> <div class=TR1> <span class=TH1>元素番号</span><span class=TH2>元素記号</span><span class=TH3>元素名</span><span class=TH4>原子量</span> </div> <div class=TR2> <span class=TD1>1</span><span class=TD2>H</span><span class=TD3>水素</span><span class=TD4>1.008</span> </div> <div class=TR2> <span class=TD1>2</span><span class=TD2>He</span><span class=TD3>ヘリウム</span><span class=TD4>4.003</span> </div> <div class=TR3> <span class=TD1>3</span><span class=TD2>Li</span><span class=TD3>リチウム</span><span class=TD4>6.941</span> </div> <div class=TR3> <span class=TD1>4</span><span class=TD2>Be</span><span class=TD3>ベリリウム</span><span class=TD4>9.012</span> </div> <div class=TR2> <span class=TD1>5</span><span class=TD2>B</span><span class=TD3>ホウ素</span><span class=TD4>10.81</span> </div> <div class=TR2> <span class=TD1>6</span><span class=TD2>C</span><span class=TD3>炭素</span><span class=TD4>12.01</span> </div> <div class=TR2> <span class=TD1>7</span><span class=TD2>N</span><span class=TD3>窒素</span><span class=TD4>14.01</span> </div> <div class=TR2> <span class=TD1>8</span><span class=TD2>O</span><span class=TD3>酸素</span><span class=TD4>16.00</span> </div> <div class=TR2> <span class=TD1>9</span><span class=TD2>Fe</span><span class=TD3>フッ素</span><span class=TD4>19.00</span> </div> <div class=TR2> <span class=TD1>10</span><span class=TD2>Ne</span><span class=TD3>ネオン</span><span class=TD4>20.18</span> </div> <div class=TR3> <span class=TD1>11</span><span class=TD2>Na</span><span class=TD3>ナトリウム</span><span class=TD4>22.99</span> </div> <div class=TR3> <span class=TD1>12</span><span class=TD2>Mg</span><span class=TD3>マグネシウム</span><span class=TD4>24.31</span> </div> <div class=TR3> <span class=TD1>13</span><span class=TD2>Al</span><span class=TD3>アルミニウム</span><span class=TD4>26.98</span> </div> <div class=TR2> <span class=TD1>14</span><span class=TD2>Si</span><span class=TD3>ケイ素</span><span class=TD4>28.09</span> </div> <div class=TR2> <span class=TD1>15</span><span class=TD2>P</span><span class=TD3>リン</span><span class=TD4>30.97</span> </div> <div class=TR2> <span class=TD1>16</span><span class=TD2>S</span><span class=TD3>硫黄</span><span class=TD4>32.07</span> </div> <div class=TR2> <span class=TD1>17</span><span class=TD2>Cl</span><span class=TD3>塩素</span><span class=TD4>35.45</span> </div> <div class=TR2> <span class=TD1>18</span><span class=TD2>Ar</span><span class=TD3>アルゴン</span><span class=TD4>39.95</span> </div> <div class=TR3> <span class=TD1>19</span><span class=TD2>K</span><span class=TD3>カリウム</span><span class=TD4>39.10</span> </div> <div class=TR3> <span class=TD1>20</span><span class=TD2>Ca</span><span class=TD3>カルシウム</span><span class=TD4>40.08</span> </div> </div>
◆実行例

非金属元素 金属元素

元素番号元素記号元素名原子量
1H水素1.008
2Heヘリウム4.003
3Liリチウム6.941
4Beベリリウム9.012
5Bホウ素10.81
6C炭素12.01
7N窒素14.01
8O酸素16.00
9Feフッ素19.00
10Neネオン20.18
11Naナトリウム22.99
12Mgマグネシウム24.31
13Alアルミニウム26.98
14Siケイ素28.09
15Pリン30.97
16S硫黄32.07
17Cl塩素35.45
18Arアルゴン39.95
19Kカリウム39.10
20Caカルシウム40.08



前に戻る 次に進む

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送