メモ1 

```html
<!DOCTYPE html>

<html>
  <head>
    <title>表のサンプル</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  </head>



<body>
<div id="button">
<!--
<INPUT    id="text1"   type="text" value="jquery try" cols=40>
	<textarea id="area1"   cols=40 rows=10></textarea>
-->
<p>テーブル幅 テーブル高さ</p>
<div class="row">
<INPUT    id="text1"   type="text" value="100" cols=20>
<input type="radio" name="size-h" value="px" checked>px
<input type="radio" name="size-h" value="%">%
<INPUT    id="text2"   type="text" value="100" cols=20>
<input type="radio" name="size-w" value="px" checked>px
<input type="radio" name="size-w" value="%">%
</div>

<div class="row">
<p>テーブル行 テーブル列</p>
<INPUT    id="text3"   type="text" value="2" cols=20>
<INPUT    id="text4"   type="text" value="2" cols=20>
</div>

<div class="row">
<p>セル幅 セル高さ</p>
<INPUT    id="text5"   type="text" value="50" cols=20>
<input type="radio" name="c-size-h" value="px" checked>px
<input type="radio" name="c-size-h" value="%">%
<INPUT    id="text6"   type="text" value="50" cols=20>
<input type="radio" name="c-size-w" value="px" checked>px
<input type="radio" name="c-size-w" value="%">%
</div>

<div class="row">
<p>セル余白</p>
<INPUT    id="text7"   type="text" value="10" cols=20>
<input type="radio" name="c-margin" value="px" checked>px
<input type="radio" name="c-margin" value="%">%

<div class="row">
<p>画像</p>
<INPUT    id="text8"   type="text" value="画像" cols=20>
<input type="radio" name="p-switch" value="1" checked>有
<input type="radio" name="p-switch" value="0">無
</div>

<div class="row">
<p>テキスト</p>
<INPUT    id="text9"   type="text" value="テキスト" cols=20>
<input type="radio" name="t-switch" value="1" checked>有
<input type="radio" name="t-switch" value="0">無
</div>
<button   id="button1" >OK</button>


</div>

<div id="elementID">

</div>

	<script type="text/javascript">
		$(function(){
 
			<!--- button1 の click 時の処理 --->
 
			$('#button1').click(function () {
			  var h = $('input[name="size-h"]:checked').val();
                          var w = $('input[name="size-w"]:checked').val();
                          var ch = $('input[name="c-size-h"]:checked').val();
                          var cw = $('input[name="c-size-w"]:checked').val();
                          var ch = $('input[name="c-margin"]:checked').val();
                          var cm = $('input[name="c-margin"]:checked').val();
                          var ps = $('input[name="p-switch"]:checked').val();
                          var ts = $('input[name="t-switch"]:checked').val();
                          var tbHt = $('#text1').val() + h;
                          var tbWd = $('#text2').val() + w;
                          var row = $('#text3').val();
                          var col = $('#text4').val();
                          var clHt = $('#text5').val() + ch;
                          var clWd = $('#text6').val() + cw;
                          var clMg = $('#text7').val() + cm;
                          $('#elementID').empty();
			  $('#elementID').append('<table id="table1"></table>');
                          $('#table1').css({'width':tbHt,'height':tbWd});
                          $('#table1').css('border','solid');
                          
			  //.attr('id','xxxx'); id追加
                          for(var i = 0; i < row; i++){
			　　$('#table1').append('<tr></tr>');
                            $('tr').last().attr('id','row'+i);
                            $('tr').last().css('border','solid');

                            for(var t = 0; t < col; t++){
　　　　　　　　　　　　　    $('#table1 tr').last().append('<td></td>');
                              $('td').last().attr('id','col'+t);
                              $('td').last().css({'width':clHt,'height':clWd});
                              $('td').last().css('border','solid');
                              $('td').last().css('padding',clMg);
                            }
                          }
			});
		});
	</script>

</body>
</html>

```