teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

マークアップをtableタグからulタグに変更しました

2016/05/10 08:36

投稿

msx2
msx2

スコア174

title CHANGED
File without changes
body CHANGED
@@ -4,32 +4,29 @@
4
4
  他にも多くの情報を入力するフォームになっており、全体で1つのフォームです。
5
5
 
6
6
  ```HTML
7
- <table class="timg">
8
- <tr>
7
+ <ul>
8
+ <li style="display:inline-block; ">
9
+ <label>画像1
10
+ <input type="file" id="image_select_1" style="display:none;">
9
- <th scope="col">画像1</th>
11
+ <img src="noimg.gif"></label>
10
- <th scope="col">画像2</th>
11
- <th scope="col">画像3</th>
12
- </tr>
13
- <tr>
14
- <td><div class="center"><input type="file" id="image_1" /></div></td>
15
- <td><div class="center"><input type="file" id="image_2" /></div></td>
16
- <td><div class="center"><input type="file" id="image_3" /></div></td>
17
- </tr>
18
- <tr>
19
- <td>
20
- <div class="center"><img src="noimg.gif" /></div>
21
- <input type="text" id="image_seq_1" value="1">
12
+ <input type="text" id="image_seq_1" value="1"><br>
13
+ <a href="#">画像削除</a>
22
- </td>
14
+ </li>
15
+ <li style="display:inline-block; ">
23
- <td>
16
+ <label>画像2
17
+ <input type="file" id="image_select_2" style="display:none;">
24
- <div class="center"><img src="noimg.gif" /></div>
18
+ <img src="noimg.gif"></label>
25
- <input type="text" id="image_seq_2" value="2">
19
+ <input type="text" id="image_seq_2" value="2"><br>
20
+ <a href="#">画像削除</a>
26
- </td>
21
+ </li>
22
+ <li style="display:inline-block; ">
27
- <td>
23
+ <label>画像3
24
+ <input type="file" id="image_select_3" style="display:none;">
28
- <div class="center"><img src="noimg.gif" /></div>
25
+ <img src="noimg.gif"></label>
29
- <input type="text" id="image_seq_3" value="3">
26
+ <input type="text" id="image_seq_3" value="3"><br>
27
+ <a href="#">画像削除</a>
30
- </td>
28
+ </li>
31
- </tr>
29
+ </ul>
32
- </table>
33
30
  ```
34
31
 
35
32
  画像ファイルは```<input type="file">```のイベントを使ってJavascriptで送信します。