- 締切済み
タブ付きテーブル２
エクセルのようにタブの付いたテーブルを作りたいと思っています。 ページはマス目でなくていいです。 以下はソースです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title></title> </head> <body> <p align="left"> </p> <p align="left"><img height="23" alt="" src="file://C:/Documents and Settings/****/My Documents/princess_ichigo/table/test.JPG" width="99" align="absBottom" border="0"> <table style="WIDTH: 517px; HEIGHT: 414px" cellspacing="1" cellpadding="10" bgcolor="#000000" border="0"> <tr> <td valign="top" align="center" bgcolor="#ffffff"> <p align="left"> </p></td></tr></table></p> </body> </html> ※画像は□（四角）で下の線が無いものです。 一応このような記述でテーブルっぽいのができました。 画像は「絶対底辺」に指定しています。 しないと画像とテーブルの間が空いてしまいます。 この記述の場合、ブラウザによっては間が空いて見えたり、変に映ってしまうでしょうか？
- mituru1986
- お礼率42% (632/1491)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
<head> <style type="text/css"> table{ border-collapse:collapse; } #sheet2,#sheet3{ display:none; } td{ border:1px solid #000000; } </style> <script type="text/javascript"> window.onload=function(){ tables=document.getElementsByTagName('table'); } function view(name){ for (var i=0;i<tables.length;i++){ if(tables[i].className=='sheet') tables[i].style.display='none'; } document.getElementById(name).style.display='block'; } </script> </head> <body> <table> <tr> <td onClick="view('sheet1')">sheet1</td> <td onClick="view('sheet2')">sheet2</td> <td onClick="view('sheet3')">sheet3</td> </tr> </table> <table id="sheet1" class="sheet"> <tr> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> </tr> <tr> <td>17</td> <td>18</td> <td>19</td> </tr> </table> <table id="sheet2" class="sheet"> <tr> <td>21</td> <td>22</td> <td>23</td> </tr> <tr> <td>24</td> <td>25</td> <td>26</td> </tr> <tr> <td>27</td> <td>28</td> <td>29</td> </tr> </table> <table id="sheet3" class="sheet"> <tr> <td>31</td> <td>32</td> <td>33</td> </tr> <tr> <td>34</td> <td>35</td> <td>36</td> </tr> <tr> <td>37</td> <td>38</td> <td>39</td> </tr> </table> </body>
お礼
回答ありがとうございます。 これではSheetのタブとその下の表の繋ぎ目が太くなってしまいます。 それを改善する方法はありませんか？ そして、質問の回答もいただきたいです。 よろしくお願いいたします。