エクセルのようにタブの付いたテーブルを作りたいと思っています。
ページはマス目でなくていいです。
以下はソースです。
<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件)
- 最新から表示
- 回答順に表示
No.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>
回答ありがとうございます。
これではSheetのタブとその下の表の繋ぎ目が太くなってしまいます。
それを改善する方法はありませんか?
そして、質問の回答もいただきたいです。
よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルの行の高さを指定する...
-
文字列が入っているtdを削除せ...
-
cssで、表示されるテキストによ...
-
HTMLで文とテーブルの間が空く。
-
EXCELのセル内にHTMLタグを含む...
-
テーブルの表示がずれます
-
tableタグ内で、空白セルでも罫...
-
テーブルのヘッダとボディの幅...
-
HTMLのテーブルで桁をそろ...
-
逆L字の表(table)組み
-
tableでcolspanを使うと次行以...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
ホームページ 表の上の余白を...
-
tableにtableをネストした場合
-
ラジオボタンの選択範囲について
-
テーブルの任意の列を非表示に...
-
HTML <td></td>タグ セル内余...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの任意の列を非表示に...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
文字列が入っているtdを削除せ...
-
HTML <td></td>タグ セル内余...
-
cssで、表示されるテキストによ...
-
テーブルの表示がずれます
-
テーブルの行の高さを指定する...
-
中に<table></table>が使えるア...
-
テーブルのセルに画像をピッタ...
-
スタイルシートで colspan=3と...
-
ホームページ 表の上の余白を...
-
EXCELからhtmlへの変換で罫線が...
-
表の1列だけをCSSを使って右揃...
-
tableの要素(tr、td)に一...
-
逆L字の表(table)組み
-
テーブルタグのセルの幅の一部...
-
HTMLで外部ファイルの読み込み
-
表の中の列の順番を入れ替える...
おすすめ情報