プロが教える店舗&オフィスのセキュリティ対策術

エクセルのようにタブの付いたテーブルを作りたいと思っています。
ページはマス目でなくていいです。
以下はソースです。


<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>

※画像は□(四角)で下の線が無いものです。

一応このような記述でテーブルっぽいのができました。
画像は「絶対底辺」に指定しています。
しないと画像とテーブルの間が空いてしまいます。
この記述の場合、ブラウザによっては間が空いて見えたり、変に映ってしまうでしょうか?

A 回答 (1件)

<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>
    • good
    • 0
この回答へのお礼

回答ありがとうございます。
これではSheetのタブとその下の表の繋ぎ目が太くなってしまいます。
それを改善する方法はありませんか?
そして、質問の回答もいただきたいです。
よろしくお願いいたします。

お礼日時:2007/05/15 07:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!